PDA

View Full Version : 4.2.1 Grid Store filter on reload issue or BUG for locking grid



kamleshmoliya@yahoo.com
16 Dec 2013, 3:12 PM
hi there,

I have put the enableLocking: true on the grid and filterOnLoad: true. But the grid doesn't get filter on reload. these are local filters.

after reload I debug the code and I see that Store has all the filters maintained but data is shown in the grid is all the rows. I tried grid.view.refresh() but for lock grid it doesn't work. I tried normalGird.view.refresh() and lockedGrid.view.refresh() but that doesn't work either.

I tried to put filter manually on Load (event) of store but that is also not working. code is as below.

loadhandler:function(store, records, successful){
store.filter(store.filters.items);
//Ext.getCmp('gridCmp').reconfigure(store);
}
Can someone pls advice asap?

Thanks and appreciate your help in advice.

Gary Schlosberg
20 Dec 2013, 6:39 AM
Kind of sounds like this (http://www.sencha.com/forum/showthread.php?264142) issue, but I suspect it might be a new problem. Can you please post a test case which reproduces the issue so we can take a closer look? Thanks.

kamleshmoliya@yahoo.com
20 Dec 2013, 1:22 PM
Here is the code snippet. on a refresh button click, I'm calling onReloadStore on the controller. below is the code snippet (masked) for the controller, store, model and grid. pls ignore any syntax error as the actual code is working accept the reported issue.

#############controller##############


Ext.define('myapp.controller.Controller', {
extend: 'Ext.app.Controller',
views: [
'GridContainer'
],
stores: [
'myStore'
],


init: function(application) {
this.getMyStore().on('load',this.initFilterCombos);

},

initFilterCombos: function(store, records, successful) {


Ext.each(store.data.items, function(record) {
//some code for reset filter combos
var rectype = record.data['type'];
if (rectype == 'ABC' || rectype == 'XYZ') {
record.data['abInd'] = 'B';
} else{
record.data['abInd'] = 'A';
}
});

//Tried below commented logic but id doesn't work :(

// var myfilters = [];
// for (var i = 0; i < store.filters.items.length; i++) {
// myfilters.push(store.filters.items[i]);
// }


// store.clearFilter();


// if(myfilters.length > 0)
// store.data.filter(myfilters);


store.data = store.data.filter(store.filters);


//console.log(store);


//Ext.getCmp('GridContainer').store.data = store.data;
//Ext.getCmp('GridContainer').reconfigure(store);
},

onReloadStore: function(button,e,options) {
var refreshBtn = Ext.ComponentQuery.query('MainView button[action=toggleRefresh]')[0];
refreshBtn.toggle(false);
Ext.StoreManager.get('myStore').reload( {
callback: function(records, options, success) {
refreshBtn.toggle(true);

if(success)
{
//set some values to label

}
}
});
}

}



#############Store##############


Ext.define('myapp.store.myStore', {
extend: 'Ext.data.Store',


requires: [
'myapp.model.myRecord'
],

sorters: [
{
property: 'act',
direction: 'ASC'
},
{
property: 'blkid',
direction: 'DESC'
},
{
property: 'abInd',
direction: 'DESC'
}
],


autoLoad: false,
autoSync: false,
autoSave: false,
//remoteSort: true,
//remoteFilter: true,
pageSize : 50,
//buffered: true,
//sortOnFilter:false,
filterOnLoad: false,
storeId: 'myStore',
model: 'myapp.model.myRecord',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'results',
totalProperty: 'totalProperty'
},
actionMethods: {
read : 'GET',
update : 'POST',
destroy: 'POST'
},
api : {
read : 'list.action',
update : 'resubmit.action',
destroy: 'bypass.action'
},
afterRequest: function(request, success) {
if(!success)
{
//first shutdown the wait alerts();
Ext.MessageBox.alert('Alert','Data retrieval timed out. Please contact administrator.') ;

}else{
//Ext.MessageBox.alert('Alert','serch is done.') ;
}
}
},
//added below sort to enforce default sort when ever new sort is added to grid.
sort: function(sorters, direction, where, doSort) {
var me = this,
sorter,
newSorters;


if (Ext.isArray(sorters)) {
doSort = where;
where = direction;
newSorters = sorters;
}
else if (Ext.isObject(sorters)) {
doSort = where;
where = direction;
newSorters = [sorters];
}
else if (Ext.isString(sorters)) {
sorter = me.sorters.get(sorters);


if (!sorter) {
sorter = {
property : sorters,
direction: direction
};
newSorters = [sorter];
}
else if (direction === undefined) {
sorter.toggle();
}
else {
sorter.setDirection(direction);
}
}


var defaultSorters = [{
property: 'act',
direction: 'ASC'
}, {
property: 'blkid',
direction: 'DESC'
}, {
property: 'abInd',
direction: 'DESC'
}];


if (newSorters && newSorters.length) {
for(var i=0; i<newSorters.length ; i++){
defaultSorters.push(newSorters[i]);
}
newSorters = defaultSorters;


newSorters = me.decodeSorters(newSorters);
if (Ext.isString(where)) {
if (where === 'prepend') {
// <code from 4.2.1>
// me.sorters.insert(0, newSorters);
// </code from 4.2.1>


// <code from 4.2.0>
sorters = me.sorters.clone().items;


me.sorters.clear();
me.sorters.addAll(newSorters);
me.sorters.addAll(sorters);
// </code from 4.2.0>
}
else {
me.sorters.addAll(newSorters);
}
}
else {
me.sorters.clear();
me.sorters.addAll(newSorters);
}
}


if (doSort !== false) {
me.fireEvent('beforesort', me, newSorters);
me.onBeforeSort(newSorters);


sorters = me.sorters.items;
if (sorters.length) {


me.doSort(me.generateComparator());
}
}
}


});


