I have EXT JS Grid. When I remove the record from grid, it gets removed from the page. But, when I do next/prev, the data is shown again. The toolbar also does not show the correct stats after removing records.
Can you please help on this?
<script type="text/javascript" src="/extjs-4.0.7/ext-all.js"></script>
<script type="text/javascript" src="/extjs-4.0.7/examples/ux/data/PagingMemoryProxy.js"></script>
<link rel="stylesh`enter code here`eet" type="text/css" href="/extjs-4.0.7/resources/css/ext-all.css" />
<script>
var selectedRecord = null;
function getRecord() {
return selectedRecord;
}
var data = '{"user":[sample date for the grid]}';
var workitemList = "";
var selectedItems = new Array();
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.tip.QuickTipManager.init();
Ext.define('Model', {
extend: 'Ext.data.Model',
fields: [{
name: 'WORKITEMID',
mapping: 'WORKITEMID'
},
{
name: 'ALERTID',
mapping: 'ALERTID'
},
]
});
var storeMain = Ext.create('Ext.data.Store', {
model: 'Model',
autoLoad: false,
buffered: false,
pageSize: 5,
data: [],
proxy: {
type: 'pagingmemory',
reader: {
type: 'json',
root: 'user'
}
},
remoteSort: true,
remoteFilter: true,
remoteGroup: true
});
var sm = Ext.create('Ext.selection.CheckboxModel', {
listeners: {
selectionchange: function(sm, selections) {
selectedItems = selections;
}
}
});
var myGrid = new Ext.grid.Panel({
title: 'Unassign Alerts',
collapsible: false,
border: true,
loadMask: true,
frame: false,
id: 'myGridId',
columnLines: true,
animCollapse: false,
loadMask: true,
stripeRows: true,
renderTo: Ext.getBody(),
store: storeMain,
selModel: sm,
columns: [
{
text: 'Alert ID',
dataIndex: 'WORKITEMID',
flex: 8 / 100
}
],
listeners: {
'afterrender': function(e) {
var gridthWidth = this.getWidth();
this.setWidth(gridthWidth);
this.setAutoScroll(true);
},
'columnresize': function(e) {
var gridthWidth = this.getWidth();
this.setWidth(gridthWidth);
this.setAutoScroll(true);
},
cellclick: function(iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent) {
if (iColIdx == 1) {
selectedRecord = iRecord;
}
},
render: function(e) {
this.store.getProxy().data = Ext.decode(data);
//this.store.pageSize =25;
this.store.load();
this.store.on('load', function() {
//myMask.hide();
});
e.style = " background-color: #003464;";
}
},
bbar: new Ext.PagingToolbar({
store: storeMain,
id: 'Ptoolbar',
pageSize: 5,
displayInfo: true,
height: 25,
//plugins: Ext.create('Ext.ux.ProgressBarPager', {}),
displayMsg: 'Displaying Records {0} - {1} of {2}',
emptyMsg: "No records to display",
listeners: {
afterrender: function() {
this.child('#refresh').hide();
}
},
buttons: [{
id: 'btnID',
itemId: 'saveBtn',
pressed: true,
frame: true,
text: 'Remove',
handler: function(store) {
if (selectedItems.length > 0) {
store.remove(selectedItems);
Ext.getCmp('clientSummaryGridId').getView().refresh();
} else {
Ext.Msg.alert("Result", "No selection");
}
}
}]
})
});
});
</script>
If
Ext.getCmp('myGrid').getView().Refresh();
is not working you can also try
Ext.getCmp('myGrid').reconfigure(gridstore);
So whenever the record is removed from the grid, you could use this statement.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With