配置TreePanel和TreeStore

我無法配置TreePanel以顯示來自REST API的JSON結果。配置TreePanel和TreeStore

的JSON格式是這樣的：

[ 
    { 
     "guid": "{00000000-0000-0000-0000-000000000001}", 
     "name": "hhhh", 
     "vendor": "1", 
     "model": "1", 
     "address": "hhhh", 
     "port": 8080, 
     "redirect": false, 
     "optimizeBandwidth": true, 
     "reverseConnection": false, 
     "timeOutEnabled": false, 
     "timeOutInterval": 60, 
     "enabledCameras": 1, 
     "contactIdCode": "0001j", 
     "contactIdPartition": "00j", 
     "user": "jgjh", 
     "password": "ghghgh", 
     "enabled": true, 
     "connected": false 
    } 
]

根節點的名稱必須是Servers，和它的子節點應該是這樣的JSON列表，該節點作爲name屬性的名稱。其他屬性可以忽略，這些孩子在任何情況下都沒有孩子。

我只能在TreePanel中顯示一個沒有名字的根節點，它的子節點也沒有名字，這個數字與JSON中對象的數目相匹配。他們都有孩子，這些孩子也與JSON中的對象數量相匹配，沒有名字，這些名字也有孩子以相同的方式無限延伸。

The TreePanel so far

我無法找到的屬性我應該設置使TreePanel中工作，因爲我期望的那樣。我無法更改JSON，因爲它是由REST API定義的。

這裏的TreePanel中代碼：

.... 
{ 
    xtype: 'treepanel', 
    title: 'Selecione o servidor', 
    flex: 1, 

    margin: 5, 

    store: Ext.create('Project.store.TreeServidor'), 
}, 
....

下面是該TreeStore代碼：

Ext.define('Project.store.TreeServidor', { 
    extend: 'Ext.data.TreeStore', 
    model: 'Project.model.Servidor', 
    requires: 'project.model.Servidor', 


    root: { 
      expanded: true, 
      text: 'Servidores', 
      draggable: false, 
      id: 'guid', 
      root: 'name' 
     }, 
});

最後的型號：

Ext.define('Project.model.Servidor', { 
    extend: 'Ext.data.Model', 

    fields: [ 
     ... too much big 
    ], 

    proxy: { 
     type: 'rest', 
     url: 'http://localhost:8000/servers/', 
     noCache: false, 

     writer: { 
      type: 'json', 
      writeAllFields: true, 
      root: 'servers', 
      encode: true, 
      allowSingle: true 
     }, 

     reader: { 
      type: 'json', 
      root: 'servers' 
     } 
    } 
});

來源

2014-06-12 Bruno Finger

「這孩子節點應該是這樣的JSON列表，與節點的名稱屬性的名稱」，這意味着每個節點都有不同名稱？？ – sakir

是的，這應該是包含存儲在後端REST API的數據庫中的服務器的列表。它應該與[此示例]非常相似（http://dev.sencha.com/deploy/ext-4.0.1/examples/tree/reorder.html），但該樹只有一個級別。 –

我能找到的一個解決方案是，首先從遠程URL獲取json，然後修改它並綁定商店。你只需要名稱字段？ – sakir

你的迴應從服務器

回頭

var response=[ 
     { 
      "guid": "{00000000-0000-0000-0000-000000000001}", 
      "name": "hhhh", 
      "vendor": "1" 

     }, 
      { 
      "guid": "{00000000-0000-0000-0000-000000000002}", 
      "name": "hhhh", 
      "vendor": "2" 

     } 
    ];

定義擴展Ext.data.reader.Json

Ext.define('Ext.data.reader.JsonWithoutRoot', { 
    extend: 'Ext.data.reader.Json', 
    read: function(response) { 
     return this.callParent([ { root: response } ]); 
    }, 
    root: 'servers' 
});

模型

Ext.define('Project.model.Servidor', { 
     extend: 'Ext.data.Model', 

     fields: [ 
      ... too much big 
     ], 

     proxy: { 
      type: 'rest', 
      url: 'http://localhost:8000/servers/', 
      noCache: false, 

      writer: { 
       type: 'json', 
       writeAllFields: true, 
       root: 'servers', 
       encode: true, 
       allowSingle: true 
      }, 

      reader: Ext.create('Ext.data.reader.JsonWithoutRoot', {}) 
     } 
    });

以這種方式，您可以添加根元素（在你的情況下服務器）的新功能，以響應和傳遞這些值treeview。

，或者你可以創建一個新的JSON元素，並修改它，並綁定數據

來源

2014-06-13 14:05:27 sakir

配置TreePanel和TreeStore

回答

相關問題