Question

我无法弄清楚如何在另一个对象中显示我的Ext.dataview.List对象。如果我尝试在视口中显示Ext.dataview.List对象，我自己可以看到我的数据。但是如果我尝试将它作为一个组件包含在另一个组件中，它认为没有数据（从HTML输出判断），并且似乎没有显示任何内容。

所以，如果我有一个带有以下代码的app.js：

Ext.application({
    name: 'MobileUnion',

    views:          ['LocalsList'],
    models:         ['Local'],
    stores:         ['Locals'],

    launch: function() {
        // Initialize the main view
         var mainView = {
                xtype: 'localslist'
        };
        Ext.Viewport.add([mainView]);
    }
});

我可以用这种方式设置MobileUnion.view.LocalsList，这样就不会产生任何列表：

Ext.define('MobileUnion.view.LocalsList', {
    extend: 'Ext.Container',
    alias: 'widget.localslist',
    requires: 'Ext.dataview.List',

    config: {
        items: [
            {
                itemId: 'localsList',
                store: 'Locals',
                loadingText: 'Loading Locals...',
                emptyText: '<div>No locals found.</div>',
                onItemDisclosure: true,
                itemTpl: '<div>{localName}</div><div>{designation}</div>'

            }
        ]
    }
});

或者，我可以这样设置，这会产生一个填充的列表，但不会在另一个组件内：

Ext.define('MobileUnion.view.LocalsList', {
    extend: 'Ext.dataview.List',
    alias: 'widget.localslist',

    config: {

                itemId: 'localsList',
                store: 'Locals',
                loadingText: 'Loading Locals...',
                emptyText: '<div>No locals found.</div>',
                onItemDisclosure: true,
                itemTpl: '<div>{localName}</div><div>{designation}</div>'


    }
});

我试图解决此问题的原因是我可以在列表面板中显示列表组件。

注意：我已经汇集了一个小提琴，其中包括： http://www.senchafiddle.com/#6nCH8

我必须遗漏一些基本的东西，但此时，已经完成了文档，并购买了两本书，其中一本我已完全阅读，另一本是我在编码时阅读的，我仍然没有一个答案。任何帮助都将非常感激。

附加代码

应用程序/模型/ Local.js

Ext.define('MobileUnion.model.Local', {
    extend: 'Ext.data.Model',
    config: {
        idProperty: 'id',
        fields: [
            { name: 'id', type: 'int' },
            { name: 'dateCreated', type: 'date', dateFormat: 'c' },
            { name: 'localName', type: 'string' },
            { name: 'designation', type: 'string' }
        ],
    }
});

应用程序/商店/ Locals.js

Ext.define('MobileUnion.store.Locals', {
    extend: 'Ext.data.Store',
    requires: ['MobileUnion.model.Local'],
    config: {
        model: 'MobileUnion.model.Local',
        data: [
            { localName: 'ABCD', designation: '123' },
            { localName: 'WXYZ', designation: '456' }
        ],
        autoLoad: true,
        sorters: [{ property: 'dateCreated', direction: 'DESC'}]
    }
});

Answer 1

在选项1中，您定义了一个容器，但实际上您并未向容器添加项目。要将列表添加到容器，请将xtype: 'list'添加到items数组中。接下来你需要做的是设置容器布局以适应，否则列表将不会显示。这应该适合你：

Ext.define('MobileUnion.view.LocalsList', {
    extend: 'Ext.Container',
    alias: 'widget.localslist',
    requires: 'Ext.dataview.List',

    config: {
        layout: {
            type: 'fit' //set containers layout
        },
        items: [
            {
                xtype: 'list', //add xtype
                itemId: 'localsList',
                store: 'Locals',
                loadingText: 'Loading Locals...',
                emptyText: '<div>No locals found.</div>',
                onItemDisclosure: true,
                itemTpl: '<div>{localName}</div><div>{designation}</div>'

            }
        ]
    }
});

有关Sencha布局的更多信息：http://docs.sencha.com/touch/2-1/#!/guide/layouts

祝你好运！

获取Ext.dataview.List实例以显示Ext.tab.Panel实例内部

1 个答案: