autocomplete in a gridpanel

[cdavide75]

Hi,

I would like use a autocomplete (a combobox) like a field in a grid... (I don't be sure that is a good idea...
because of the store of autocomplete is large and so I want load my remote store every time that I digit some chars

My autocomplete work well but I have this problem... the render of autocompleatein the grid... (Is natural)
in another grid I use a combobox with remote store but I load the store at load of page and the render work well with this function:
// create reusable renderer
Ext.util.Format.comboRenderer = function(combo){
return function(value){
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}

Ok, but in my autocomplete solution No, because remote store is empty or partial...
I need for each render call a remote service that say to me the display text to use for lookup my autocomplete...

What can I solve my problem ? (Ext.Ajax.request?)

Is possible retrive a unique ID for each autocoplete cell in my grid?

Is good idea use a autocomplete in a grid? (My lookup field is a large table)

Thanks

under I paste a part of my code:


var store_cboxProv= new Ext.data.JsonStore({
url:'/Mamba/Anagrafiche/Province/Lookup_Load_likeDescrizione',
root: 'data',
fields: [{ name: 'idProvincia' },{ name: 'Descrizione' }] ,
baseParams : {
Descrizione : 0
}
});

var cboxProv=new Ext.form.ComboBox({
lazyRender:true,mode: 'remote',
typeAhead: true,forceSelection: true,
store: store_cboxProv,
emptyText:'...',triggerAction: 'all',editable:true,
forceSelection :true,//IMPORTANTE
allowBlank:false,
displayField:'Descrizione',valueField: 'idProvincia',
autocomplete: true,
minChars:3,
hideTrigger:true,
validateOnBlur: true
});


var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: false
},
columns: [new Ext.grid.RowNumberer(),
{header: 'Descript', dataIndex: 'Descrizione',width: 130, editor: new Ext.form.TextField()} ,
{header: 'Prov', allowBlank:true, dataIndex: 'Provincia',width: 130, editor: cboxProv,renderer: Ext.util.Format.autocompliateRenderer()},
]
});

Ext.util.Format.autocompliateRenderer = function(combo){
Ext.util.Format.autocompliateRenderer = function(combo){return function(value){
//SOME CODE, I TRY n SOLUCTION
}
}

[cdavide75]

Hi,
I resolve my problem with this code:

In my columns code call the render function "autocompliateRenderer"

columns: [
{header: '<%"Provincia").Traduci() %>', allowBlank:true, dataIndex: 'Provincia',width: 130, editor: cboxProv,renderer: Ext.util.Format.autocompliateRenderer(cboxProv)},...]


.....
Ext.util.Format.autocompliateRenderer= function(combo ){return function(value,meta, record, row,col , gridStore ){
Ext.Ajax.request({
url: '/mamba/anagrafiche/Province/DescrizioneFromID?id=' + value,
params:{
id: value
},
success: function(response){
var jsonData = Ext.util.JSON.decode(response.responseText);
grid.getView().getCell(row, col).textContent= jsonData.data;
},
failure: function(response){
return 'f';
}
});
}
}

I do a remote request for each row, pass the ID and return the description of element....

"var jsonData = Ext.util.JSON.decode(response.responseText);
grid.getView().getCell(row, col).textContent= jsonData.data;"

I don't know if is a good idea call a remote request for each element but work well.... I can load the description in an another store o pass the description in the same store but I prefer choose this solution

I hope this can be a help for someone

[vishrutsanghvi02]

hii
can any one help me to how to use autocompleter in extjs grid textfield...?please provide me code...?

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