Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    38
    Vote Rating
    0
    kgm is on a distinguished road

      0  

    Default Combobox with disabled items

    Combobox with disabled items


    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

  2. #2
    Sencha Premium Member
    Join Date
    Jun 2007
    Posts
    46
    Vote Rating
    0
    spaque99 is on a distinguished road

      0  

    Default


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

    Thanks
    Seb

  3. #3
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918
    Vote Rating
    -2
    para has a little shameless behaviour in the past

      0  

    Default


    Look at the tpl config option of ComboBox.

    Original tpl used in ComboBox
    Code:
    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'
    Code:
    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.

  4. #4
    Sencha Premium Member
    Join Date
    Jun 2007
    Posts
    46
    Vote Rating
    0
    spaque99 is on a distinguished road

      0  

    Default


    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

  5. #5
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918
    Vote Rating
    -2
    para has a little shameless behaviour in the past

      0  

    Default


    Ok. I'm still bored so I'll write the listener too:
    Code:
    combo.on('beforeselect', function(combo, record, index) {
      if(record.get('recordCls') == 'category-header') {
        return false;
      }
    });

  6. #6
    Sencha Premium Member
    Join Date
    Jun 2007
    Posts
    46
    Vote Rating
    0
    spaque99 is on a distinguished road

      0  

    Default


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

  7. #7
    Ext User
    Join Date
    Jan 2010
    Location
    Earth
    Posts
    1
    Vote Rating
    0
    jmj_cando is on a distinguished road

      0  

    Thumbs up use of empty id to disable category.

    use of empty id to disable category.


    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"]

    ]

    }
    }

  8. #8
    Sencha User
    Join Date
    Nov 2012
    Location
    Belarus
    Posts
    8
    Vote Rating
    0
    vitalz is on a distinguished road

      0  

    Default


    Quote Originally Posted by kgm View Post
    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.
    Code:
    /* 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.
    Code:
    Ext.define("MyApp.model.Season", {
       extend: "Ext.data.Model",
       fields: ["id", "name", "grayedOutComboItem"]
    });
    Ext JS store now uses this model:
    Code:
    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.
    Code:
    @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.
    Code:
                                            {
                                                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!