PDA

View Full Version : i got big problem in using TreePanel



Night_Walker
16 Oct 2012, 2:13 AM
well,the TreePanel of extjs is just so convenient,so i choose it to do something,and when i was using it to show a "choose type" window, the problem i can't solve even changed other versions....
here are some shotcut of the problem:
under the version of 3.2.0 or higher(lower than 4.x),the situation seems so bad:
the first time you click the +,it expand and there is so big space between "all-life-long" and "whether out of date" selections
39386

and when i click the -, it pull back and just like the picture below:
39387

when under the ext version of 3.0.2,the situation is rather better than under 3.2.0, the problem just happen when the parent nodes expanded...


and here is my codes:



var grouproot= new Ext.tree.AsyncTreeNode({
children: [{
id: 'level',
text: 'user type',
children: [{
id: 'allLevel',
text: 'all',
leaf: true
}, {
id: 'noSupport',
text: 'no support',
leaf: true
}, {
id: 'month',
text: 'monthly',
leaf: true
}, {
id: 'year',
text: 'per year',
leaf: true
}, {
id: 'always',
text: 'all-life-long',
leaf: true
}]
}, {
id: 'outOfDate',
text: 'whether out of date',
children: [{
id: 'allOutOfDate',
text: 'all',
leaf: true
}, {
id: 'notOutOfDate',
text: 'not yet',
leaf: true
}, {
id: 'alreadyOutOfDate',
text: 'out of date',
leaf: true
}]
}, {
id: 'report',
text: 'chart',
children: [{
id: 'levelReport',
text: 'via user type',
leaf: true
}, {
id: 'outOfDateReport',
text: 'via if out of date',
leaf: true
}]
}]
});

var comboxTree = new Ext.tree.TreePanel({
id:'comboxTree',
rootVisible:false,
lines:true,
autoScroll:true,
root: grouproot,width:246,
height:220,
//loader: new Ext.tree.TreeLoader({dataUrl:"http://localhost:8080/dcim/itsm_inc/list?listName=categoryTree"}),
tbar:[' ',
new Ext.form.TextField({
width:180,
emptyText:'quick search,please type in words',
enableKeyEvents: true,
listeners:{
keyup:function(node, event) {
findByKeyWordFiler(node, event);
},
scope: this
}
})
]
})

//type-choose window
var category_window = new Ext.Window({
width:260,
id:'category_window',
height:285,
title:'choose type',
closeAction:'hide',
items:[comboxTree,
{frame:true,html:"<input type='button' value='&nbsp;confirm&nbsp;' onclick='confirm()' style='margin-left:68px'><input type='button' value='&nbsp;cancel&nbsp;' onclick='cancel()' style='margin-left:10px'>"}
]
})










can somebody help me to solve the problem?? thanks so much!

scottmartin
19 Oct 2012, 7:52 AM
Have you tried this using 3.4?

What is happening in your findByKeyWordFiler function?

Scott

Night_Walker
24 Oct 2012, 6:00 PM
yes,i've tried in v3.4.0 but it still don't work.

Night_Walker
24 Oct 2012, 6:03 PM
Have you tried this using 3.4?

What is happening in your findByKeyWordFiler function?

Scott

the findByKeyWordFiler function is used to controll the tree to display the node after you type some words which the nodes match them.

Night_Walker
24 Oct 2012, 6:15 PM
Have you tried this using 3.4?

What is happening in your findByKeyWordFiler function?

Scott


ok,here is the whole codes:

var grouproot= new Ext.tree.AsyncTreeNode({
text: 'category', iconCls:'cmp',
draggable:false,expanded :false,
id:'13'
});
var comboxTree = new Ext.tree.TreePanel({
id:'comboxTree',animCollapse:false,
rootVisible:false,
autoScroll:true,lines:false,
root: grouproot,width:246,
height:220,
loader: new Ext.tree.TreeLoader({dataUrl:"http://localhost:8080/dcim/itsm_inc/list?listName=categoryTree"}),
tbar:[' ',
new Ext.form.TextField({
width:180,
emptyText:'quick search,please type some words,
enableKeyEvents: true,
listeners:{
keyup:function(node, event) {
findByKeyWordFiler(node, event);
},
scope: this
}
})
]
})

comboxTree.on('click',function(node){
navstr = node.text;
selectCategory = node.id;
if(node.parentNode != null && node.parentNode != ""){
bulidnavfullname(node.parentNode)
Ext.getCmp('category').setValue(navstr);
}else{
node.toggle();
}
},this,{stopEvent: true});
comboxTree.on('expandnode',function(node){},this, {stopEvent: true});


//to show the nodes that match the words you typed
var timeOutId = null;
var treeFilter = new Ext.tree.TreeFilter(comboxTree, {
clearBlank : false,
autoClear : false
});
// save the hidden null nodes
var hiddenPkgs = [];
var findByKeyWordFiler = function(node, event) {
clearTimeout(timeOutId);// clear timeOutId
comboxTree.expandAll();// expand tree nodes
timeOutId = setTimeout(function() {
// to get the words that typed
var text = node.getValue();
var re = new RegExp(Ext.escapeRe(text), 'i');
// show the nodes that hidden before
Ext.each(hiddenPkgs, function(n) {
n.ui.show();
});
hiddenPkgs = [];
if (text != "") {
treeFilter.filterBy(function(n) {
// only filter the leaf,in order to avoid when parents are filtered,the leaf below can't display
return !n.isLeaf() || re.test(n.text);
});
// if this node is not leaf and there is no leafs below,it should be hid
comboxTree.root.cascade(function(n) {
if(n.id!='0'){
if(!n.isLeaf() &&judge(n,re)==false&& !re.test(n.text)){
hiddenPkgs.push(n);
n.ui.hide();
}
}
});
} else {
treeFilter.clear();
return;
}
}, 300);
}
//filter the non-leaf nodes and leaf nodes that don't match the words
var judge =function(n,re){
var str=false;
n.cascade(function(n1){
if(n1.isLeaf()){
if(re.test(n1.text)){ str=true;return; }
} else {
if(re.test(n1.text)){ str=false;return; }
}
});
return str;
};
//tree event
var navstr = null;

function bulidnavfullname(node){
navstr = node.text + "" + navstr;
if(node.parentNode != null && node.parentNode != undefined)
{
bulidnavfullname(node.parentNode);
}
}