sencha touch 坑爹的Panel，数据不显示了...

一位同学问我一个问题：

sencha touch中xtype创建dataview死活不显示！！
版本2.3.1，MVC模式，sencha touch创建目录
程序很简单，主界面一个tabPanel,两个分页“FoodMain”“UserMain”
想在第一个分页显示一个DataView，结果死活不显示，
Main.js如下：

 //file: app/view/Main.js
 Ext.define('myapp.view.Main', {
     extend: 'Ext.tab.Panel',
     xtype: 'main',
     requires: [
         'myapp.view.Foodmain',
         'myapp.view.Usermain'
     ],
     config: {
         tabBarPosition: 'bottom',

         items: [
             {
                 xtype: 'foodmain',
                 title: '主页',
                 iconCls: 'home'
             },
             {
                 xtype: 'usermain',
                 title: '用户',
                 iconCls: 'user'
             }
         ]
     }
 });

Foodmain.js如下：

 // file: app/view/Foodmain.js
 Ext.define('myapp.view.Foodmain', {
     extend: 'Ext.Panel',
     xtype: 'foodmain',
     id: 'idfoodmain',
     config: {
         items: [{
             xtype: 'dataview',
             width: 300,
             store: {
                 fields: ['name', 'age'],
                 data: [
                     {name: 'Jamie',  age: 100},
                     {name: 'Rob',   age: 21},
                     {name: 'Tommy', age: 24},
                     {name: 'Jacky', age: 24},
                     {name: 'Ed',   age: 26}
                 ]
             },

             itemTpl: '<div>{name} is {age} years old</div>'
         }]
     }
 });

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

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

 // file: app/view/Main.js
 Ext.define('myapp.view.Main', {
     extend: 'Ext.tab.Panel',
     xtype: 'main',
     requires: [
         'myapp.view.Foodmain',
         'myapp.view.Usermain'
     ],
     config: {
         tabBarPosition: 'bottom',

         items: [
             {
                 xtype: 'foodmain',
                 title: '主页',
                 iconCls: 'home'
             },
             {
                 xtype: 'usermain',
                 title: '用户',
                 iconCls: 'user'
             },
             // 直接加入Main.js中则第三页能正常显示
             {
                 xtype: 'dataview',
                 title: 'Test',
                 iconCls: 'user',
                 width:300,
                 store: {
                     fields: ['name', 'age'],
                     data: [
                         {name: 'Jamie',  age: 100},
                         {name: 'Rob',   age: 21},
                         {name: 'Tommy', age: 24},
                         {name: 'Jacky', age: 24},
                         {name: 'Ed',   age: 26}
                     ]
                 },
                 itemTpl: '<div>{name} is {age} years old</div>'
             }
         ]
     }
 });

第一页仍然没有，第三页能正确显示！
   
----------------------------------以上是问题，我是分割线----------------------------------

解决方案就是：

给dataview设置一个高度

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

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

 // file: app/view/Foodmain.js
 Ext.define('myapp.view.Foodmain', {
     extend: 'Ext.Container',
     xtype: 'foodmain',
     id: 'idfoodmain',
     config: {
         items: [{
             xtype: 'dataview',
             height:'100%',
             store: {
                 fields: ['name', 'age'],
                 data: [
                     {name: 'Jamie',  age: 100},
                     {name: 'Rob',   age: 21},
                     {name: 'Tommy', age: 24},
                     {name: 'Jacky', age: 24},
                     {name: 'Ed',   age: 26}
                 ]
             },
             itemTpl: '<div>{name} is {age} years old</div>'
         }]
     }
 });