ExtJS 4.2 绑定树面板/TreeStore 到客户端动态 JS 对象数组答案

【问题标题】：ExtJS 4.2 Binding Tree Panel/TreeStore to client side dynamic JS object arrayExtJS 4.2 绑定树面板/TreeStore 到客户端动态 JS 对象数组
【发布时间】：2013-10-04 01:14:33
【问题描述】：

我正在根据用户选择构建一个简单的 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>

【问题讨论】：

检查以确保样式表的路径正确。
那么，删除layout 选项不能解决您的问题吗？
@rixo 是的，那是我的问题。这是一个复制/粘贴/忘记考虑整个错误的错误！谢谢！

标签： extjs tree store extjs-mvc

【解决方案1】：

那是您的 layout 选项正在破坏它。不要在树形面板上设置layout。

【讨论】：