Question

我无法在没有列表标题的情况下呈现列表。

我浪费了很多时间，但我无法找到解决问题的方法。

并在此处编码：

Ext.application({
name: 'myApp',
launch: function() {


    var listdata = Ext.create('Ext.data.Store', {
       fields : ['title'],
       data   : [ {title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'}, {title: 'Charly'} ]
    });


    var test1 = Ext.create('Ext.List', {
       //!!!title: 'Test1',
       itemTpl: '{title}',
       store: listdata
    });


    Ext.create('Ext.tab.Panel', {
        renderTo: 'el',
        height   : '100%',
        items      : [test1],               
    });

}

}）;

如果我删除了atributte标题，则列表根本不会呈现。

任何帮助将不胜感激！

Answer 1

TabPanel 中的项目需要 title属性以在选项卡上显示名称。如果查看Web Inspector控制台，您将看到错误消息：

Error: [ERROR][Ext.Container#onFirstItemAdd] Adding a card to a tab container without specifying any tab configuration.

此外，您不应使用 renderTo 属性。而是将其添加到Ext.Viewport或将fullscreen配置设置为true：

Ext.Viewport.add({
    xtype: 'tabpanel',
    ...
});

或fullscreen：

Ext.create('Ext.tab.Panel', {
    fullscreen: true,
    ...
});

您也不需要height: 100%行，因为组件容器的布局将处理项目大小。

这是做你想做的事的正确方法：

Ext.application({
    name: 'Sencha',
    launch: function() {
        Ext.Viewport.add({
            xtype: 'tabpanel',
            items: [
                {
                    title: 'test',
                    xtype: 'list',
                    itemTpl: '{title}',
                    store: {
                        fields : ['title'],
                        data   : [
                            {title: 'Alpha'},
                            {title: 'Bravo'},
                            {title: 'Alpha'},
                            {title: 'Bravo'},
                            {title: 'Alpha'},
                            {title: 'Alpha'},
                            {title: 'Alpha'},
                            {title: 'Alpha'},
                            {title: 'Alpha'},
                            {title: 'Alpha'}
                        ]
                    }
                }
            ]
        });
    }
});

Answer 2

问题不在ListView中，但问题是TabPanel无法根据ListView的高度调整布局，如果我删除TabPanel包装然后ListView正常工作

Ext.application({
    name: 'myApp',
    launch: function() {

        var listdata = Ext.create('Ext.data.Store', {
           fields : ['title'],
           data   : [ {title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'}, {title: 'Bravo'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'}, {title: 'Bravo'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'}, {title: 'Charly'} ]
        });

        var test2 = Ext.create('Ext.List', {
            // title: 'Test2',
           itemTpl: '{title}',
           store: listdata,
           renderTo: 'el2',
            height   : '100%',
        });
    }
});

如果删除TabPanel不是您的选项，那么我可以尝试找出确切的问题，但如果可以删除它，那么您可以使用此代码

没有标题，Sencha-Touch 2.0无法将列表呈现给div

2 个答案: