[2.x] ComboBox Tree

[galdaka]

It's just a small modification on the initial code posted here... It's not so difficult to figure it out.

Where is the code that is posted here? I dont view initial code, only two photos in first post!!

Greetings,

[maarten]

Just a quick hack on this one...

tree1.on('click',function(node){
comboxWithTree.valueNotFoundText = node.text;
comboxWithTree.setValue(node.id);
comboxWithTree.collapse();
});

So now we can see the selected text and the selected id is submitted to the server.

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:

       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');

[galdaka]

There is no code in first post. Only two images.

Thanks in advance,

[skaue]

There is no code in first post. Only two images.

Thanks in advance,

@galdaka:

Seems to me that this isn't an extension or plugin, just an idea of using the builtin mechanisms in ExtJs. The code is simply the code written in the first post (and not the attached zips containing the images). Get it?

[timo.nuros]

I wrapped the whole thing together into a custom class:

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

[festr]

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?

[shahdollie]

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

[codeworx]

see thread http://www.sencha.com/forum/showthre...d=1#post527651 for a possible but dirty solution

[sencha123456]

Thank you for sharing information, I'm so need this information!

[harman]

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.