Last active
December 20, 2015 19:58
-
-
Save itakeahike/6186577 to your computer and use it in GitHub Desktop.
ExtJS 4.2: Use checkbox in grid toolbar to manage a custom filter (remote filtering and ExtDirectSpring)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(1) Define the custom filter | |
me.activeFilter = Ext.create('Ext.util.Filter', { | |
id: 'activeFilter', | |
property: 'onlyActive', | |
value: true | |
}); | |
(2) In the grid panel, define the checkbox in the toolbar | |
tbar: [ | |
{ | |
{ | |
xtype: 'checkbox', | |
boxLabel: 'Show only active contracts', | |
itemId: 'showActiveOnly', | |
hideLabel: true, | |
margin: '0 10 0 20', | |
inputValue: 'true', | |
value: 'false', | |
listeners: { | |
change: function (cb, newValue, oldValue) { | |
me.showOnlyActive(newValue); | |
} | |
} | |
} | |
} | |
] | |
(3) Define the method to apply/remove the filter | |
showOnlyActive: function (newValue) { | |
var me = this; | |
if (newValue) { | |
me.store.filter(me.activeFilter); | |
} else { | |
me.store.filters.removeAtKey('activeFilter'); | |
me.store.filter(); | |
} | |
} | |
(4) The store: | |
Ext.define('scas.store.ContractMaster', { | |
extend: 'Ext.data.Store', | |
requires: [ | |
'scas.model.ContractMaster', | |
'Ext.data.reader.Json' | |
], | |
model: 'scas.model.ContractMaster', | |
autoLoad: false, | |
remoteSort: true, | |
remoteFilter: true, | |
pageSize: 100, | |
proxy: { | |
type: 'direct', | |
api: { | |
read: contractMasterController.getContractMasterList | |
}, | |
reader: { | |
type: 'json', | |
root: 'records', | |
totalProperty: 'total' | |
} | |
} | |
}); | |
(5) On the server, process the filter (using ExtDirectStoreReadRequest request) | |
StringBuilder where = new StringBuilder(); | |
where.append(" where "); | |
// String filter with name of "filter" overrides querystring in request. | |
if (request.getFilters().size() > 0) { | |
for (int i = 0; i < request.getFilters().size(); i++) { | |
Filter filter = request.getFilters().get(i); | |
if (filter.getField().equals("onlyActive")) { | |
if (((BooleanFilter) filter).getValue()) { | |
Long now = DateTime.now().getMillis(); | |
where.append(" contractExpDts >= " + now + " "); | |
} | |
} | |
// Handle other (filters here) | |
} | |
} | |
After querying, the method returns: | |
return new ExtDirectStoreReadResult<ContractMasterSdo>(totalRecords, contractMasterSdos); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment