0

XTemplate を作成して、データビューの各項目の一対多の関係を表示しようとしています。

TransactionType をリスト アイテムのヘッダーとして表示したいのですが、その ActionSummary の ActionList をループして、各アクション アイテム名を表示する必要があります。

しかし、以下のコードは失敗します。

モデル

アクションモデルはこちら

Ext.define('MyMobile.model.ActionModel', {
extend: 'Ext.data.Model',
config: {
    fields: [
        { name: 'Action', type: 'string' },            
        { name: 'Count', type: 'int' },            
        { name: 'Id', type: 'int' },
        { name: 'CurrentStatus', type: 'string' }
    ]
}
});

アクション要約モデル

Ext.define('MyMobile.model.ActionSummaryModel', {
extend: 'Ext.data.Model',
config: {
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'TransactionType', type: 'string' }

    ]
    ,
    hasMany: {
        model: 'MyMobile.model.ActionModel',
        name: 'ActionList'
    }
}
});

店

Ext.define('MyMobile.store.ActionSummaryStore', { extends: 'Ext.data.Store',

config: {
    model: 'MyMobile.model.ActionSummaryModel',

    proxy: {
        type: 'ajax',
        url: 'home/GetActionSummary',
        method: 'GET',
        reader: {
            type: 'json'
        }
    }
}
});

意見

Ext.define('MyMobile.view.ActionListView', {
extend: 'Ext.dataview.List',
xtype: 'actionsummary',
id: 'actionsummaryList',

config: {
    title: 'Actions',

    store: 'ActionSummaryStore',
    emptyText: 'Loading action items...',
    itemTpl: Ext.create('Ext.XTemplate', '<tpl for=".">',
                                            '<div><p class="action-text">{TransactionType}</p>',
                                                  '<tpl for="ActionList"><tpl for=".">',       
                                                        '<p>{Action}</p>',  
                                                         '<span class="action-count">Count:{Count}</span><br>',
                                                         '<span class="action-status">Current Status: {CurrentStatus}</span>',
                                                    '</tpl></tpl>',          
                                             '</div>',
                                           '</tpl>'

                       )
 }
 });

JSON JSON はサーバーからの要約の配列です

[{"Id":1,"TransactionType":"Transaction 1","ActionList":[{"Id":1,"Count":4,"Action":"Action Item 1","CurrentStatus":"Open"},{"Id":2,"Count":14,"Action":"Action Item 3","CurrentStatus":"Open"},{"Id":3,"Count":44,"Action":"Action Item 5","CurrentStatus":"Close"}]}]

ストアの代わりにこの JSON データをハードコーディングすると、機能します。

Ext.define('WorksMobile.view.ActionListView', {
extend: 'Ext.dataview.List',
xtype: 'actionsummary',
id: 'actionsummaryList',

config: {
    title: 'Actions',


    data:[{"Id":1,"TransactionType":"Transaction 1","ActionList":[{"Id":1,"Count":4,"Action":"Action Item 1","CurrentStatus":"Open"},{"Id":2,"Count":14,"Action":"Action Item 3","CurrentStatus":"Open"},{"Id":3,"Count":44,"Action":"Action Item 5","CurrentStatus":"Close"}]}],

    emptyText: 'Loading action items...',
    itemTpl: Ext.create('Ext.XTemplate', '<tpl for=".">',
                                            '<div><p class="action-text">{TransactionType}</p>',
                                                  '<tpl for="ActionList"><tpl for=".">',  
                                                        '<p>{Action}</p>',  
                                                         '<span class="action-count">Count:{Count}</span><br>',
                                                         '<span class="action-status">Current Status: {CurrentStatus}</span>',
                                                    '</tpl></tpl>',          
                                             '</div>',
                                           '</tpl>'

                       )
}
});

上記の XTemplate が JSON ストアで機能しない理由がわかりません。ネストされた項目の詳細ではなく、トランザクション タイプ、平均ヘッダーのみが表示されます。これについて助けてください。

編集：しばらくして、ストアがリレーションシップをロードしていないことに気付きました。各 ActionSummary の下に ActionList が表示されていません。マッピングの問題はありますか?

編集 2 ActionSummaryModel の hasMany マッピングを削除し、フィールド { name: 'ActionList', type: 'auto' } を追加すると、機能しています。しかし、私はhasManyとbelongsToとの関係でそれをやりたいと思っています。あなたの助けに感謝!!

4

1 に答える 1

0

コードを次のように機能させるためのすべての手順をリストします。

まず、ストアを追加autoLoadして、インスタンス化されたときにリモートソースから関連するストアを自動的にロードします

model: 'MyMobile.model.ActionSummaryModel',
autoLoad: true

associationKey次に、関連付けではなく、関連付けを読み取るためにデータ内のプロパティの名前であるを使用する必要がありnameますhasMany。

hasMany: {
    model: 'MyMobile.model.ActionModel',
    associationKey: 'ActionList'
}

最後に、あなたの見解では、以下を変更tplすることによって、あなたにいくつかの変更を加える必要があります。

<tpl for="ActionList">

複数形の関連モデル名に：

<tpl for="actionmodels">

ちなみに、app.jsを機能させるには、対応するすべてのビュー、ストア、モデルを含めることを忘れないでください。それが役に立てば幸い ：）

于 2012-10-18T15:23:20.220 に答える