How to get child nodes for particular node and change their UI in Extjs4.1

[naveen.kumar]

Please tell me with example, how to change the UI of each child element under particular node in tree panel when we expand an item.Code is given below.Please help me ASAP its urgent for me.and Explain solution in detail

var leftMenu = Ext.create('Ext.tree.Panel',
{
padding : 0,
id : "leftMenuId",
border : false,
flex : 1,
bodyStyle : {background:'#ecf0f2'},
bodyBorder : false,
autoScroll : true,
store : store,
rootVisible : false,
cls : 'leftMenuCls',
useArrows : true,
listeners : {
beforerender : function()
{
this.setHeight(getBrowserHeight());
},
itemexpand : function(node)
{
var treeId = Ext.getCmp("leftMenuId");
node.eachChild(function(n) {
debugger;
treeId.getView().getNode(n);
});
}
},
ui : "edifecs-leftmenu"
});

37465

[scottmartin]

You can add cls object to your node to display any style you want.

Scott.

[scottmartin]

Quick example:




// css
.x-grid-cell.red-level {
background: red;
}

// js
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: false, children: [
{ text: "book report", leaf: true, cls: 'red-level' },
{ text: "alegrbra", leaf: true, cls: 'red-level'}
] },
{ 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()
});​


Scott.

[naveen.kumar]

I don't want to add cls property in children.I want to do this thing on runtime when we expand particular node.and tell me how to get no of children for a particular node in tree panel or tree view.and Please also explain me what is difference between tree panel and tree view.Please explain me these things with example.