Filter(textbox) of Grid Panel having autocomplete functionality like combobox.

[Annu]

Hi,
I am using 4.1.3.
I create grid panel having its filter functionality to columns. But i want to add autocomplete functionality to filter text. I mean Like extjs combobox I want autocomplete loading Filter Textbox in grid panel.

[sword-it]

Hi!

why not use a combo with trigger hide, it will serve your needs...
sample:-

{
   xtype:'combo'
   triggerAction:'all',
   typeAhead:true,
   mode:'remote',
   minChars:2,
   forceSelection:true,
   hideTrigger:true
}

[Annu]

Hi,

I already used a combobox and its working fine. But now I want autocomplete functionality with Grid panel. It have filter On columns and i want autocomplete on that filter.
Here is my code: I am using some perl code also.

var filters_config = {
ftype: 'filters',
filterCls: 'filter-sort .x-column-header-text',
onCheckChange: function (item, value) {
this.getMenuFilter().setActive(value);
},

// This function will return filter settings for all columns and build query to set filter setting on respective column.
onBeforeLoad : function (store, options) {
options.params = options.params || {};
this.cleanParams(options.params);
var params = this.buildQuery(this.getFilterData());
Ext.apply(options.params, params);
if(params.filter) {
filterSetting = Ext.decode(params.filter);
} else {
filterSetting = null;
}
},
};

var grid = Ext.create('Ext.grid.Panel', {
title: "<% 'tabdiv_' . $tab_divid_cnt |n%>",
id: "<% $grid_id |js,h%>",
columns: column,
store: grid_store,
columnLines: true,
loadMask: true,
tbar: tbar,
features: [filters_config],
renderTo: Ext.get('<% 'tabdiv_' . $tab_divid_cnt |n%>'),
layout: 'fit',
header: false,
enableColumnMove: false,
% if ( not $fetch_data_from_server) {
autoHeight: true,
viewConfig: {
deferEmptyText: false,
emptyText: "<% defined $no_result_html ? $no_result_html : escape_html($no_result) |n%>",
autoscroll: true,
enableTextSelection: true
},
% } else {
height: Ext.getBody().getViewSize().height - 150,
width: Ext.getBody().getViewSize().width - 240,
% }
listeners: {
afterrender: function(grid) {
if (!columnSetting && <% $fetch_data_from_server || 0 |h%>) {
grid.getStore().guaranteeRange(0, <% $display_size |n%>);
}
else if (filterSetting) {
// This is use to set filter icon when page get reload
grid.filters.createFilters();
}
},
columnhide: function(columns, column, opt) {
if (Ext.getCmp(columns.container.id)) {
var columnStruc = columns.items.items;
if (Ext.getCmp(gridId).filters.getFilterData()[0]) {
filterSetting = createFilterSetting(Ext.getCmp(gridId).filters.getFilterData());
columnStruc[0]['filterSetting'] = filterSetting;
}
bx.extStateful.saveState(columns.container.id, columnStruc, <% $uid |n%>, 'PUT');
}
},
columnshow: function(columns, column, opt) {
if (Ext.getCmp(columns.container.id)) {
var columnStruc = columns.items.items;
if (Ext.getCmp(gridId).filters.getFilterData()[0]) {
filterSetting = createFilterSetting(Ext.getCmp(gridId).filters.getFilterData());
columnStruc[0]['filterSetting'] = filterSetting;
}
bx.extStateful.saveState(columns.container.id, columnStruc, <% $uid |n%>, 'PUT')
}
}
}
});


Weather I required to add some parameters in filters_config or any other way to add autocomplete functionality.I want autocomplete means when i type a letter in filter textbox of grid panel, related search list according to that letter is needed to displayed.

thanks!!!