How to delete a grid in extjs? - extjs4.2

Question

I'm auto loading an Extjs grid for the first time, it loads with all the values from the servlet. The webpage also has a form based on which (user's input) another grid is being created. When the new grid is being created i don't want the old one. Or is there another way to load only the store? The code is below:
Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*',
'Ext.form.*',
'Ext.tip.QuickTipManager', 'Ext.ux.LiveSearchGridPanel' ]);
Ext.onReady(function() {
Ext.QuickTips.init();
var itemsPerPage = 50;
var simple = Ext.create('Ext.form.Panel', {
renderTo : 'form',
frame : true,
align : 'center',
title : 'Audit LOG',
bodyStyle : 'padding:5px 5px 0',
width : 825,
fieldDefaults : {
msgTarget : 'side',
labelWidth : 75
},
defaultType : 'textfield',
defaults : {
anchor : '100%'
},
items : [ {
fieldLabel : 'Date',
xtype : 'datefield',
name : 'Date',
id : 'Date',
format : 'd M Y',
allowBlank : false,
cls : 'input_single',
emptyText : 'dd-MMM-YYYY',
}, {
fieldLabel : 'Start Time',
name : 'sTime',
xtype : 'timefield',
id : 'sTime',
format : 'H:i:s',
altFormats : 'H:i:s'
}, {
fieldLabel : 'End Time',
name : 'eTime',
xtype : 'timefield',
id : 'eTime',
format : 'H:i:s',
altFormats : 'H:i:s'
} ],buttons : [ {
text : 'GO',
handler : function() {
var startDate = Ext.getCmp('Date').getValue();
var sTime = Ext.getCmp('sTime').getRawValue();
var eTime = Ext.getCmp('eTime').getRawValue();
grid(startDate,sTime,eTime);
}
} ]
});
var store = Ext.create('Ext.data.Store', {
id : 'pageStore',
autoLoad : false,
fields : [ {
name : 'S_NO',
type : 'int'
},{
name : 'LoggedTime',
type : 'string'
}, {
name : 'Level',
type : 'string'
}, {
name : 'LoggerName',
type : 'string'
}, {
name : 'MethodName',
type : 'string'
}, {
name : 'AuditMessage',
type : 'string'
}, {
name : 'Customer',
type : 'string'
}, {
name : 'Activity',
type : 'string'
} ],
pageSize : itemsPerPage,
proxy : {
type : 'ajax',
url : '/LogHandlers/Log',
params : {
flag:'no'
},
reader : {
type : 'json',
root : 'itemsList',
totalProperty : 'totalCount'
}
}
});
store.load({
params : {
start : 0,
limit : itemsPerPage,
flag:'no'
}
});
var groupingFeature = Ext
.create(
'Ext.grid.feature.Grouping',
{
groupHeaderTpl : '{columnName}:{groupValue} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
hideGroupedHeader: true
});
var userGrid = new Ext.create('Ext.ux.LiveSearchGridPanel', {
renderTo : 'logs',
height : 600,
store : store,
features : [ groupingFeature
],
columns : [ {
header : 'S_NO',
dataIndex : 'S_NO',
items: [{
icon : "extjs/resources/ext-theme-classic/images/menu/menu-parent.gif" // Use a URL in the icon config
}]
},{
header : 'LoggedTime',
dataIndex : 'LoggedTime'
}, {
header : 'Level',
dataIndex : 'Level',
groupable : false,
}, {
header : 'LoggerName',
dataIndex : 'LoggerName',
groupable : false
}, {
header : 'MethodName',
dataIndex : 'MethodName',
groupable : false
}, {
header : 'AuditMessage',
dataIndex : 'AuditMessage',
groupable : false
}, {
header : 'Customer',
dataIndex : 'Customer'
}, {
header : 'Activity',
dataIndex : 'Activity'
} ],
dockedItems : [ {
xtype : 'pagingtoolbar',
pageSize : itemsPerPage,
store : store, // same store GridPanel is using
dock : 'bottom',
displayInfo : true,
text : 'Show Preview',
beforePageText : 'Page',
afterPageText : 'of {0}',
mode : 'local',
width : 50,
displayMsg : 'Displaying {0} - {1} of {2}',
emptyMsg : 'No Records to display'
}],
viewConfig : {
forceFit : true
}
});
});
function grid(startDate,sTime,eTime) {
var itemsPerPage = 50;
var store = Ext.create('Ext.data.Store', {
id : 'pageStore',
autoLoad : false,
fields : [ {
name : 'S_NO',
type : 'int'
},{
name : 'LoggedTime',
type : 'string'
}, {
name : 'Level',
type : 'string'
}, {
name : 'LoggerName',
type : 'string'
}, {
name : 'MethodName',
type : 'string'
}, {
name : 'AuditMessage',
type : 'string'
}, {
name : 'Customer',
type : 'string'
}, {
name : 'Activity',
type : 'string'
} ],
pageSize : itemsPerPage,
proxy : {
type : 'ajax',
url : '/LogHandlers/Log',
actionMethods: {
read: 'POST'
},
params : {
Date : startDate,
startTime : sTime,
endTime : eTime,
flag:'yes'
},
reader : {
type : 'json',
root : 'itemsList',
totalProperty : 'totalCount'
}
}
});
store.load({
params : {
start : 0,
limit : itemsPerPage,
Date : startDate,
startTime : sTime,
endTime : eTime,
flag:'yes'
}
});
var groupingFeature = Ext
.create(
'Ext.grid.feature.Grouping',
{
groupHeaderTpl : '{columnName}:{groupValue} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
hideGroupedHeader: true
});
var userGrid = new Ext.create('Ext.ux.LiveSearchGridPanel', {
renderTo : 'logs',
height : 600,
store : store,
features : [ groupingFeature
],
columns : [ {
header : 'S_NO',
dataIndex : 'S_NO',
items: [{
icon : "extjs/resources/ext-theme-classic/images/menu/menu-parent.gif" // Use a URL in the icon config
}]
},{
header : 'LoggedTime',
dataIndex : 'LoggedTime'
}, {
header : 'Level',
dataIndex : 'Level',
groupable : false,
}, {
header : 'LoggerName',
dataIndex : 'LoggerName',
groupable : false
}, {
header : 'MethodName',
dataIndex : 'MethodName',
groupable : false
}, {
header : 'AuditMessage',
dataIndex : 'AuditMessage',
groupable : false
}, {
header : 'Customer',
dataIndex : 'Customer'
}, {
header : 'Activity',
dataIndex : 'Activity'
} ],
dockedItems : [ {
xtype : 'pagingtoolbar',
pageSize : itemsPerPage,
store : store, // same store GridPanel is using
dock : 'bottom',
displayInfo : true,
text : 'Show Preview',
beforePageText : 'Page',
afterPageText : 'of {0}',
mode : 'local',
width : 50,
displayMsg : 'Displaying {0} - {1} of {2}',
emptyMsg : 'No Records to display'
}],
viewConfig : {
forceFit : true
}
});
}

Answer 1

Are you saying you are trying to delete a grid, and recreate it, to pull the updated data from the server? If that is the case, just call load() on you store (with any params you want to pass in, like you are in your code), and that will load up-to-date data, same as when you created the store and grid. You can get the store from the grid by calling getStore(), so it would look something like this:
userGrid.getStore().load();