Checkcombo in Sencha ExtJS

Regular-Expression

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! ☺