extjs 4 XTemplateクラスの関連付け

Question

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

私は単純なオブジェクトの関連性があります。スナップショット - hasManyの - >モデル

さて、私はビューコンポーネントでこの関連付けを表示するためのXTemplateを使用しようとしていますので、私は私の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レスポンスは、この（ちょうど 'スナップショット' ノードを示す）のようになります。ExtJSの4として

{ 
     "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" 
      } 
     ] 
    } 

モデルのコンセプトを引き出す私は、スナップショットとモデルのモデルを作成し、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が実行されているとき、私のモデルのどれもが表示されませんしかし、スナップショットモデルから関連付けを削除し、「モデル」という別のフィールドを追加するだけでOKです。

アソシエーションを使用しているときにモデルのリストを正しく表示するにはどうすればよいですか？ これを行うには、ネストされたテンプレートとカスタム関数を使用する必要がありますか？

Answer 1

良い質問（1）

それはのXTemplateに直接関連付けを使用しているようだのXTemplateは、オブジェクトの配列を想定しているため（今日）はできません。あなたが言及したように

1. が団体を取り除く - あなたは3つのオプションがあり

   （あなたが関連を持っている場合は、これはもはや真実ではありません）。 （「音」良い が、動作しますしません）

2. テンプレートを使用してデータビューを持っている場合は、Ext.view.AbstractView.prepareDataを無効にし、適用を呼び出す前に、あなたのモデル
3. からオブジェクトの配列を作成し、（snapshotStore.getRangeを反復）と（再）は「モデル」属性を持つオブジェクトを生成し、あなたがstore.loadイベントをリッスンし、店に戻っレコードに関連するデータを追加し、テンプレートが動作することができます.apply

Answer 2

に、この配列を渡します（私は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; 
     } 
    } 
} 

Answer 3

非常に最近の経験から、店舗で働いていない場合は問題はありません。 ExtJS 4 docsの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-in-XTemplateで（のXTemplate-ストア協会がどのように働くか悪い見て）試みることができます。 （ウィリー

Answer 4

私は4.1のように、モデルのレコードはgetData(true)を使用して呼び出された場合も、関連するデータを返しますgetData()と呼ばれる方法を、持っていることを指摘しなければならない：解決策を提供しない

申し訳ありません。

Answer 5

テンプレートはこのように見えるのが理想的だと私は全く同意しますが、実際には、関連付けをしたいテンプレートを作成するのはかなり簡単です。大会のルートレベルで：assoc iationName + '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>' 
); 

Answer 6

@Izhakiが@Aaronが言うの変動を行う、その後、テンプレートにデータを渡すために、レコード上のgetData（true）を使用して言うと同じようにデータをループします。テンプレートは、コンテナの一部である場合、例えば：

//... 
tpl: //your tpl 
data: record.getData(true) 
//.... 

このテンプレートスニペットが正常に動作する必要があります：

'<tpl for="models">', 
'<p>{name} - {description}</p>', 
'</tpl>'