View Full Version : how to make live search in cell at grid

14 Aug 2012, 6:23 AM
i want to make live search in cell at a grid, how can i do this?

14 Aug 2012, 8:47 AM
When you say 'live search', are you're talking about auto-complete/type-ahead for specifying the value in a grid cell?

If so, you'll need to configure the plugins (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.grid.Panel-cfg-plugins) attribute of your grid's configuration to use Ext.grid.plugin.CellEditing (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.grid.plugin.CellEditing).

You'll then need to specify an editor for the target grid column (see the code sample in the CellEditing docs) which uses an Ext.form.field.ComboBox (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.form.field.ComboBox). If you want the combo to look like a plain old input box without a dropdown arrow displayed, you can set hideTrigger: true (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.form.field.ComboBox-cfg-hideTrigger).

Also note that you can set the combo's minChars (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.form.field.ComboBox-cfg-minChars) attribute to determine how many keys a user types before auto-complete kicks in.

If you mean something else by 'live search' , then please explains your needs in more detail and I'll try to assist further.

14 Aug 2012, 9:01 AM
This example may be of help as well:


14 Aug 2012, 8:57 PM
i mean just like this picture, when i type a keyword the result is that having a relationship with the keyword. example : if i type ml the result must be ml, ml/L


14 Aug 2012, 9:34 PM
Like this:

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"},
{"abbr":"TN", "name":"Tennessee"},
{"abbr":"TX", "name":"Texas"}

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
hideTrigger: true,
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()