Sencha Touch 2垂直添加两个列表?

时间:2012-10-12 09:09:17

标签: sencha-touch extjs sencha-touch-2

我想要一个垂直显示两个列表的面板。 以下代码:

Ext.define('CD.abc.Profile', {
extend: 'Ext.Panel',
layout: 'fit',
fullscreen: true,
config: {
   layout:     'vbox',
    items:      [
        {
            xtype: 'mylist1'
        },
        {
            xtype: 'mylist2'
        }
    ]
}

});

但是项目没有显示,页面显示为空白。我可以在dom结构中找到元素,但它们在视图中保持不可见。 任何人都可以帮我解决这个问题吗?

3 个答案:

答案 0 :(得分:1)

试试这个。它为我工作。

        Ext.define('CD.abc.Profile', {
        extend: 'Ext.Panel',
        config: {
           layout:'vbox',
            items:      [
                {
                    xtype: 'mylist1', // x-type of your list1 view
                    flex:1
                },
                {
                    xtype: 'mylist2', // x-type of your list2 view
                    flex:1
                }
            ]
        }
        });

答案 1 :(得分:0)

将flex属性传递为1

flex:1

答案 2 :(得分:0)

为我尝试这项工作:

Ext.define('Sencha.view.Blog', {
extend: 'Ext.Panel',
xtype:'blogpage',

config:{
    layout:'fit',
    width:'100%',
    height:'100%',
    title: 'Blog',
    iconCls: 'star',
    style:'background-color: red;',

    items:[
            { 
                xtype:'list',
                id:'thelist',
                style:'background-color: blue;',
                height:'100%', width:'20%',left:0,
                        store: {
            fields: ['name', 'number'],
            sorters: 'name',
            data: [
                {name: 'Shawshank Redemption', number: 5},
                {name: 'SuperBad', number: 3},
                {name: 'God Father', number: 5},
                {name: 'Forest Gump', number: 4.5},
                {name: 'A Beautiful Mind', number: 5},
            ]
        },

        itemTpl: '{name}'
            },
            { 
                xtype:'list',
                id:'thelist1',
                style:'background-color: blue;',
                height:'100%', width:'20%',right:0,
                        store: {
            fields: ['name', 'number'],
            sorters: 'name',
            data: [
                {name: 'Shawshank Redemption', number: 5},
                {name: 'SuperBad', number: 3},
                {name: 'God Father', number: 5},
                {name: 'Forest Gump', number: 4.5},
                {name: 'A Beautiful Mind', number: 5},
            ]
            },
            itemTpl: '{name}'
            }
        ]
}});