使用容器或面板在sencha touch中的列表

Question

我在学习sencha touch。 我在容器中使用xtype：'list'时遇到了一个问题。即它没有向我展示任何东西。我的代码是：

{ 
    xtype:'container', 
    items:[ 
     { 
      xtype: 'list', 
      id: 'lists', 
      fields: [{name:'name'}], 
      store: { 
       data: [ 
        {name: 'Cowper'}, 
        {name: 'Everett'}, 
        {name: 'University'}, 
        {name: 'Forest'} 
       ] 
      }, 
      itemTpl: '<div>{name}</div>' 
     } 
    ], 
} 

请指出我错在哪里？ 任何帮助将是伟大的:) 在此先感谢。

Answer 1

问题出在您的代码中。试试这个 -

Ext.create('Ext.List', { 
    fullscreen: true, 
    id:'lists', 
    itemTpl: '<div>{name}</div>', 
    data: [ 
     {name: 'Cowper'}, 
     {name: 'Everett'}, 
     {name: 'University'}, 
     {name: 'Forest'} 
    ] 
}); 

OR

Ext.define('TestModel', { 
    extend: 'Ext.data.Model', 
    config: { 
     fields: ['name'] 
    } 
}); 

var store = Ext.create('Ext.data.Store', { 
    model: 'TestModel', 
    data: [ 
     {name: 'Cowper'}, 
     {name: 'Everett'}, 
     {name: 'University'}, 
     {name: 'Forest'} 
    ] 
}); 

Ext.create('Ext.List', { 
    fullscreen: true, 
    id:'lists', 
    itemTpl: '<div>{name}</div>', 
    store: store 
}); 

Answer 2

我认为当你添加也就迎刃而解了：

layout: 'fit' 

您的容器。这个配置大小为子组件。

ST2 Layout Guide

注意，列表实际上是一个容器。尽量减少你的嵌套。
请查看fullscreen配置。