11

私はextjs 4をテストしていますが、何かに遭遇しました.私は理解できないようです.

私は単純なオブジェクトの関連付けを持っています:スナップショット - hasMany -> モデル

現在、XTemplate を使用して View コンポーネントでこの関連付けを表示しようとしているので、XTemplate は次のようになります。

Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="snapshot" id="{id}">',
'<h1>{snapshot}</h1>',
'<p><span class="label">Created: </span>{dateString}</p>',
'<p><span class="label">Models</span></p>',
'<tpl for="models">',
'<p>{name}  - {description}</p>',
'</tpl>',
'</div>',
'</tpl>',
'<div class="x-clear bottompad"></div>'
);

そして、私の JSON 応答は次のようになります (「スナップショット」ノードのみを表示):

    {
        "id": 1,
        "snapshot": "Snapshot 1",
        "created": 1305806847000,
        "models": [
            {
                "id": 1,
                "name": "ABC",
                "description": "A B C"
            }, {

                "id": 111,
                "name": "ABCDD",
                "description": "A B C XCXC"
            }
        ]
    }

extjs 4 でモデルの概念が導入されたため、スナップショットとモデルのモデルを作成し、API ドキュメントに従って関連付けを作成しました。

スナップショット モデル:

Ext.define('Snapshot', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        'snapshot',
        {name: 'created',type: 'date', dateFormat: 'time' }

    ],
    associations:[
      {type: 'hasMany', model: 'Model', name: 'models'}  
    ],
    idProperty: 'id'
});

モデル モデル ;P

Ext.define('Model', {
    extend: 'Ext.data.Model',
    belongsTo: 'Snapshot',
    fields: [
        { name: 'id',  type: 'int' },
        { name: 'snapshot_id', type: 'int' },            
        'name',
        'description'
    ],
    idProperty: 'id'
});

ここに問題があります。このセットアップを使用すると、XTemplate の実行時にモデルが表示されませんが、スナップショット モデルから関連付けを削除し、「モデル」という別のフィールドを追加するだけで問題なく動作します。

関連付けを使用しているときにモデルのリストを正しく表示するためのベスト プラクティスは何ですか? これを行うには、ネストされたテンプレートとカスタム関数を使用する必要がありますか?

4

6 に答える 6

7

良い質問 (+1)

XTemplate はオブジェクトの配列を想定しているため、XTemplate で関連付けを直接使用することはできません (現在)。(関連付けがある場合、これは当てはまりません)

3 つのオプションがあります -

  1. あなたが言ったような協会を取り除きます。（「聞こえ」は良くありませんが、動作します）
  2. テンプレートを使用したデータ ビューがある場合は、Ext.view.AbstractView.prepareDataをオーバーライドし、モデルからオブジェクトの配列を作成します。
  3. apply を呼び出す前に、snapshotStore.getRange() を反復処理し、"models" 属性を持つオブジェクトを (再) 生成し、この配列を.apply
于 2011-06-24T17:06:31.837 に答える
3

getData()4.1 の時点で、モデル レコードには というメソッドがあり、これを呼び出すとgetData( true )、関連するデータも返されることを指摘しておく必要があります。

于 2013-02-20T13:42:26.057 に答える
2

テンプレートがこのように見えることが理想的であることに完全に同意します。ただし、実際には、関連付けを使用して必要なことを行うテンプレートを取得するのは非常に簡単です。モデルは、データと呼ばれるプロパティ内にすべてのフィールドを保持し、ルート レベルで関連付け: associationName+'Store' という規則に従います。したがって、テンプレートを次のように記述するだけで済みます。

var template = Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '<div class="snapshot" id="{data.id}">',
            '<h1>{data.snapshot}</h1>',
            '<p><span class="label">Created: </span>{data.created}</p>',
            '<p><span class="label">Models</span></p>',
            '<tpl for="modelsStore">',
                '<p>{data.name}  - {data.description}</p>',
            '</tpl>',
        '</div>',
    '</tpl>',
    '<div class="x-clear bottompad"></div>'
);
于 2013-03-07T20:51:10.303 に答える
0

store.load イベントをリッスンし、関連付けられたデータを store レコードに戻すと、テンプレートが機能します (RowExpander の rowBodyTpl を使用して実行しました)。

listeners: {
    load: function(store,storeRecs) {
        var i,r;
        for (i=0;i<storeRecs.length;i++) {
            r = storeRecs[i];
            r.data.subItem = r.getAssociatedData().subItem;
        }
    }
}
于 2011-07-15T14:19:08.467 に答える
-1

私の最近の経験から、あなたが店で働いていなくても問題はないはずです。ExtJS 4ドキュメントのXTemplateの例は、（少なくとも私にとっては）問題なく機能します。これらのデータのモデルを追加すると、例が機能します。

私は店を通して同じことをしようとしました。store.first（）。dataをoverwrite（...）XTemplateメソッドに渡すと、関連付けはその構造に含まれません。次のコードをチェックインできます。

var data = {
    name : 'Tommy Maintz',
    title : 'Lead Developer',
    company : 'Sencha Inc.',
    email : 'tommy@sencha.com',
    address : '5 Cups Drive',
    city : 'Palo Alto',
    state : 'CA',
    zip : '44102',
    drinks : ['Coffee', 'Soda', 'Water'],
    kids : [{
                name : 'Joshua',
                age : 3
            }, {
                name : 'Matthew',
                age : 2
            }, {
                name : 'Solomon',
                age : 0
            }]
};



var kidsModelProps = {
    extend: "Ext.data.Model",
    fields: [
        "name",
        {name: "age", type: "int"}
    ]
}
Ext.define ("KidsModel", kidsModelProps)

var datamodelProps = {
    extend: "Ext.data.Model",
    fields: [
        "name", "title", "company", "email", "address",
        "city", "state", "zip", "drinks"
    ],

    hasMany: {name: "thekids", model: "KidsModel"},

    proxy: {
        type: "memory",
        reader: {
            type: "json"
        }
    }
}
Ext.define ("DataModel", datamodelProps)


var kidsStore = new Ext.data.Store({
    data: data,
    storeId: "kidsStore",
    model: "DataModel"

})

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Title: {title}</p>',
    '<p>Company: {company}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',     // interrogate the kids property within the data
        '<p>{name}</p>',
    '</tpl></p>'
);

Ext.onReady(function () {
    var thePanel = Ext.create ("Ext.panel.Panel", {
        html: "<b>Viewport tpl-test: build with separated files</b>",
        border: 10,
        height: 500,
        layout: {
            type: 'vbox',
            align: 'center'
        },
        renderTo: Ext.getBody(),
        bodyStyle: "background-color: yellow",

        items: []

    })
    var someData = kidsStore.first().data
    tpl.overwrite (thePanel.body, someData)
}

http://www.sencha.com/forum/showthread.php?127320-FIXED-EXTJSIV-242-multiple-HasMany-association-conflict-で（XTemplate-Store-Associationsがどのように機能するかを確認するために）試すこともできます。 in-XTemplate。

解決策を提供しないことをお詫びします:(

ウィリー

于 2011-08-11T16:16:38.513 に答える