Results 1 to 5 of 5

Thread: How to add checkboxes inside the combobox

  1. #1

    Default Answered: How to add checkboxes inside the combobox

    Hi All,
    I want to add checkbox inside the dropdown menu. Please suggest.

    Thanks,
    Babasaeheb Ladhane

  2. Code:
    var comboTPL = new Ext.XTemplate(
             '<tpl for=".">',
                 '<div class="x-boundlist-item">',
                              '<tpl if="values.field1">',
                     '{name} ( ',
                     '<input type="checkbox" checked="checked" disabled="disabled" />',
                     ' )',
                 '</tpl>',
                  '<tpl if="!values.field1">',
                     '{name} ( ',
                     '<input type="checkbox" disabled="disabled" />',
                     ' )',
                 '</tpl>',
               '</div>',
             '</tpl>' // end for
         );
    I have changed field2 to name which is the field you want to display in your combobox. How will the combobox be checked/unchecked? which field in your record (model) will control the state of the checkbox? you should replace field1 in above with that field. Then add the template to the combobox as below (in red).

    Code:
     var combo1 = new Ext.form.ComboBox({
                store: category,
                displayField:'name',
                typeAhead: true,
                editable: false,
                mode: 'local',
                forceSelection: true,
                triggerAction: 'all',editable:false,
                emptyText:'Any',
                selectOnFocus:true,
                applyTo: 'category',
                tpl: comboTPL
            });

  3. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,102
    Answers
    113

    Default

    You can create a template like this:

    Code:
    var comboTPL = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="x-boundlist-item">',
                
                '<tpl if="values.field1">',
                    '{field2} ( Checkbox: ',
                    '<input type="checkbox" checked="checked" disabled="disabled" />',
                    ' )',
                '</tpl>',
    
                '<tpl if="!values.field1">',
                    '{field2} ( Checkbox: ',
                    '<input type="checkbox" disabled="disabled" />',
                    ' )',
                '</tpl>',
                
                '</div>',
            '</tpl>' // end for
        );
    field2 could be any other field of the records you would like to display in the combobox. field1 should be type boolean (to check/uncheck).

    You can then use this template in the config of the combobox:

    Code:
    tpl: comboTPL

  4. #3

    Default

    Thanks Farish for your quick reply.
    I want create this dropdown in html page, for eg.
    var combo1 = new Ext.form.ComboBox({
    store: category,
    displayField:'name',
    typeAhead: true,
    editable: false,
    mode: 'local',
    forceSelection: true,
    triggerAction: 'all',editable:false,
    emptyText:'Any',
    selectOnFocus:true,
    applyTo: 'category'
    });
    Ext.namespace('Ext.exampledata1');
    Ext.category = [['Any'],['Select'],['Select']];


    I have created dropdown boxes like this, now I want to create same dropdown but with the checkbox.

  5. #4
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,102
    Answers
    113

    Default

    Code:
    var comboTPL = new Ext.XTemplate(
             '<tpl for=".">',
                 '<div class="x-boundlist-item">',
                              '<tpl if="values.field1">',
                     '{name} ( ',
                     '<input type="checkbox" checked="checked" disabled="disabled" />',
                     ' )',
                 '</tpl>',
                  '<tpl if="!values.field1">',
                     '{name} ( ',
                     '<input type="checkbox" disabled="disabled" />',
                     ' )',
                 '</tpl>',
               '</div>',
             '</tpl>' // end for
         );
    I have changed field2 to name which is the field you want to display in your combobox. How will the combobox be checked/unchecked? which field in your record (model) will control the state of the checkbox? you should replace field1 in above with that field. Then add the template to the combobox as below (in red).

    Code:
     var combo1 = new Ext.form.ComboBox({
                store: category,
                displayField:'name',
                typeAhead: true,
                editable: false,
                mode: 'local',
                forceSelection: true,
                triggerAction: 'all',editable:false,
                emptyText:'Any',
                selectOnFocus:true,
                applyTo: 'category',
                tpl: comboTPL
            });

  6. #5
    Sencha User
    Join Date
    Oct 2013
    Posts
    56
    Answers
    2

    Default class 'combocheck'

    maybe it will be useful for someone, here is the class, which is based on this approach:
    PHP Code:
    Ext.define('Office.view.common.ComboCheckV', {
        
    extend'Ext.container.Container',
        
    xtype'combocheck',
        
    layout: {
            
    type'vbox',
            
    align'stretch'
        
    },
        
    initComponent: function () {
            var 
    comboTPL = new Ext.XTemplate(
                
    '<tpl for=".">',
                
    '<div class="x-boundlist-item">',
                
    '<tpl if="values.checked">',
                
    '<div class="nowrap">',
                
    '<input type="checkbox" checked="checked" disabled="disabled" />',
                
    ' {',
                
    this.displayField,
                
    '}',
                
    '</div>',
                
    '</tpl>',
                
    '<tpl if="!values.checked">',
                
    '<div class="nowrap">',
                
    '<input type="checkbox" disabled="disabled" />',
                
    ' {',
                
    this.displayField,
                
    '}',
                
    '</div>',
                
    '</tpl>',
                
    '</div>',
                
    '</tpl>' // end for
            
    );

            
    this.items = [
                {
                    
    xtype'combo',
                    
    bind: {
                        
    storethis.store
                    
    },
                    
    displayFieldthis.displayField,
                    
    valueFieldthis.valueField,
                    
    editablethis.editable,
                    
    _checkFieldthis._checkField,
                    
    tplcomboTPL,
                    
    queryMode'local',
                    
    multiSelecttrue,
                    
    listeners: {
                        
    change: function (combon) {
                            
    combo.store.each(function (item) {
                                
    item.set(combo._checkField0);
                            });
                            
    n.forEach(function (item) {
                                
    combo.store.findRecord(combo.valueFielditem0falsetruetrue).set(combo._checkField1);
                            });
                        }
                    }
                }
            ];

            
    this.callParent();
        }
    }); 
    css:
    PHP Code:
    .nowrap{
        
    white-spacenowrap;

    using:
    PHP Code:
    {
        
    xtype'combocheck',
        
    margin2,
        
    store'{result}',
        
    displayField'value',
        
    valueField'id',
        
    editablefalse,
        
    _checkField:'checked'


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •