3

私のコードは次のようになりますが、ストア/ツリーにデータがありません。

JSON ストアは有効ですか? rootJSON の上に が必要ですか?

Tree パネルで定義する必要がある列はどれですか?

JSON:

{
   "status" : {
      "status" : 0,
      "msg" : "Ok",
      "protocolversion" : "1.1.json"
   },
   "value" : {
      "name" : "Root",
      "path" : "\/",
      "leaf" : false,
      "children" : [
            {
               "name" : "subfolder1",
               "path" : "\/subfolder1",
               "leaf" : false,
               "children" : []
            },
            {
               "name" : "subfolder2",
               "path" : "\/subfolder2",
               "leaf" : false,
               "children" : []
            },
            {
               "name" : "report1",
               "path" : "\/report1",
               "leaf" : true,
               "children" : []
            }
         ]
   }
}

私の ExtJs コード:

モデル：

// Model for store
     var oModel = Ext.define('TreeModel', {
        extend: 'Ext.data.Model',
        fields: [
           { name: 'name',         type: 'string' },
           { name: 'path',         type: 'string' }
        ]
     });

店：

     // Store with local proxy
     var oStore = Ext.create('Ext.data.TreeStore', {
        model: oModel,
        autoLoad: true,
        proxy: {
           type  : 'ajax',
           url   : './data/response.json'
        },
        reader: {
           type  : 'json',
           root  : 'value'
        }
     });

ツリーパネル:

     // View with TreePanel
     var oTreePanel = Ext.create( 'Ext.tree.Panel', {
        store       : oStore,
        useArrows   : true,
        displayField: 'text',
        rootVisible : true,
        multiSelect : true,
        border      : 0,
        columns     : [
           {
              xtype    : 'treecolumn',
              dataIndex: 'name',
              text     : 'Tree',
              flex     : 3
           },
           {
              dataIndex: 'path',
              text     : 'Path',
              flex     : 2
           }
        ]
     } );
4

2 に答える 2

3

json とリーダーのルートに変更valueする必要があります。children

考え方は次のとおりです。リーダーのルートは、レコード データの開始位置をリーダーに伝えます。しかし、ツリー データはネストされている (ノードは子を持つことができる) ため、ExtJS は各ノード内で別のルートを探します (次に、この後者のノード内で別のルートを、というように再帰的に探します)。

したがって、リーダーのルートを「子」と呼んだ場合、ノードがある場合、ノード内のサブノードが検索されchildrenます。

それを「サブ」または「なんでも」と呼ぶこともできます。階層全体で同じものが使用されていることを確認する必要があるだけで、json データのルートが含まれます。

于 2012-08-09T10:45:49.270 に答える
2

これは、「データ」を子として使用して MVC 構造で機能させることができたツリー パネルの例です。

JSON:

Ext.data.JsonP.callback4({
    "message": "", "data": [
      {
          "descr": "TEST REASON",
          "leaf": false,
          "data": [
            {
                "descr": "TEST REASON",
                "leaf": true,
                "data": null
            }
          ]
      },
      {
          "descr": "Another Type Code",
          "leaf": false,
          "data": []
      },
      {
          "descr": "Quite A Different One I Think",
          "leaf": false,
          "data": [
            {
                "descr": "A Child Of That",
                "leaf": true,
                "data": null
            }
          ]
      }
    ]
})

モデル：

Ext.define('App.model.treePanel', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'descr', type: 'auto' },
        { name: 'leaf', type: 'auto' }
    ],
    proxy: {
        type: 'jsonp',
        url: 'yourURL',
        //extraParams: {
        //},
        headers: { 'Content-type': 'text/json;  charset=utf-8', 'Accepts': 'text/json' },
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        }
    }
});

お店：

Ext.define('App.store.treePanels', {
    extend: 'Ext.data.TreeStore',
    model: 'App.model.treePanel'
});

見る：

Ext.define('App.view.treePanel', {
    extend: 'Ext.tree.Panel',
    xtype:'treePanel',
    title: 'My Items',
    store: 'treePanels',
    rootVisible: false,
    //hideHeaders:true,
    columns: [
        {
            xtype: 'treecolumn',
            dataIndex: 'descr',
            text: 'Current Types and Reasons',
            flex: .5
        }
    ],
    tbar:{
        items: [
            {
                xtype: 'button',
                text: 'Remove Item'
            },
            {
                xtype: 'button',
                text:'Edit Item'
            }
            ]
    }
});

注意:rootVisible:falseが必要でした。

于 2013-08-30T15:24:48.783 に答える