Checkcombo in Sencha ExtJS

ExtJS does not come with multi-check dropdown. So I thought to build one -

Ext.ux.PerCheckCombo

This plugin will provide checkcombo ( Checkbox as a list in combobox ) which have additional featute of disableFieldFeature.

Features:

• Multiselect using checkboxes
• Can be used in a form
• Checkbox can be disable/enable using disableFieldFeature: true

If disableFieldFeature = false then it will work like checkcombo or disableFieldFeature = true then it will have checkcombo with perticular checbox disable.

To access disableFieldFeature you should have to specify extra disablefield in store (shown in below example).

Example:

// Store
let test_store = Ext.create('Ext.data.Store', {
    autoLoad: false,
    id: 'test_store_id',
    fields: [
        {
            name: 'id',
            type: 'string',
        },
        {
            name: 'name',
            type: 'string',
        },
        {
            name: 'disablefield',
            type: 'string',
        },
    ],
    proxy: {
        type: 'ajax',
        url: 'test.php',
        reader: {
            type: 'json',
            root: 'rows',
        },
    },
});

Usage:

{
    xtype: 'persearchcheckcombo',
    name: 'test_name',
    fieldLabel: 'test',
    valueField: 'id',
    displayField: 'name',
    store: test_store,
    disableFieldFeature: true
}

Ext.ux.PerSearchCheckCombo

This plugin will provide checkcombo ( checkbox as a list in combobox ) and search field which have extra feature of disableFieldFeature.

Features

• Adds a search field in a checkcombo to allow user to filter the list
• Can be used in a form
• Checbox can be disable/enable based on disableFieldFeature: true

If disableFieldFeature = false then it will work like checkcombo or disableFieldFeature = true then it will have checkcombo with perticular checbox disable.

To access disableFieldFeature you should have to specify extra disablefield in store (shown in example).

Example:

// Store
var test_store = Ext.create('Ext.data.Store', {
    autoLoad: false,
    id: 'test_store_id',
    fields: [
        { name: 'id', type: 'string' },
        { name: 'name', type: 'string' },
        { name: 'disablefield', type: 'string' },
    ],
    proxy: {
        type: 'ajax',
        url: 'test.php',
        reader: { type: 'json', root: 'rows' },
    },
});

Usage

{
  xtype: 'persearchcheckcombo',
  name: 'test_name',
  fieldLabel: 'test',
  valueField: 'id',
  displayField: 'name',
  store: test_store,
  disableFieldFeature: true
}

Reference

• Check this repo
• For More info check this thread on sencha community forum.
• Check this Date time filter plugin with lot of features.

Happy Coding! ☺