ExtJS 4.2 Binding Tree Panel/TreeStore to client side dynamic JS object array

StackOverflow https://stackoverflow.com/questions/19055856

  •  29-06-2022
  •  | 
  •  

Question

I'm building a simple JS object array client side based on user selections and do not want to query the back end. So I have an object such as:

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

I want to load this object into an Ext.tree.Panel/Ext.data.TreeStore. I'm in MVC in 4.2.1 and have an Ext.tree.Panel defined. It is included in a containing view.

I've managed to get it working to the point where the data is there, the tree elements exist in the output HTML, but everything is invisible. Not hidden according to the CSS. I can't see why it isn't showing up. Here is a complete working example (minus the MVC, but working the same way). Any ideas on how to load manufactured data in memory into a tree store/panel?

<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>
Was it helpful?

Solution

That's your layout option that is destroying it. Don't set layout on a tree panel.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top