extjs - Sencha Touch 2. 清空列表

Question

Stores 对象是通过 ajax 请求动态加载的。在控制台中调试时，我可以看到Store对象充满了记录，但List是空的。

代码：

视口视图

Ext.define('sample.views.Viewport', {
    extend: 'Ext.tab.Panel',

    title:   'Hello world!',

    xtype: 'viewport',

    config: {
        fullscreen: true,

        tabBar: {
            docked: 'bottom',
        },

        items: [
            { xclass: 'sample.views.wares.lists.Popular' },
        ]
    }
});

导航视图视图

Ext.define('sample.view.wares.lists.Popular', {
    extend: 'Ext.NavigationView',

    xtype: 'Popular',

    config: {       
        iconCls: 'home',
        title: 'Pop. prekės',

        items: [
            {
                xtype: 'wares',                                                         
            }
        ]   
    }
});

列表显示

Ext.define('sample.views.wares.lists.List', {
    extend: 'Ext.List',

    xtype: 'wares',

    config: {
        store: 'Wares', 
        itemTpl: '{Name}'
    },

    initialize: function () {
        this.config.title = sample.app.title;
    }
});    

存储通过 Ajax 请求动态加载的记录对象。

Ext.define('sample.store.Wares', {
    extend: 'Ext.data.Store',

    config: {
        model: "sample.models.WaresListItem"
    }
});

Answer 1

大多数情况下，您看不到内部组件是因为您尚未定义其容器的布局。

尝试将布局添加到导航视图的配置中，如下所示：

config: {       
    iconCls: 'home',
    title: 'Pop. prekės',
    layout: 'fit',
    items: [
        {
            xtype: 'wares',                                                         
        }
    ]   
}

希望这可以帮助

另请参阅：RDougan 在此处的回答：如何使 dataview.list 在 Sencha Touch 2 中可见？

Answer 2

initialize: function () {
    this.config.title = sample.app.title;
    this.callParent();
}

如果您有初始化函数，“this.callParent()”很重要，因为它调用父级（在您的情况下为“Ext.dataview.List”）并要求它执行某些默认操作，这些默认操作是构建列表所必须的。这类似于在 java 中从构造函数调用 super。

如果您可以将其移至声明块

this.config.title = sample.app.title;

并这样做

config: {
    store: 'Wares', 
    itemTpl: '{Name}',
    title: sample.app.title
},

您完全不需要初始化块

Answer 3

多次查看官方文档中的示例应用程序，通过callParent在函数中调用函数解决了问题initialize。还不知道为什么。

initialize: function () {
    this.config.title = sample.app.title;
    this.callParent();
}