1. #1
    Touch Premium Member
    Join Date
    Jul 2009
    Posts
    48
    Vote Rating
    0
    Musical Shore is on a distinguished road

      0  

    Default Disabling items in ComboBox drop down list

    Disabling items in ComboBox drop down list


    Hi,

    I would like to disable items in the ComboBox drop down list. the drop down list is actually broken up into two sections, and there is an item that acts as a separator. With a normal <select /> box, I can set the disabled attribute on the <option />. In this way, the item will be unselectable and focus will slide over it when navigating with a keyboard. How can I accomplish this with ExtJs?

    Here's how I'm doing it right now:
    Code:
    new Ext.XTemplate(
            '<tpl for=".">',
                '<tpl if="itemType==1">',
                   
                '<div class="x-combo-list-item search-suggestions">{term}</div>',
                '</tpl>',
                '<tpl if="this.isFirstRecentItem(itemType)">',
                    '<div disabled="disabled" class="x-combo-list-item recent-items-header x-unselectable">My Recent Items</div>',
                '</tpl>',
                '<tpl if="itemType==2">',
                    '<div class="x-combo-list-item recent-items">{term}</div>',
                '</tpl>',        
            '</tpl>'
    This renders the DropDown list properly, although I'm not sure if I should be adding the inactive item to the template. That seems like bad form. I figure that I should insert the element after the DataView is rendered, but I haven't figured that out yet.

    Also, I know that I can set an element to be unselectable. However, I still need to render the component to get the element.

    What is the best approach? Is there an easy way to disable list items of a combobox?

    Thanks,

    Michael

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Posts
    64
    Vote Rating
    0
    ZeusTheTrueGod is on a distinguished road

      0  

    Default


    Hi!

    May be you will be surprised, but you successfully discovered that ComboBox dropdown list is a template!

    So here is the best way, I'll show you the example of tooltip for item inside combobox dropdown list.

    1st. Combobox is a view. Ext.data.Store is a model. Usually store contains 2 fields: id and value. You must add at least one more field. Let say the field is named 'disabled'. So now your store contains something like
    PHP Code:
    [{id:1,name:'option1',disabled:false},{id:2,name:'dont select me!',disabled:true},{id:3,name:'me again!',disabled:false}] 
    2nd. Combobox has a tpl field which is an Ext.Template config. tpl is applied for rendering each item in dropdown list.
    PHP Code:
    {
                                    
    xtype'combobox',
                                    
    name'role',
                                    
    fieldLabel'Role',
                                    
    fields:['Id','Name','qtip']//<-- of course this fields should be in store config, I just want to show you that 3rd field is required
                                    
    tpl:'<tpl for="."><div ext:qtip="{qtip}" class="x-combo-list-item">{Name}</div></tpl>',
                                    
    allowBlankfalse

    You can read the default tpl in Ext.form.ComboBox source file.

    3nd. If user clicks on disabled item then 'beforeselect' event is raised. One of the parameters of that event is a record in store which is going to be selected. You have to subscribe your combobox to that event and just return false for disabled item and do nothing for normal one.

    That is the easiest way to make the behavior you want. Make it as a plugin or as child of Ext.form.Combobox and publish in user extensions. Feel free to ask me for help.

  3. #3
    Touch Premium Member
    Join Date
    Jul 2009
    Posts
    48
    Vote Rating
    0
    Musical Shore is on a distinguished road

      0  

    Default


    Thanks, this is helpful. However, the element that is in the list that I want to disable is of a different "type" than the other elements. The other elements are of type "list-item" whereas the element I want to insert is of element type "list-item-header". I mean, theoretically I could do it, but it doesn't seem good form to put the header in the data store. I think I should be adding the header to the dataview before it renders. After the template renders the list into html, I want to insert my header before the list-item of my choosing.

    I think I can apply your solution to the DataView, but how? I think I need to add the element after the DataView is rendered but before it is shown. Is that possible?

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar