PDA

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



naveen.kumar
25 Jul 2012, 4:55 AM
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
25 Jul 2012, 11:34 AM
You can add cls object to your node to display any style you want.

Scott.

scottmartin
25 Jul 2012, 11:43 AM
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
26 Jul 2012, 4:16 AM
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.