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',
             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',
                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>'
        }]
    }
});