PDA

View Full Version : Tree inside a ExtJS 4 combobox



harman
22 Feb 2012, 2:26 AM
Hi All,

I need to implement a Tree type structure inside a ExtJS 4 combobox.
There should be a dropdown that containes tree structure.
Can it be done?
If Yes then what type of data structure do i need to use to populate it?

Thanks in advance

mitchellsimoens
22 Feb 2012, 6:04 AM
You would need to override the createPicker method on the combobox but it is doable.

harman
23 Feb 2012, 6:01 AM
If i am not bothering. Can you explain a little.
Or may be a sample code??
I also wanted to know that do i need to send values for leaf and children in Json to populate the Tree??

skirtle
23 Feb 2012, 6:44 AM
Try this as a starting point:


Ext.create('Ext.form.field.Picker', {
renderTo: Ext.getBody(),

createPicker: function() {
return Ext.create('Ext.tree.Panel', {
hidden: true,
floating: true,
minHeight: 300,
root: {
expanded: true,
text: 'Root',
children: [
{text: 'Child 1', children: []},
{text: 'Child 2', children: []},
{text: 'Child 3', children: []}
]
}
});
}
});

harman
23 Feb 2012, 7:47 AM
Thanks for such a quick reply man.

For start that is a realy good code. I will try building on.
And thats really a crafty work. Good to know that ExtJS is that customizable.

Now two of the checkpoints ahead would be finding solution to these-
1. I am unable to pick the selected value to show into the combo.
2. How do i load that Tree with a store that gets populated with JSON data.

skirtle
23 Feb 2012, 5:31 PM
1. I am unable to pick the selected value to show into the combo.

You'll need to wire up suitable listeners on the tree.


2. How do i load that Tree with a store that gets populated with JSON data.

Really this is a separate question and deserves its own thread. Loading a tree's data remotely looks a bit like this:


var treeStore = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'data/tree.json'
},
root: {
text: 'Root'
}
});

Ext.create('Ext.tree.TreePanel', {
store: treeStore,
...
});

harman
24 Feb 2012, 4:42 AM
Added listener to the tree to set the value of the picker.


listeners:{
select: function(thisTree, record, index, obj ){
Ext.getCmp('pickerId').setValue(record.data.text);
Ext.getCmp('pickerId').collapse();
}
}

Bound to use Ext.getCmp() since unable to reach to the parent.

Need to go through the documentation to know how to populate the store for tree.

harman
29 Feb 2012, 6:20 AM
Hi Skirtle,

I just hit a roadblock.
Do you have an Idea how to get to the picker's object from inside tree panel's select Listener?
OR
Alternatively how do i get the Id of the picker?
Actualy i dont want to give any hardcode id to the picker.
I tried findParentBy()and findParentByType().

Thanks

skirtle
29 Feb 2012, 6:42 AM
Take a look at the createPicker method for combobox. Translating the technique it uses across to your use case looks like this:


Ext.create('Ext.form.field.Picker', {
...

createPicker: function() {
return Ext.create('Ext.tree.Panel', {
pickerField: this,
...
});
}
});

You can then access this.pickerField from within the tree's listeners.

harman
29 Feb 2012, 6:46 AM
Hi All,

Found way to populate the tree store using Json.
The store of the tree just need to have folderSort as true and it will automatically populate with the leaf structure.

check the following
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/tree/treegrid.html

Thanks

harman
11 Jul 2012, 11:29 PM
HI All,

This is just to inform the needful that this component has been added to the ExtJS 4.1 API as a readymade component (Ext.ux.TreePicker). So rather than doing the inner coding as i did you can directly use it from there.
In case some one else like me is using versions lower than 4.1 will have to do it like i did.
I have tested this with 4.0.7 it works fine.

Thanks

MikeFeher
14 Jul 2014, 10:32 AM
This works for me and should be good to go.

return Ext.create('Ext.tree.Panel', {
store: 'MyStore',
hidden: true,
floating: true,
minHeight: 300,
width: this.getWidth(),
pickerField: this,
listeners:{
select: function(thisTree, record, index, obj ){

this.pickerField.setValue(record.data.id);
this.pickerField.collapse();
}
}

});

Gzss
12 Mar 2015, 2:57 AM
Hi all, I have a little question: How can I set autoHeight for this TreePanel? I've tried a lot of ways , but no one worked.