sathya
Reputation: 332
How to delete a grid in extjs?
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
}
});
}
Upvotes: 0
Views: 156
Answers (1)
forgivenson
Reputation: 4435
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();
Upvotes: 1
Related Questions
- How to clear the grid in Extjs
- How to remove columns from ExtJs grid?
- Extjs Grid - Delete all record has a conditional
- How to delete record from grid on delete in extjs4
- Extjs 3.4 reload grid after remove records
- Deleting and Adding rows to grid
- How do we clear all the items from the Grid in ExtJS?
- Remove a record from a Grid Locally
- Cannot delete ExtJs GridPanel from a ExtJs Panel
- How do I destroy an ExtJS grid without affecting its store?