#############Model ##############


Ext.define('myapp.model.myRecord', {
extend: 'Ext.data.Model',


fields: [
//other fields definations goes here
{
name: 'act'
},
{
name: 'blkid',
},
{
name: 'abInd',
persist:false
}
]
});




#############GRID Component ##############


Ext.define('myapp.view.GridContainer', {
extend: 'Ext.grid.Panel',
alias: 'widget.GridContainer',
id: 'GridContainer',
requires: ['Ext.ux.grid.FiltersFeature'],


cls: 'custom-dirty',
stripeRows: true,
columnLines: true,
//height: 600,
store: 'myStore',
selModel: exSelectionModel,
enableLocking: true,


viewConfig: {
enableTextSelection: true,
stripeRows: false,
listeners: {
cellcontextmenu: function(view, cell, cellIndex, record, row, rowIndex, e) {
//comelogic
},
getRowClass: function(record, index, rowParams, ds) {
//some logic
}
}
},
plugins: [cellEditingException, 'bufferedrenderer'],
features: [{
ftype: 'filters',
local: true
}],
columns: { //Ideal way is to create custom column component where we can put search stuff. right to avoide more changes just put the code in line.
defaults: {
doSort: function(state) {
var ds = this.up('GridContainer').store;
var field = this.getSortParam();
ds.sort({
property: field,
direction: state,
sorterFn: function(v1, v2) {
v1 = v1.get(field);
v2 = v2.get(field);
if (v1 == null || (v1 == '' && parseInt(v1) != 0))
return -1;
else if (v2 == null || (v2 == '' && parseInt(v2) != 0))
return 1;
// transform v1 and v2 here
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
}
});
},
onDownKey: function(e) {
if(e.getKey() != e.ENTER && e.getKey() != e.BACKSPACE){
if (this.triggerEl) {
this.onTitleElClick(e, this.triggerEl.dom || this.el.dom);
}
}
},
onEnterKey: function(e) {
if(e.getKey() != e.ENTER && e.getKey() != e.BACKSPACE){
this.onTitleElClick(e, this.el.dom);
}
}
},
items: [{
text: 'Client',
sortable: true,
locked: true,
dataIndex: 'act',
itemId: 'exact',
//fixed: true,
width: 100,
items: {
xtype: 'combobox',
flex: 1,
//margin: 2,
//height : 12,
typeAhead: true,
triggerAction: 'all',
store: clientsStore,
valueField: 'topAccount',
displayField: 'topAccount',
queryMode: 'local',
baseCls: "xfilter-row",
tabIndex: -1,
listeners: {
keyup: function() {
if(e.getKey() == e.ENTER) {
Ext.getCmp('exceptionGridContainer').filterData('topAccount', this.value, true, false);
}
}
}
}

}, {
text: 'BKID',
sortable: true,
dataIndex: 'blkid',
width: 70
}
]
});