I am new to Sencha (Architect) and just want to share the CONTROLLER I've made for filtering multi-columns in a GridPanel via Controller:
I've set up all my fields to have unique id's so my controller can access them via Ext.getCMP, then use regexp to compare input and base data. No submit button in the form as each field's event (change) calls the controller. Loading the preliminary data (3000 rows x 20 columns) takes about 3 seconds (max)... and all filtering/re-filtering happens way below 1 second. There are case scenario wherein this kind of local-filtering will make users very very happy.
Notice also that I've not used clearFilter() inside the controller... and it turns out that if a field is empty, the regexp.test always return TRUE.
I've also created a logic on some field's change events to call the CONTROLLER only if field.value.length > n. This keeps the CONTROLLER free from other rules.
Code:
var store = Ext.getCmp('overallInformationPanel').getStore();
var form = Ext.getCmp('searchForm');
var po = Ext.getCmp('searchPONo').getValue();
var inputPO = new RegExp (po+"$", "i");
var scm = Ext.getCmp('searchSCMNo').getValue();
var inputSCM = new RegExp (scm+"$", "i");
var customer = Ext.getCmp('searchCustomers').getValue();
var inputCustomer = new RegExp (customer, "i");
var salesCode = Ext.getCmp('searchSalesCode').getValue();
var inputSalesCode = new RegExp (salesCode+"$", "i");
var requestDateFrom = Ext.getCmp('searchRequestDateFrom').getValue();
store.filterBy(function (record)
{
var dataPO = record.get('po_no');
var dataSCM = record.get('scm_no');
var dataCustomer = record.get('customer_name');
var dataSalesCode = record.get('sales_code');
var dataRequestDateFrom = record.get('request_date');
if(inputPO.test(dataPO) && inputSCM.test(dataSCM) && inputCustomer.test(dataCustomer) && inputSalesCode.test(dataSalesCode) )
{
return record;
}
});
console.log ('The store count = ' + store.getCount());
Aucun commentaire:
Enregistrer un commentaire