PDA

View Full Version : Tree under combobox with search functionality



sudiplovesyou
17 Jan 2011, 11:50 PM
Hi all,

I have found lots of discussion on tree under combobox in this forum. Now I am trying to build the same with search functionality. I get it all right but just a little problem I have stuck on. When I expand a node of the tree it works fine but when I try to collapse it I found a White empty area under the collapsed node. Please help me to get it right. Following is my code snippet.


Xenos.form.ComboTree = Ext.extend(Ext.form.ComboBox, {
randomID: 'Xenos.form.ComboTree-' + new Date().getTime(),
initList: function() {
var loader = new Ext.tree.TreeLoader({
dataUrl: this.dataUrl,
combo: this
});
loader.on('load', function(treeLoader, node) {
var query = this.combo.getValue();
this.combo.search(query);
//searchTree('blah');
});
this.list = new Ext.tree.TreePanel({
root: {nodeType: 'async'},
rootVisible: false,
shadow: false,
useArrows: true,
floating: true,
autoHeight: true,
loader: loader,
matchedNodes: [],
zindex: 1,
listeners: {
click: this.onNodeClick,
scope: this
},
getZIndex : function(){
return this.zindex;
},
setZIndex : function(zindex){
this.zindex = zindex;
},
alignTo: function(el, pos) {
this.setPagePosition(this.el.getAlignToXY(el, pos));
}
});
},
initComponent:function() {
var config = {
enableKeyEvents: true,
shadow: false,
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
tpl: '<div style="height:100px; border-style: solid;"><div id=\"'+ this.randomID +'\"></div></div>',
listeners: {
expand: function(){
//this.searchTree('blah');
}
}
/*listeners: {
keyup: function(field, event){
//this.searchTree(field.getValue());
}
}*/
}
Ext.apply(this, Ext.apply(this.initialConfig, config));

Xenos.form.ComboTree.superclass.initComponent.apply(this, arguments);
},
expand: function() {
//console.log('new expand');
var treeDiv = Ext.DomHelper.append(document.body, [{id : this.randomID}]);
if (!this.list.rendered) {
this.list.render(treeDiv);
this.list.setWidth(this.el.getWidth());
this.list.setHeight(this.el.getHeight());
this.innerList = this.list.body;
this.list.hide();
}
//searchTree();
this.el.focus();
Xenos.form.ComboTree.superclass.expand.apply(this, arguments);
},
//on: function('expand', function(this){}){},

doQuery: function(query, forceAll) {
this.expand();
if(this.list.getRootNode().loaded)
this.search(query);
},

collapseIf : function(e){
if(!e.within(this.wrap) && !e.within(this.list.el)){
this.collapse();
}
},

onNodeClick: function(node, e) {
this.setRawValue(node.attributes.text);
if (this.hiddenField) {
this.hiddenField.value = node.id;
}
this.collapse();
},
search: function(searchText){
//console.log('to search %s', searchText);
var rootNode = this.list.getRootNode();
//drillDownTreeSearch(rootNode, searchText);
rootNode.eachChild(function(child){
var nodeText = child.text;
//console.log('node data' + nodeText);
if( searchText == nodeText ||
searchText == nodeText.split(":")[0] ||
searchText == nodeText.split(":")[1]){
//console.log('match');
child.select();
//this.expand();
//this.comboTree.getRootNode().expand(false);
//this.comboTree.focus();
}
}, this);
//this.getSelectionModel().getSelectedNode().unselect();
},
drillDownTreeSearch: function(node, searchText){
if(node.leaf == true){

}
}
});
Ext.reg('xenostreecombo', Xenos.form.ComboTree);

Any kind of help will be appriciated.

Regards
Sudip

Condor
18 Jan 2011, 12:17 AM
Why not use the Ext.ux.TreeSelector that comes with the Ext Air pack (http://www.sencha.com/products/js/thank-you.php?dl=air330&ref=related)?

sudiplovesyou
18 Jan 2011, 3:43 AM
hi,

I got your point and ya i havnt tried TreeSelector yet but I am confused about what I am doing wrong in here or anything is missing. I just need tht missing link.