Took me a while to get this working in ext 2.2. Apparently the valueNotFoundText is set only if the valueField is set as well.
The first example will then become:
HTML Code:var comboxWithTree = new Ext.form.ComboBox({ store:new Ext.data.SimpleStore({fields:[],data:[[]]}), editable:false, shadow:false, mode: 'local', triggerAction:'all', maxHeight: 200, tpl: '<tpl for="."><div style="height:200px"><div id="tree1"></div></div></tpl>', selectedClass:'', onSelect:Ext.emptyFn, valueField: 'id' }); var tree1 = new Ext.tree.TreePanel({ loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}), border:false, root:new Ext.tree.AsyncTreeNode({text: 'treeRoot',id:'0'}) }); tree1.on('click',function(node){ comboxWithTree.valueNotFoundText = node.text; comboxWithTree.setValue(node.id); comboxWithTree.collapse(); }); comboxWithTree.on('expand',function(){ tree1.render('tree1'); }); comboxWithTree.render('comboxWithTree');
There is no code in first post. Only two images.
Thanks in advance,
I wrapped the whole thing together into a custom class:
PHP Code:
Ext.ns("Netwatch24");
Netwatch24.TreeComboBox = Ext.extend(Ext.form.ComboBox, {
tree: null,
treeId: 0,
initComponent: function(){
this.treeId = Ext.id();
this.focusLinkId = Ext.id();
Ext.apply(this, {
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
editable:false,
shadow:false,
mode: 'local',
triggerAction:'all',
maxHeight: 200,
tpl: '<tpl for="."><div style="height:200px"><div id="'+this.treeId+'"></div><a href="#" class="x-grid3-focus" id="'+this.focusLinkId+'" tabIndex="-1"/></div></tpl>',
selectedClass:'',
onSelect:Ext.emptyFn,
valueField: 'id'
});
var treeConfig = {
border:false
};
Ext.apply(treeConfig, this.treeConfig);
if (!treeConfig.root) {
treeConfig.root = new Ext.tree.AsyncTreeNode({text: 'treeRoot',id:'0'});
}
this.tree = new Ext.tree.TreePanel(treeConfig);
this.on('expand', this.onExpand);
this.tree.on('click', this.onClick, this);
Netwatch24.TreeComboBox.superclass.initComponent.call(this);
},
onTriggerClick : function(){
if(this.disabled){
return;
}
if(this.isExpanded()){
this.collapse();
}else {
this.onFocus({});
if(this.triggerAction == 'all') {
this.doQuery(this.allQuery, true);
} else {
this.doQuery(this.getRawValue());
}
}
},
onFocus : function () {
Netwatch24.TreeComboBox.superclass.onFocus.call(this);
Ext.get(this.focusLinkId).focus();
},
onClick: function (node) {
this.valueNotFoundText = node.text;
this.setValue(node.id);
this.collapse();
},
onExpand: function(){
this.tree.render(this.treeId);
this.tree.focus();
}
});
Ext.reg("netwatch24.treecombobox", Netwatch24.TreeComboBox);
Feel free to adjust the namespace to your needs. Maybe someone likes to add some minor detail work (documentation, more generic implementation).
Regards,
Timo
This extension is not supposed to load state of the tree like classic combo when loading data to a form? I'll need this and thinikg about ways how to achieve that. Anyone solved this?
hi everyone
Thanks for this wonderful idea..........it really helped alot....
But I have a small problem ...... when + or arrow on tree is clicked, the combobox collapses
I think it is because of onTriggerClick event of combobox...so is there any way to stop this????????
I just want to suspend/cancel onTriggerClick event of combobox when i expand it and resume/allow when i collapse it....
For reference follow is the code for onTriggerClick event of combobox
<div id="method-Ext.form.ComboBox-onTriggerClick"></div>
/**
* @method onTriggerClick
* @hide
*/
// private
// Implements the default empty TriggerField.onTriggerClick function
onTriggerClick : function(){
if(this.readOnly || this.disabled){
return;
}
if(this.isExpanded()){
this.collapse(); //THIS MAKES COMBOBOX TO COLLAPSE
this.el.focus();
}else {
this.onFocus({});
if(this.triggerAction == 'all') {
this.doQuery(this.allQuery, true);
} else {
this.doQuery(this.getRawValue());
}
this.el.focus();
}
}
Please help me....Thanks
Regards
see thread http://www.sencha.com/forum/showthre...d=1#post527651 for a possible but dirty solution
Thank you for sharing information, I'm so need this information!
Hi,
Really a useful work for all in need.
But can anyone suggest an Equvivalent in ExtJS 4?
I need a combo that on expanding shows a Tree structure.
I would really appreciate the help.
Thanks in advance.