PDA

View Full Version : show tree panel leaf depends on status



y0uzha
4 May 2015, 1:43 AM
i have a tree panel like this


var store = Ext.create('Ext.data.TreeStore', { root: {
expanded: true,
children: [{
text: "tree list",
expanded: true
, children: [{
text: "list1"
, leaf: true,
status:"active"
}, {
text: "list2"
, leaf: true,
status:"active"
}, {
text: "list3"
, leaf: true,
status:"active"
}, {
text: "list4"
, leaf: true,
status:"inactive"
}, {
text: "list5"
, leaf: true,
status:"inactive"
}]
}]
}
});


Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});


now, i want to filter the store. how if i just want to show the tree panel which have status "active" .?? so when the status is "inactive", the leaf doesn't showed.

this is my fiddle example:
http://jsfiddle.net/y0uzha/9wxro3us/2/

y0uzha
4 May 2015, 6:25 PM
i'm sorry sir, i still confuse with this. can you explain about your suggestion by using iconCls to hide the tree leaf.?? i've no idea with it. thx before :)

f.baron
5 May 2015, 1:39 AM
Try with these modifications, i added a refresh function to apply the right cls to each leaf based on status.

https://jsfiddle.net/9wxro3us/4/

yeghikyan
5 May 2015, 1:40 AM
Ext.application({
name: 'Fiddle',


launch: function() {
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "tree list",
expanded: true,
children: [{
text: "list1",
leaf: true,
status: "active"
}, {
text: "list2",
leaf: true,
status: "active"
}, {
text: "list3",
leaf: true,
status: "active"
}, {
text: "list4",
leaf: true,
status: "inactive"
}, {
text: "list5",
leaf: true,
status: "inactive"
}]
}]
},
filters: [
function(item) {
var status = item.get('status'),
show = true;
if(status) {
show = ["active"].indexOf(status) > -1;
}
return show;
}
]


});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
}
});

y0uzha
5 May 2015, 4:31 AM
hi i've try your code but the inactive status is still appear. but i've found another solution for my case. i was try to use this function and it was worked :)



tree.getRootNode().cascadeBy(function(node){
if(node.data.leaf){
if(node.raw.status =="inactive"){
var uiNode = tree.getView().getNode(node);
Ext.get(uiNode).setDisplayed('none');
}
}
});

yeghikyan
5 May 2015, 4:34 AM
It is a bug in the 4.x version, you can open appropriate ticket and make the framework better. In 5.x it works.