ExtJSのTreeStoreでjson形式のデータを追加する方法
Extのヘルプでは、treeStoreにデータをバインドするには、rootプロパティとcodeの2つの方法が記載されています.
この方式ではTree形式のデータしか追加できませんが、TreeGrid形式のデータを追加するには無理なのでPass.
もう1つはproxyの方法です.この方法には2つの選択肢があります.1つはClient端で、1つはServer端です.今、json形式のデータをバインドします.Client端を選択するには、Client端も3つの方法があります.その中でMemoryProxy方式だけがブラウザとは関係ないので、これを選択します.
Codeは以下の通りである.
ここでみんながこのcodeを持ってテストすれば、きっと合格できません.storeをtreeに入れたからです.panelでは、store形式がTreeStore形式ではないため、これを修正する必要があります.また、dataをproxyに取得する必要があります.TreeStoreにはdata属性がありません.これはExtサンプルコードの問題です.修正後の結果は:
root: { expanded: true, text: "My Root", children: [ { text: "Child 1", leaf: true }, { text: "Child 2", expanded: true, children: [ { text: "GrandChild", leaf: true } ] } ] }
この方式ではTree形式のデータしか追加できませんが、TreeGrid形式のデータを追加するには無理なのでPass.
もう1つはproxyの方法です.この方法には2つの選択肢があります.1つはClient端で、1つはServer端です.今、json形式のデータをバインドします.Client端を選択するには、Client端も3つの方法があります.その中でMemoryProxy方式だけがブラウザとは関係ないので、これを選択します.
Codeは以下の通りである.
//this is the model we will be using in the store Ext.define('User', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'}, {name: 'phone', type: 'string', mapping: 'phoneNumber'} ] }); //this data does not line up to our model fields - the phone field is called phoneNumber var data = { users: [ { id: 1, name: 'Ed Spencer', phoneNumber: '555 1234' }, { id: 2, name: 'Abe Elias', phoneNumber: '666 1234' } ] }; //note how we set the 'root' in the reader to match the data structure above var store = Ext.create('Ext.data.Store', { autoLoad: true, model: 'User', data : data, proxy: { type: 'memory', reader: { type: 'json', root: 'users' } } });
ここでみんながこのcodeを持ってテストすれば、きっと合格できません.storeをtreeに入れたからです.panelでは、store形式がTreeStore形式ではないため、これを修正する必要があります.また、dataをproxyに取得する必要があります.TreeStoreにはdata属性がありません.これはExtサンプルコードの問題です.修正後の結果は:
var store = Ext.create('Ext.data.TreeStore', {
autoLoad: true,
model: 'Case',
proxy: {
type: 'memory',
data: data,
reader: {
type: 'json',
root: 'users'
}
}
});