0

煎茶初心者です。sencha Architect、touch 2.2.x バージョンを使用して MVC 構造を作成しています。

入れ子になったデータをリスト コントロールに表示したいのですが、tmp の定義方法がわかりません。

これはサーバーから返されるデータのサンプルです

{
"data": 
[
    {"AcctId": 1, "AcctNum": "A", "Alias": "aa"},
    {"AcctId": 2, "AcctNum": "B", "Alias": "bb"}, 
    {"AcctId": 3, "AcctNum": "C", "Alias": "cc"}
]
}

これはモデルです。ネストされたモデルを定義します

Ext.define('MyApp.model.Data', {
    extend: 'Ext.data.Model',

    uses: [
        'MyApp.model.LoginAlias'
    ],

    config: {
        hasMany: {
            model: 'MyApp.model.LoginAlias',
            name: 'LoginAlias'
        }
    }
});

Ext.define('MyApp.model.LoginAlias', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            {
                name: 'AcctId'
            },
            {
                name: 'AcctNum'
            },
            {
                name: 'Alias'
            }
        ]
    }
});

これはデータを取得する Stores です。クロスサーバー データになるので、JsonP を使用します

Ext.define('MyApp.store.MyJsonPStore', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.Data'
    ],

    config: {
        autoLoad: true,
        model: 'MyApp.model.Data',
        storeId: 'MyJsonPStore',
        proxy: {
            type: 'jsonp',
            url: 'http://localhost:8000/test/get_alias/',
            reader: {
                type: 'json'
            }
        }
    }
});

最後にリスト

Ext.define('MyApp.view.MyList', {
    extend: 'Ext.dataview.List',

    config: {
        store: 'MyJsonPStore',
        itemTpl: [
            '<div>List Item {AcctId}</div>'
        ]
    }

});

Store の横にある「目」アイコンをクリックすると、Sencha Architect のサーバーから Store がデータを取得できることがわかります。

data.AcctId を使用して List tpl を試すか、List ストアを MyJsonPStore.data に変更しますが、すべて機能しません。

助けてください、どうもありがとう。

p/s: ネストされていないモデルを試してみましたが、リストは問題なく動作します。そして、これはメインの js ファイルです。必要な場合に備えて

Ext.Loader.setConfig({

});

Ext.application({
    models: [
        'Data',
        'LoginAlias'
    ],
    stores: [
        'MyJsonPStore',
        'MyStore'
    ],
    name: 'MyApp',

    launch: function() {

        Ext.create('MyApp.view.MyList', {fullscreen: true});
    }

});
4

1 に答える 1

0

1. データ構造

MyApp.model.Dataデータのリストのルートにすぎないため、定義するのに役立つかどうかはわかりません。hasManyしたがって、ロジックを提供できます。

2. データ表現

Ext.dataview.List単純なリストのみを表示するように設計されています。ネストされたリストの場合は、拡張を検討してExt.dataview.NestedListください。(ただし、1.が true の場合は必要ありません)。

3. データアクセス

表示する必要があるデータに直接アクセスするにはrootProperty: 'data'、プロキシのリーダー構成オブジェクトに追加するだけです。

proxy: {
    type: "jsonp",
    url: 'http://server.ext/path/to/MyApp/app/data/sample.ashx',
    reader: {
        type: "json",
        rootProperty: 'data'
    }
}
于 2013-05-07T08:35:10.657 に答える