Question

我需要一个名单列表，以便在sencha touch中的工作表中显示。工作表将显示所有其他子项，但不显示列表。我做错了什么，或者这根本不起作用？这是代码：

myList = Ext.create('Ext.dataview.List', {
    store: myStore,
    itemTpl: '{firstName}, {lastName}'
});


mySheet = Ext.create('Ext.Sheet', {
    items: myList
});


Ext.create('Ext.Panel', {
    fullscreen: true,
    items: [ 
        mySheet,
        {
            xtype: 'button',
            text: 'Click Me',
            handler: function() {
                mySheet.show();
            }
        }
    ]
});

提前致谢！

Answer 1

给它身高= 300。根据你的要求。

Answer 2

@jeremygerrits几乎是正确的。

IMO fit无效，因为它适合所有组件。

我的解决方案是在视图容器上使用vbox / hbox。然后在添加的组件上添加flex: 1。

e.g。容器：

Ext.define('Tm.view.MyContainer', {
    extend: 'Ext.Container',
    xtype: 'holder',

    config: {
        fullscreen: true,
        layout: 'vbox'
    }
});

和组件：

Ext.define('Tm.view.MyComponent', {
    extend: 'Ext.dataview.List',
    xtype: 'newc',

    config: {
        flex: 1,
        itemTpl: '{option_text}'
    }
});

并在控制器中（假设容器引用已设置）：

    tpl = Ext.create('Tm.view.MyComponent');
tpl.setData(data);
this.getMyContainer().add(tpl);

然后添加的任何组件都会正确显示。

Answer 3

尝试在面板配置中添加布局：

layout: 'fit'

这应该使列表填满剩下的空间。

工作表中的Sencha Touch 2列表不显示

3 个答案: