PDA

View Full Version : Optgroups(Category Headings) in Combobox



varunjyoti
3 Dec 2011, 5:03 AM
I am trying to have Optgroups in a combo box. The combobox is inside an editor Grid. Here is the code:


editor : {
xtype:'combo',
itemId : 'TagsToApplyDrpDwn',
sortable:true,
store: 'Attributes',
displayField:'attributeName',
valueField: 'attributeId',
typeAhead: false,
multiSelect:true,
editable: false
}

I want to have category headings for the values similar to Optgroups in normal javascript. In the specified store, there is a column, "AtributeType". I want the attributeNames to be categorised with attyributeTypes. Please help me achieve that.

skirtle
3 Dec 2011, 12:19 PM
Here's a very rough example I've knocked together. The markup isn't ideal (should probably be a list of lists) and you'll need to do some CSS work to get it looking nice but it is basically functional.


Ext.create('Ext.panel.Panel', {
height: 300,
renderTo: Ext.getBody(),
width: 300,
items: [{
displayField: 'display',
valueField: 'value',
xtype: 'combo',
listConfig: {
tpl: [
'<ul><tpl for=".">',
'{[xindex === 1 || parent[xindex - 2].group !== values.group ? "<li>" + values.group + "</li>" : ""]}',
'<li role="option" class="x-boundlist-item">{display}</li>',
'</tpl></ul>'
]
},
store: {
fields: ['value', 'display', 'group'],
data: [
{value: 1, display: 'Tim', group: 'Red'},
{value: 2, display: 'Pete', group: 'Red'},
{value: 3, display: 'Roger', group: 'Red'},
{value: 4, display: 'Bob', group: 'Green'},
{value: 5, display: 'Phil', group: 'Green'},
{value: 6, display: 'Liz', group: 'Green'},
{value: 7, display: 'Mary', group: 'Blue'}
]
}
}],
layout: {
align: 'center',
pack: 'center',
type: 'vbox'
}
});

varunjyoti
4 Dec 2011, 9:05 PM
Skirtle,

Thanks for the answer. But it seems to do nothing.

Here is the code which i changed as you suggested.


editor : {
xtype:'combo',
displayField:'attributeName',
valueField: 'attributeId',
listConfig: {
tpl: [
'<ul><tpl for=".">',
'{[xindex === 1 || parent[xindex - 2].attributeTypeName !== values.attributeTypeName ? "<li>" + values.attributeTypeName + "</li>" : ""]}',
'<li role="option" class="x-boundlist-item">{attributeName}</li>',
'</tpl></ul>'
]
},
store: 'Attributes',
multiSelect:true,
}

The combo is just showing the values like it normally does, but it is not showing any optgroups. Let me know if i am doing something wrong

skirtle
4 Dec 2011, 9:27 PM
Please use [CODE] tags when posting code. I've edited your posts to use them.

At a guess, there's a problem with your attributeTypeName field.

Try dropping the exact code I sent you into an HTML file with ExtJS and check whether it works. Don't change it at all. Confirm that what I sent you does work.

Once you've done that, try making small changes to gradually move it closer and closer to your own example. See if that helps you to figure out what's going wrong.

If you still can't figure it out, we'll need to see the config for your store and an example of the data you're loading into it.

varunjyoti
5 Dec 2011, 1:17 AM
Skirtle,

Your example is working fine. I have removed my store now. I am using the same store as in your example. The problem i found is that in my case is the tpl is not showing even static HTML.


editor : {
xtype:'combo',
itemId : 'TagsToApplyDrpDwn',
displayField:'display',
valueField: 'value',
listConfig: {
tpl: [
'<ul><li>helllooo</li></ul>'
]
},
//store: 'Attributes',
store: {
fields: [
{name: 'value', type: 'string'},
{name: 'display', type: 'string'},
{name: 'group', type: 'string'},

],
data: [
{value: 1, display: 'Tim', group: 'Red'},
{value: 2, display: 'Pete', group: 'Red'},
{value: 3, display: 'Roger', group: 'Red'},
{value: 4, display: 'Bob', group: 'Green'},
{value: 5, display: 'Phil', group: 'Green'},
{value: 6, display: 'Liz', group: 'Green'},
{value: 7, display: 'Mary', group: 'Blue'}
]
},

Please note that in "tpl" there is only static HTML. The same code works in your example. So, in my case, the combobox is still showing normal values instead of this static HTML. Also, i dont know form where CODE tags are added so i am posting it like that only.

skirtle
5 Dec 2011, 2:27 AM
To use code tags you just need to wrap your code in
...code goes here.... There's also a # button on the editor toolbar that does the same thing, though I don't think it shows up if you're posting a 'quick reply'.

I've just tried the code you posted as an editor in a grid and the template works fine (though you should clean up the stray commas). I'm not sure what to suggest. Perhaps it's a caching issue? Are you definitely changing the right combobox?

Exactly which ExtJS version are you using and which browsers are you testing against?

varunjyoti
5 Dec 2011, 2:34 AM
I am using EXT JS 4.0. I am testing it in firefox 8.0

skirtle
5 Dec 2011, 2:39 AM
Which ExtJS version exactly?

varunjyoti
5 Dec 2011, 2:44 AM
4.0.1

skirtle
5 Dec 2011, 2:55 AM
4.0.1 is pretty buggy. Can you try against 4.0.7? It isn't immediately obvious why it would matter but it would be good to rule it out.

varunjyoti
5 Dec 2011, 3:47 AM
skirtle,

Thanks very much for the help. It is working now. The problem was with the version. A newer version fixed the problem