一位同学问我一个问题：

sencha touch中xtype创建dataview死活不显示！！

版本2.3.1，MVC模式，sencha touch创建目录

程序很简单，主界面一个tabPanel,两个分页“FoodMain”“UserMain”

想在第一个分页显示一个DataView，结果死活不显示，

Main.js如下：

1 //file: app/view/Main.js 2 Ext.define('myapp.view.Main', { 3     extend: 'Ext.tab.Panel', 4     xtype: 'main', 5     requires: [ 6         'myapp.view.Foodmain', 7         'myapp.view.Usermain' 8     ], 9     config: {10         tabBarPosition: 'bottom',11 12         items: [13             {14                 xtype: 'foodmain',15                 title: '主页',16                 iconCls: 'home'17             },18             {19                 xtype: 'usermain',20                 title: '用户',21                 iconCls: 'user'22             }23         ]24     }25 });

Foodmain.js如下：

1 // file: app/view/Foodmain.js 2 Ext.define('myapp.view.Foodmain', { 3     extend: 'Ext.Panel', 4     xtype: 'foodmain', 5     id: 'idfoodmain', 6     config: { 7         items: [{ 8             xtype: 'dataview', 9             width: 300,10             store: {11                 fields: ['name', 'age'],12                 data: [13                     {name: 'Jamie',  age: 100},14                     {name: 'Rob',   age: 21},15                     {name: 'Tommy', age: 24},16                     {name: 'Jacky', age: 24},17                     {name: 'Ed',   age: 26}18                 ]19             },20 21             itemTpl: '
     
      {name} is {age} years old
     
'22         }]23     }24 });

第一分页死活不显示这个dataview，其他控件一律正常。如果再创建个panel,在panel里还是不显示，反正就是死活没有

如图

----------------------------------------------

如果改成直接在Main.js，如下则第三页能正确显示，

1 // file: app/view/Main.js 2 Ext.define('myapp.view.Main', { 3     extend: 'Ext.tab.Panel', 4     xtype: 'main', 5     requires: [ 6         'myapp.view.Foodmain', 7         'myapp.view.Usermain' 8     ], 9     config: {10         tabBarPosition: 'bottom',11 12         items: [13             {14                 xtype: 'foodmain',15                 title: '主页',16                 iconCls: 'home'17             },18             {19                 xtype: 'usermain',20                 title: '用户',21                 iconCls: 'user'22             },23             // 直接加入Main.js中则第三页能正常显示24             {25                 xtype: 'dataview', 26                 title: 'Test',27                 iconCls: 'user',28                 width:300,29                 store: {30                     fields: ['name', 'age'],31                     data: [32                         {name: 'Jamie',  age: 100},33                         {name: 'Rob',   age: 21},34                         {name: 'Tommy', age: 24},35                         {name: 'Jacky', age: 24},36                         {name: 'Ed',   age: 26}37                     ]38                 },39                 itemTpl: '
     
      {name} is {age} years old
     
'40             }41         ]42     }43 });

第一页仍然没有，第三页能正确显示！

   

----------------------------------以上是问题，我是分割线----------------------------------

解决方案就是：

给dataview设置一个高度

Panel布局在ext之中是比较坑爹的，在Panel中再套用视图控件一定要注意控件的高宽等属性，并且这种布局也比较耗费内存会降低性能，不推荐使用。

所以用的时候能不用尽量不用，最后的代码应该是：

1 // file: app/view/Foodmain.js 2 Ext.define('myapp.view.Foodmain', { 3     extend: 'Ext.Container', 4     xtype: 'foodmain', 5     id: 'idfoodmain', 6     config: { 7         items: [{ 8             xtype: 'dataview', 9             height:'100%',10             store: {11                 fields: ['name', 'age'],12                 data: [13                     {name: 'Jamie',  age: 100},14                     {name: 'Rob',   age: 21},15                     {name: 'Tommy', age: 24},16                     {name: 'Jacky', age: 24},17                     {name: 'Ed',   age: 26}18                 ]19             },20             itemTpl: '
     
      {name} is {age} years old
     
'21         }]22     }23 });