Sencha touch 2 Can'；t将列表渲染为无标题的div，Sencha Touch 2.0

没有列表的标题，我无法呈现列表。

我浪费了很多时间，但我找不到解决问题的办法

例如：

代码如下：

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

}

}))

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

---

任何帮助都将不胜感激

问题不在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，那么我可以尝试找出确切的问题，但是如果可以删除，那么您可以使用此代码，TabPanel中的项目需要一个

title

属性来显示选项卡上的名称。如果查看Web Inspector控制台，您将看到错误消息：

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

此外，不应使用renderTo属性。相反，将其添加到Ext.Viewport或将

全屏配置设置为true：

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

或全屏显示

：

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

您也不需要

高度：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'}
                        ]
                    }
                }
            ]
        });
    }
});

---

您不应该使用

renderTo

。相反，把它放在另一个组件/容器中。这个解决方案实际上解决了他的原始问题吗，如果我从配置中删除title属性，它仍然不会呈现correctly@SaketPatel谢谢，我误读了问题并更新了答案。