プログラマとプロマネのあいだ

プログラマもやるし、プロマネもやるし、たまに似非アーキとか営業っぽいこともやる

フォーラム > Sencha Touch Forums > Sencha Touch: Help & Discussion > TreeStore with other fieldnamesに対する回答案

{ 
  "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出来ず。。