PDA

View Full Version : How to assign store of a grid to SearchFieled



salarmehr
26 May 2014, 6:43 AM
I am trying to implement a grid class with a search button. Here is my code:


Ext.define('Ahura.grid.Base', {
extend: 'Ext.grid.Panel',
frame: false,
loadMask: true,
clicksToEdit: 1,
autoExpandColumn: "name",
initComponent: function () {
this.bbar = {
xtype: 'pagingtoolbar',
displayInfo: true,
}
this.callParent(arguments);
}
});


Ext.define("Ahura.grid.User", {
extend: "Ahura.grid.Base",
alias: "widget.users-grid",
tbar:{
width: 400,
xtype: 'searchfield'
},
initComponent: function () {
this.store = "User";
this.columns = columns;
this.tbar = tbar;
this.callParent(arguments);
this.down('pagingtoolbar').bindStore(this.store);
this.down('searchfield').store = this.store;
}
});


Unfortunately I get this error:
Uncaught TypeError: Cannot set property 'remoteFilter' of undefined

I need each `searchfield` element to use the store of the grid. How can I do that?
Thanks.

undeclared
26 May 2014, 1:10 PM
You're going to have tons of problems because you're trying to bind two components to the same store. Sadly, that does not work very well in Ext JS.

You can do it, but for example, if it's in a tab and you destroy the tab, it will bug out because it's trying to destroy the same store twice.

A better solution (not better per se, but better for Ext JS) would be to just load a second instance of the store.

It's very important to note that if you simply name it the same thing, that's going to be a problem.

I have two solutions to offer, the first being based on using the same store:

1. The proper way of re-using a store (does not duplicate data, unfortunately):


Ext.define("....store.User', {
alias: 'store.userStore'
}


Then inside the component:


store: { type: 'userStore' }


Sadly this means dual loading, inefficiencies, etc... but I have had way too many problems with using a store twice to suggest any other method.

2. You could always populate one store with the others data, but I don't think it's the best way either.. but it would work.

How you'd do this is something like:



store.on('load', function(store, records, successful) {
if(successful)
otherStore.loadData(records, true);
});
store.on('update', ...etc

abhijith
26 May 2014, 9:30 PM
U dnt want to go for complex ways.just put a text field make use of store.getProxy() and on rest service just get that form params and do the rest.