Skip to content

Instantly share code, notes, and snippets.

@itakeahike
Last active December 20, 2015 19:58
Show Gist options
  • Save itakeahike/6186577 to your computer and use it in GitHub Desktop.
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)
(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