Help migrate tree code from 3.4 to 4.1

[bobestjs]

Hi,

Can someone show me what this code would look like in EXTJS 4.1

Thanks



Ext.onReady(function () {
toc = new Ext.tree.TreePanel({
renderTo: 'toc_div',
useArrows: true,
animate: true,
border: false,
rootVisible: true,
width: 300,
height: 300,
enableDD: false,
// listeners: { 'checkchange': updateLayerVisibility },
selModel: new Ext.tree.MultiSelectionModel(),
bodyStyle: 'background-color:#d6d6e0;',
id: 'toc',
root: new Ext.tree.TreeNode(
{ text: 'AOIs and Products List',
draggable: false,
id: 'CMB Online',
expanded: true
})
});

toc.getRootNode().expand();

xxx = toc.getNodeById("CMB Online");
newNode = new Ext.tree.TreeNode({ id: "Product Catalog", text: "Product Catalog", layerId: 5, name: "Product Catalog", layerType: "Group Layer", parentLayerId: -1, parentName: "Root", rootLayerId: 5, rootName: "Product Catalog", inCart: false });
xxx.appendChild(newNode);
xxx = toc.getNodeById("Product Catalog")
xxx.expand();

xxx = toc.getNodeById("Product Catalog");
newNode = new Ext.tree.TreeNode({ id: "CADRG", text: "CADRG", layerId: 83, name: "CADRG", layerType: "Group Layer", parentLayerId: 5, parentName: "Product Catalog", rootLayerId: 5, rootName: "Product Catalog", inCart: false });
xxx.appendChild(newNode);

xxx = toc.getNodeById("CADRG");
newNode = new Ext.tree.TreeNode({ id: "CMB_RPF_MISC_MAPS", text: "CMB_RPF_MISC_MAPS", icon: "Images/TOC/084CMB_RPF_MISC_MAPS.png", checked: false, layerId: 84, name: "CMB_RPF_MISC_MAPS", layerType: "Feature Layer", parentLayerId: 83, parentName: "CADRG", rootLayerId: 5, rootName: "Product Catalog", inCart: false });
xxx.appendChild(newNode);

xxx = toc.getNodeById("CADRG");
newNode = new Ext.tree.TreeNode({ id: "CMB_RPF_MIL_INSTL", text: "CMB_RPF_MIL_INSTL", icon: "Images/TOC/085CMB_RPF_MIL_INSTL.png", checked: false, layerId: 85, name: "CMB_RPF_MIL_INSTL", layerType: "Feature Layer", parentLayerId: 83, parentName: "CADRG", rootLayerId: 5, rootName: "Product Catalog", inCart: false });
xxx.appendChild(newNode);


}); // end function

[scottmartin]

Have you reviewed the API for the tree in 4.1? Are you having problems with something in particular?

Scott.

[bobestjs]

I found out what I needed my main problem is how to hide a node

This is how I did it 3.4


var ui = n.getUI();
ui.hide();

Any ideas?

-Bob

[scottmartin]

See if the following code will work for you:

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            { text: "detention", leaf: true },
            { text: "homework", expanded: true, children: [
                { text: "book report", leaf: true },
                { text: "alegrbra", leaf: true}
            ] },
            { text: "buy lottery tickets", leaf: true }
        ]
    }
});

Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody(),
    tbar: [{
        text: "Hide Selected",
        handler: function(btn) {
            var tree = btn.up("treepanel"),
                view = tree.getView(),
                selectedNode = tree.getSelectionModel().getSelection()[0],
                el = Ext.fly(view.getNodeByRecord(selectedNode));
            
            el.setVisibilityMode(Ext.Element.DISPLAY);
            el.setVisible(false);
        }
    }]
});​

Scott.