1

我无法弄清楚如何在另一个对象中显示我的 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'}]
    }
});
4

1 回答 1

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

祝你好运！

于 2012-12-13T09:03:29.087 回答