1. #1
    Sencha User
    Join Date
    Mar 2008
    Posts
    19
    Vote Rating
    0
    Vikram is on a distinguished road

      0  

    Default Answered: Comobox selection optgroup problem. ???

    Answered: Comobox selection optgroup problem. ???


    Kindly look at below example:

    Code:
    Ext.onReady(function(){
        name : 'Fiddle',
    
       // Define the model for a State
        Ext.define('State', {
            extend: 'Ext.data.Model',
            fields: [
                { type: 'string', name: 'id' },
                { type: 'string', name: 'name' },
                { type: 'string', name: 'optgroup' },
            ]
        });
                var example = [
            { "id": "0", "name": "Fruits", "optgroup": true },
            { "id": "1", "name": "Apple", "optgroup": "false" },
            { "id": "2", "name": "Orange", "optgroup": "false" },
            { "id": "3", "name": "Mango", "optgroup": "false" },
            { "id": "4", "name": "Guava", "optgroup": "false" },
            
            { "id": "12", "name": "Vegetables", "optgroup": true },
            { "id": "13", "name": "Green Beans", "optgroup": "false" },
            { "id": "14", "name": "Cabbage", "optgroup": "false" },
            { "id": "15", "name": "Broccoli", "optgroup": "false" },
            
    ];
    
            var store12 = Ext.create('Ext.data.Store', {
            model: "State",
            data: example
        });
    
    Ext.create('Ext.panel.Panel', {
        title: 'Demo',
        
        
        renderTo: Ext.getBody(),
        items: [{
                    xtype: 'combobox',
                    id: "DateServerFilter",
                    editable: false,
                    queryMode: "local",
                    fieldLabel: "Select",
                    displayField: 'name',
                    valueField: 'name',
                    width: 300,
                    labelWidth: 130,
                    store: store12,
                
                    listConfig: {
                        tpl: Ext.create('Ext.XTemplate',
                            '<tpl for=".">',
                                "<tpl if=\"optgroup == 'true'\">",
                                    '<div><b>{name}</b></div>',
                                '<tpl else>',
                                    '<div class="x-boundlist-item">{name}</div>',
                                '</tpl>',
                            '</tpl>'
                            )
                    }
                }]
    });
    
    });

    Output:
    screen1.png


    When i select 'Apple" option but its showing prev. one option like 'Fruits'
    how can i resolve this problem?

    Any suggestion/help would be appreciated.
    you can try the above example in 'Sencha fiddler'.
    https://fiddle.sencha.com/#home

    thanks
    vik

  2. ok the select index is getting messed up because you have remove the css class x-boundlist-item from theoptGroup in your tpl.
    If you put it back select will behave.

    As far as preventing users selecting a group option in the combo - arm a beforeselect event on the combo and check if the user has selected a group and return false from the event listener.
    Returning false will cancel the selection

  3. #2
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    465
    Vote Rating
    69
    Answers
    21
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      1  

    Default


    ok the select index is getting messed up because you have remove the css class x-boundlist-item from theoptGroup in your tpl.
    If you put it back select will behave.

    As far as preventing users selecting a group option in the combo - arm a beforeselect event on the combo and check if the user has selected a group and return false from the event listener.
    Returning false will cancel the selection

Thread Participants: 1