View Full Version : Multi-level combobox is possible?

13 Mar 2012, 4:09 AM
Im trying to achieve multi-level (not using tree approach) combobox in Ext Js. So far, I haven't found anything. I want the combobox to look like this - 32682
How can I achieve that? Tried menu in Ext Js to achieve this but could not do it. Any other way? any sample to refer?

13 Mar 2012, 10:43 AM
It's possible.... use mouseover and show components aligning them correctly.

13 Mar 2012, 2:11 PM
Please do not double post. Original thread:


What was the problem with using a menu? If you don't post your code we can't help you fix it.

14 Mar 2012, 12:09 AM
Sorry for double posting. I forgot I had posted it. well, I will post the code I did..

Ext.create('Ext.menu.Menu', {
width: 100,
height: 100,
margin: '0 0 10 0',
floating: false, // usually you want this set to True (default)
renderTo: Ext.getBody(), // usually rendered by it's containing component
items: [{
floating: false,
items: [{
text: 'regular item 1'
text: 'regular item 2'
text: 'regular item 3'

Im new to Ext Js so don't know much about aligning components..

14 Mar 2012, 2:46 AM
You still need to use a picker. Go back to the code I posted in the other thread for putting a tree in a picker and swap the tree for a menu.

What you're trying to do is an advanced usage of the framework. I strongly recommend spending some time learning about menus and other basic components before attempting to do something like this. The code you've posted is almost identical to the demo in the docs, suggesting you haven't really understood it at all.

16 Mar 2012, 11:26 PM
ya, I got the point. I studied the documentation.. N i was able to use menus to achieve multi-level. I wanted that in a combobox but Im happy with menu. Thanks for helping out.

Mariya Baby
14 Jul 2017, 1:37 AM
How to do that? can you give an example?

This is my code.

Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose City',
store: Ext.create('Ext.data.Store', {
fields: ['country', 'city'],
data: [
{"country": "France", "city": "Paris"},
{"country": "France", "city": "Lion"},
{"country": "France", "city": "Marcel"},
{"country": "Germany", "city": "Berlin"},
{"country": "Germany", "city": "Bonn"},
{"country": "Germany", "city": "Heidelberg"},
{"country": "Russia", "city": "St.Petersburg"},
{"country": "Russia", "city": "Moscow"},
{"country": "Russia", "city": "Novgorod"}
queryMode: 'local',
displayField: 'city',
valueField: 'city',
renderTo: Ext.getBody(),
listConfig: {
tpl: Ext.create('Ext.XTemplate',
'<ul><tpl for=".">',
'<tpl if="xindex == 1 || this.getGroupStr(parent[xindex - 2]) != this.getGroupStr(values)">',
'<li class="x-combo-list-group"><b>{[this.getGroupStr(values)]}</b></li>',
'<li role="option" class="x-boundlist-item" style="padding-left: 12px">{city}</li>',
'</tpl>' +
getGroupStr: function (values) {
return values.country

This shows france and it's cities and so on.. what i want is..the cities under france should be hidden and on click of some icon at the end of the select box france, the cities under france should show..should show and hide as and when required.more like toggle. On toggle the list should show up and also hide on click again.