ExtJs clear grid filter
Clear grid filter and update immediatelly without remote query
HTML
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
<!-- corresponding blog at http://blog.jardalu.com/2013/5/24/delete-row-from-grid-sencha-extjs -->
<title>ExtJs- Grid : Delete Row</title>
<div id="example-grid"></div>
<div id="button"></div>
CSS
body {
padding: 50px 20px 0 20px;
}
JavaScript
Ext.require([
'Ext.data.*',
'Ext.grid.*'
]);
function getRandomDate() {
var from = new Date(1900, 0, 1).getTime();
var to = new Date().getTime();
var date = new Date(from + Math.random() * (to - from));
return Ext.Date.clearTime(date);
}
function createFakeData(count) {
var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe'];
var lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias'];
var data = [];
for (var i = 0; i < count ; i++) {
var dob = getRandomDate();
var firstNameId = Math.floor(Math.random() * firstNames.length);
var lastNameId = Math.floor(Math.random() * lastNames.length);
var name = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
data.push([name, dob]);
}
return data;
}
Ext.onReady(function(){
Ext.define('Person',{
extend: 'Ext.data.Model',
fields: ['Name', 'dob']
});
var store = new Ext.data.Store({
data: []
});
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Name", width:120, dataIndex: 'Name'},
{text: "DOB", width: 120, dataIndex: 'dob', renderer: Ext.util.Format.dateRenderer('M d, Y')},
{
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: 'http://etf-prod-projects-1415177589.us-east-1.elb.amazonaws.com/trac/docasu/export/2/trunk/client/extjs/shared/icons/fam/delete.gif',
handler: function(grid, rowIndex, colIndex) {
store.removeAt(rowIndex);
}
}]
}
],
renderTo:'example-grid',
width: 280,
height: 280
});
Ext.create('Ext.button.Button', {
renderTo: 'button',
...