{ "Products": [{ "ProductID":1, "ProductName":"NameX", "SubProducts": [{ "SubProductName":"SubNameX1", "SubProductInfo":"SubNameX1Information" } ... ] } .... ] }
という形式で送られてくるJSONデータを、
いかにNestedList(TreeStore)に格納するか。
という問題。
{ "Products": [{ "ProductID":1, "ProductName":"NameX", "Products": [{ "ProductName":"SubNameX1", "ProductInfo":"SubNameX1Information" } ... ] } .... ] }
という風に項目名が枝葉で統一されていれば、問題ないのですが。。
たぶん、
JSON読み込み → ストアに格納 → NestedListに反映
みたいになってると思うのですが、これを、
JSON読み込み → コンバート(項目名統一) → ストアに格納 → NestedListに反映
という風に拡張することで解決しました。
ソース
Ext.setup({ onReady : function() { Ext.regModel('Product', { fields: [ {name: 'ProductID', type: 'integer'}, {name: 'ProductName', type: 'string'}, {name: 'SubProductName', type: 'string'}, {name: 'SubProducts'}, {name: 'Products'}, ] }); function convertNodeTree(node) { var result = []; for(var i=0; i<node.length; i++) { var childNode = node[i]; if(childNode["SubProducts"] === undefined) { var addingNode = convertNode(childNode); addingNode["leaf"] = true; result.push(addingNode); } else { var addingNode = convertNode(childNode); addingNode.Products = convertNodeTree(childNode["SubProducts"]); result.push(addingNode); } } return result; } function convertNode(node) { var convertedNode = {}; convertedNode.ProductID = node.ProductID || node.SubProductID; convertedNode.ProductName = node.ProductName || node.SubProductName; return convertedNode; } // カスタムツリーリーダーの定義 var MyTreeReader = Ext.extend(Ext.data.TreeReader, { extractData : function(root, returnRecords) { // convert node. var convertedRoot = convertNodeTree(root); var records = Ext.data.TreeReader.superclass.extractData.call(this, convertedRoot, returnRecords), ln = records.length, i = 0, record; if (returnRecords) { for (; i < ln; i++) { record = records[i]; record.doPreload = !!this.getRoot(record.raw); } } return records; } }); Ext.data.ReaderMgr.registerType('mytree', MyTreeReader); var store = new Ext.data.TreeStore({ model: 'Product', proxy: { type: 'ajax', url: '/TreeStore-with-other-fieldnames/index.json', reader: { type: 'mytree', root: 'Products' } } }); var nestedList = new Ext.NestedList({ fullscreen: true, title: 'NestedList', displayField: 'ProductName', store: store }); } });
JSONデータ
{ "Products": [{ "ProductID":1, "ProductName":"NameX", "SubProducts": [{ "SubProductName":"SubNameX1", "SubProductInfo":"SubNameX1Information" },{ "SubProductName":"SubNameX1-2", "SubProductInfo":"SubNameX2Information" }] },{ "ProductID":2, "ProductName":"NameX2", "SubProducts": [{ "SubProductName":"SubNameX2", "SubProductInfo":"SubNameX1Information" },{ "SubProductName":"SubNameX2-2", "SubProductInfo":"SubNameX2Information" }] }] }
なんかもっとうまいやり方があるのだろうなあ。
と思ったので、怖くてReply出来ず。。