PDA

View Full Version : Combobox with disabled items



kgm
30 Jan 2008, 7:49 AM
Hi,

is there an easy way to implement a combo box mixed of enabled and disabled items in ExtJS?
I want to show a hierarchy of categories an underlying items in there, with the category itself always disabled.

Thanks,
kgm

spaque99
29 Feb 2008, 11:23 AM
Anyone has any answer to this question? I was wondering the exact same thing without answers?

Thanks
Seb

para
29 Feb 2008, 11:38 AM
Look at the tpl config option of ComboBox (http://extjs.com/deploy/dev/docs/?class=Ext.form.ComboBox).

Original tpl used in ComboBox


this.tpl = '<tpl for="."><div class="'+cls+'-item">{' + this.displayField + '}</div></tpl>';


Assuming that your displayField: 'display', you can add the data item 'recordCls' to your Store. Each item you want different can be set to something like 'category-header'


this.tpl = '<tpl for="."><div class="x-combo-list-item {recordCls}">{display}</div></tpl>';

and your css would be
.category-header {
color: red; //and other things...
}


This would only change the appearance. You'd have to do a 'beforeselect' listener to make sure that the item being selected is not a category header item.

spaque99
29 Feb 2008, 11:42 AM
Thanks a lot for your quick answer. I was thinking of the template, but was not sure how to accomplish the 'non-selectable' part of it. Did not think of beforeselect. Will definitely try that...

Thanks
Seb

para
29 Feb 2008, 11:43 AM
Ok. I'm still bored so I'll write the listener too:


combo.on('beforeselect', function(combo, record, index) {
if(record.get('recordCls') == 'category-header') {
return false;
}
});

spaque99
3 Mar 2008, 6:45 AM
Thank you very much for your code. Really appreciated. It worked perfectly.

jmj_cando
27 Jan 2010, 8:59 AM
I like to use this code:
I use empty id as a way to suggest that this is category and not need to be selected.

{
xtype: "combo",
valueField: 'myId',
displayField: 'myText',
width: 75,
mode: 'local',
autoHeight: true,
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
listeners:
{
beforeselect: function(combo, record, index)
{
return ("" != record.data.myId);
}
},

store:
{
xtype: "arraystore",
fields: ['myId', 'myText'],
data:
[
["", "Region"],
["1", "US"],
["2", "Canada"],
["3", "India"],

["", "Product"],
["1", "Toys"],
["2", "Food"]

]

}
}

vitalz
23 Jan 2013, 1:19 AM
Hi,

is there an easy way to implement a combo box mixed of enabled and disabled items in ExtJS?


This is the way I got what I wanted from it. B)

Let's define graying out style in CSS.


/* grayed out combobox item */
.x-combo-grayed-out-item {
color: lightgray;
background-color: whitesmoke;
font-style: italic;
}


Let's define your graying out style as field who belongs to Ext JS model.

Ext.define("MyApp.model.Season", {
extend: "Ext.data.Model",
fields: ["id", "name", "grayedOutComboItem"]
});


Ext JS store now uses this model:

Ext.define("MyApp.store.Seasons", {
extend:"Ext.data.Store",
model:"MyApp.model.Season",
autoLoad: true,

proxy:{
type:"ajax",
url:"/myapp/rest/seasons",
reader:{
type:"json",
root:"seasons"
}
}
});


Restful responds grayed out field value with CSS class name value.

@Path("/seasons")
public class SeasonsResource {

@Inject
private IJsonSerializer jsonSerializer;

@GET
@Produces(MediaType.APPLICATION_JSON)
public String getSeasons() {
Map<String, Object> data = new HashMap<String, Object>();
data.put("success", Boolean.TRUE.toString());

List<Season> seasons = getSeasons(); // seasons obtained somehow

for (Season s : seasons) {
Map<String, Object> rec = new HashMap<String, Object>();
rec.put("id", s.getId());
rec.put("name", s.getDescription());
if (20042005 == s.getId()) {
rec.put("grayedOutComboItem", "x-combo-grayed-out-item");
}
seasonsList.add(rec);
}

data.put("seasons", seasonsList);
return jsonSerializer.toJSON(data);
}

}


Ext JS Template outputs {grayedOutComboItem} as x-combo-grayed-out-item.

{
xtype:'combo',
itemId:'seasonId',
fieldLabel:'Season',
name:'season',
editable: false,
store:Ext.create('MyApp.store.Seasons'),
displayField:'name',
valueField:'id',
forceSelection:true,
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item {grayedOutComboItem}">{name}</div>',
'</tpl>'),
listeners: {
afterrender: function(combo) {
var currSeason = combo.getStore(0).getAt(0);
combo.select(currSeason);
this.fireEvent('select', combo);
},
beforeselect: function(combo, record, index) {
return ("20042005" != record.data.id);
}
}
}

I.e., now it is <div class="x-boundlist-tem x-combo-grayed-out-item"> in your browser.

Enjoy! :))