How to update my grid with the results of search using the Ext.ux.form.SearchField

[brunoflmg]

Hello to everyone...

I'm using the SearchField ux that I see in the "Infinite Scrolling with remote filtering (http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/infinite-scroll-with-filter.html)" (js file of the grid (http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/infinite-scroll-with-filter.js)) example founded in Ext Samples. So I'm just integrate them to my grid toolbar and the searching in server side is working beautiful, however my grid was no refreshing like the example above. :-?

I think this update action will trigger by the line highlighted below... but nothing occur, even an error or success... nothing.



(...)

onTrigger2Click : function(){
var me = this,
value = me.getValue();


if (value.length > 0){
// Param name is ignored here since we use custom encoding in the proxy.
// id is used by the Store to replace any previous filter
me.store.filter({
id: me.paramName,
property: me.paramName,
value: value
});
me.hasSearch = true;
me.triggerCell.item(0).setDisplayed(true);
me.updateLayout();
}
}


My grid extends the followed abstract list class:



Ext.require('Ext.ux.form.SearchField');
Ext.define('App.view.abstract.AbstractList',{


extend : 'Ext.grid.Panel',
columnLines : true,


initComponent: function()
{
store = Ext.create('App.store.'+this.getStore());


this.dockedItems = [{
xtype: 'toolbar',
dock: 'top',
items: [{
width: 250,
fieldLabel: 'Pesquisar',
labelWidth: 50,
xtype: 'searchfield',
store: store
}]
},{
xtype: 'pagingtoolbar',
itemId: 'barBottomPaging',
dock: 'bottom',
store: store,
displayInfo: true
}];


this.callParent(arguments);
this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
},


onRender: function(grid, opGrid)
{
this.store.load();
this.callParent(arguments);
},


onSelectChange: function(selModel, selections)
{
this.down('#delete').setDisabled(selections.length === 0);
this.down('#edit').setDisabled(selections.length !== 1);
}


});



In the code above I need to do this: "store = Ext.create('App.store.'+this.getStore());". Without this line the error was triggered:
store.getProxy is not a function
proxy = store.getProxy(),

Previously the string with the name of my store was passed in my store var. So that is the reason of this error.

I-|... Okay keep going... Finally all my Stores extends the abstract store below:



Ext.define('App.store.AbstractStore', {
extend: 'Ext.data.Store',
autoLoad: true,
remoteSort: false,
remoteFilter: true,
pageSize: 20,
baseUrl: '',
sorters:[{
property: 'id',
direction: 'ASC'
}],


constructor: function(config){
this.proxy = {
simpleSortMode: true,
type: 'ajax',
url: this.baseUrl,
api: {
read: this.baseUrl + 'index',
create: this.baseUrl + 'insert',
update: this.baseUrl + 'edit',
destroy: this.baseUrl + 'delete'
},
actionMethods: {
read: 'POST',
create: 'POST',
update: 'POST',
destroy: 'POST'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty: 'total'
},
writer: {
type: 'json',
writeAllFields: true,
encode: true,
root: 'data'
},
// Parameter name to send filtering information in
filterParam: 'query',


// The PHP script just use query=<whatever>
encodeFilters: function(filters) {
return filters[0].value;
}
};
this.callParent([config]);
}
});


The result of all this things is:

39298

Now... only missing update the grid with the results obtained in the research. All the lines that you can see was loaded when I show the grid. Pressing the search button the only result that would appear is the line with the result returned...

What I need to do to update my grid with my result??

[mitchellsimoens]

Does the search field have the same store as the grid?

[brunoflmg]

Exactly Mitchel... I see this mistake at this morning.

I was doing a new instance of the store, instead of taking the existing instance. However I can't obtain this instance in my AbstractList ... is returning just a string with the name of the store rather than the object itself.


So at the moment... I added the following line to the searchfield file (Ext.ux.form.SearchField) to make this works:



[...]

initComponent: function() {
var me = this;



// Get current store instance of grid list
// the first container is the grid toolbar
// the second container is the grid
me.store = me.isContained.isContained.getStore();

[...]


Now the search updates my grid successfully, however I would still like to get the instance of the store in my AbstractList to not have to make changes in the SearchField plugin.