Combobox with disabled items

[kgm]

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]

Anyone has any answer to this question? I was wondering the exact same thing without answers?

Thanks
Seb

[para]

Look at the tpl config option of 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]

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]

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]

Thank you very much for your code. Really appreciated. It worked perfectly.

[jmj_cando]

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]

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.

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!