ExtJS 4.2將樹面板/ TreeStore綁定到客戶端動態JS對象數組

我正在基於用戶選擇構建一個簡單的JS對象數組客戶端，並且不想查詢後端。所以我有一個對象，如：ExtJS 4.2將樹面板/ TreeStore綁定到客戶端動態JS對象數組

var data = [{ 
     id : Ext.id(), 
     dataIndex : 'status', 
     text : 'pass', 
     leaf : false 
    }, { 
     id : Ext.id(), 
     dataIndex : 'status', 
     text : 'pass', 
     leaf : false 
    }];

我想這個對象加載到Ext.tree.Panel/Ext.data.TreeStore。我在4.2.1的MVC中定義了一個Ext.tree.Panel。它包含在包含視圖中。

我已經設法讓它工作到數據在那裏，樹元素存在於輸出HTML中，但是一切都看不見。根據CSS不隱藏。我看不出爲什麼它沒有顯示出來。這是一個完整的工作示例（減去MVC，但以相同的方式工作）。關於如何將內存中的製造數據加載到樹存儲/面板的任何想法？

<html> 
<head> 
    <script type="text/javascript" src="./extjs-4.2.1/ext-all-dev.js"></script> 
    <link rel="stylesheet" type="text/css" href="./extjs-4.2.1/resources/css/ext-all.css"> 
<script> 
/* 
* http://www.sencha.com/forum/showthread.php?272679-Load-simple-JS-objects-into-a-TreeStore-and-TreePanel 
*/ 
Ext.onReady(function() { 
    var store = Ext.create('Ext.data.TreeStore', { 
      fields : [{ 
         name : 'dataIndex', 
         type : 'string' 
        }, { 
         /* 
         * The underlying data value as a string. 
         */ 
         name : 'text', 
         type : 'string' 
        }, { 
         /* 
         * The CSS class value if the data is usually rendered as 
         * an icon. 
         */ 
         name : 'iconCls', 
         type : 'string' 
        }, { 
         name : 'leaf', 
         type : 'boolean', 
         defaultValue : false 
        }] 
     }); 

    var tree = Ext.create('Ext.tree.Panel', { 
      alias : 'widget.PivotGridTree', 
      title : 'Values:', 
      rootVisible : false, 
      store : store, 
      layout : { 
       type : 'vbox', 
       align : 'stretch' 
      }, 
      plugins: [{ 
      ptype: 'bufferedrenderer' 
      }], 
     renderTo : Ext.getBody() 
     }); 

    var getData = function() { 
     var data = [{ 
      id : Ext.id(), 
      dataIndex : 'status', 
      text : 'pass', 
      leaf : false 
     }, { 
      id : Ext.id(), 
      dataIndex : 'status', 
      text : 'pass', 
      leaf : false 
     }]; 
     return data; 
    } 

    var root = tree.store.tree.root; 
    root.removeAll(); 
    root.appendChild(getData()); 
}); 
</script> 
</head> 
<body></body> 
</html>

來源

2013-09-27 jkyoutsey

檢查以確保樣式表的路徑是正確的。 – Reimius

那麼，不去除'layout'選項解決你的問題？ – rixo

@rixo是的，那是我的問題。這是一個複製/粘貼/忘記考慮整個事情的錯誤！謝謝！ – jkyoutsey

這就是你的layout選項，正在摧毀它。不要在樹形面板上設置layout。

來源

2013-09-29 16:28:13 rixo

這完全是問題！謝謝！複製/粘貼錯誤！ – jkyoutsey

ExtJS 4.2將樹面板/ TreeStore綁定到客戶端動態JS對象數組

回答

相關問題