PDA

View Full Version : TreeFilter with local JSON data



aleksa
3 Sep 2010, 7:12 AM
Hi all,

I have a code like this:



Ext.onReady(function() {

var treeData = [
{id: 1, text: "alpha", leaf: true},
{id: 2, text: "beta", leaf: true},
{id: 3, text: "gamma", leaf: true},
{id: 4, text: "delta", leaf: true},
{id: 5, text: "epsylon", leaf: true},
{id: 6, text: "zeta", leaf: true},
{id: 7, text: "eta", leaf: true},
{id: 8, text: "teta", leaf: true},
{id: 9, text: "jotta", leaf: true},
{id: 10, text: "kappa", leaf: true}
];

var win = new Ext.Window({
title: "A Window",
id: "mywindow",
renderTo: Ext.getBody(),
closeAction: "hide",
width: 400,
height: 400,
padding: 5,
items: [{
xtype: "toolbar",
region: "north",
id: "mytoolbar",
autoHeight: true,
items: [{
xtype: "tbspacer"
}, {
xtype: "textfield",
id: "mysearch",
hideLabel: true,
vtype: "alpha",
}, " ", {
xtype: "tbbutton",
id: "mybutton",
text: "Button"
}]
}, {
xtype: "treepanel",
region: "center",
id: "mytree",
autoHeight: true,
split: false,
animate: false,
useArrows: false,
autoScroll: true,
lines: false,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: treeData
}),
rootVisible: false
}]
});

win.show();

});


is it possible to create TreeFilter with "static" JSON data? What I'd like to do is simply to return tree elements depending to textfield value. It's manageable with AJAX request, but right here, I don't need that. I only want to store the data locally, and retrieve only the entries that match the given criteria.

TreeFilter-stuff is intentionally omitted, I reckon that I should enable key events and define keydown listener in the textfield config, but how to retrieve the data in treepanel without AJAX/HTTP POST requests, i.e. locally?

Condor
6 Sep 2010, 3:25 AM
1. With local data you should use a TreeNode instead of a AsyncTreeNode.
2. You might want to configure your TreeLoader with preloadChildren:true.