2

ExtJs 4 combobox with checkboxes

I actually tried this but not working for me. Kindly help.

I'm using sencha architect added a combobox then in configpanel added "Process Config" to achieve what mentioned in above link.

 me.processMyComboBox({
                        xtype: 'combobox',
                        labelAlign: 'top',
                        value: [
                            'Friends',
                            'Trusted'
                        ],
                        forceSelection: true,
                        multiSelect: true,
                        store: [
                            'Friends',
                            'Family',
                            'Following',
                            'Trusted',
                            'Office'
                        ]
                    })

processMyComboBox: function(config) {        
    config.listConfig = {
        getInnerTpl : function() {
            return '<div class="x-combo-list-item"><img src="" class="chkCombo-default-icon chkCombo" /> {fieldName} </div>';
        }    
    };        
    return config;
}

After applying above config the combobox went blank.

I tried to post screenshot but as i don't have 10 reputation, so i can't.

Thanks, Ali Abbas

Community
  • 1
  • 1
Ali Abbas
  • 73
  • 4
  • 11

1 Answers1

2

I finally resolved the above mentioned issue. Answering Just in case anyone else had same problem. Actually i'm using wrong placeholder. Just add the displayField argument in getInnerTpl function.

processMyComboBox: function(config) {        
config.listConfig = {
    getInnerTpl : function() {
        return '<div class="x-combo-list-item"><img src="" class="chkCombo-default-icon chkCombo" /> {fieldName} </div>';
    }    
};        
return config;

}

OR
more appropriate way would be, instead of adding processMyComboBox function just add the listConfig property as below

xtype: 'combobox',
                        listConfig: {
                            getInnerTpl: function(displayField) {
                                return '<div class="x-combo-list-item"><img src="" class="chkCombo-default-icon chkCombo" /> {'+ displayField +'}</div>';
                            }
                        },
                        labelAlign: 'top',
                        value: [
                            'Friends',
                            'Trusted'
                        ],
                        displayField: 'name',
                        forceSelection: true,
                        multiSelect: true,
                        store: [
                            'Friends',
                            'Family',
                            'Following',
                            'Trusted',
                            'Office'
                        ]

Let me know if anyone else have same problem and not able to solve. :)

Ali Abbas
  • 73
  • 4
  • 11