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>'


    }
});

これを実行しようとしている理由は、リスト コンポーネントをタブ パネル内に表示できるようにするためです。

注: ここですべての Fiddle を組み立てました: http://www.senchafiddle.com/#6nCH8

何か基本的なことが欠けているに違いありませんが、この時点でドキュメントを読み、2 冊の本を購入しました。1 冊は完全に読み、もう 1 冊はコーディング中に読んでいますが、まだ答えがありません。どんな助けでも大歓迎です。

追加コード

アプリ/モデル/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'するには、項目配列に追加します。次に行う必要があるのは、コンテナーのレイアウトを適切に設定することです。そうしないと、リストが表示されません。これはあなたのために働くはずです：

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 に答える