PDA

View Full Version : store.remove(rec) doesn't refresh, but store.removeAll() does?



ekhanh101
16 Nov 2010, 5:56 PM
Hi,
I have a grid, and on double click I want to remove the record,


listeners: {
rowdblclick: function(g, index, ev) {
var rec = g.store.getAt(index);
g.store.remove(rec);
// g.store.removeAll(); -- this does do remove all.

}

when I double click, the remove event is fired from the store, but the grid never refreshes.

if i do,

g.store.removeAll();

the grid does remove all records and refreshes


debugging the grid, in FireBug,
when i do Ext.getCmp('myGrid').getStore()

i notice the store object doesn't have idProperty, even though, the reader has it idProperty set.
why would idProperty be missing?



var readerSchoolPrograms = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'ProgramID',
root: 'data',
messageProperty: 'message' // <-- New "messageProperty" meta-data
},
[
{ name: 'ProgramID' },
{ name: 'ProgramName' }
]);


var storeSchoolPrograms = new Ext.data.Store({
id: 'storeSchoolPrograms',
proxy: new Ext.data.HttpProxy({ url: 'ws_lms.aspx?op=GetSchoolPrograms' }),
},
autoLoad: true,
reader: readerSchoolPrograms
});



What am I missing?

JanVenekamp
17 Nov 2010, 9:03 AM
http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridView&member=refresh ?

ekhanh101
17 Nov 2010, 9:41 AM
more info,
when I do Ext.getCmp('myGrid').getStore().removeAt(0)
the Store's remove event is fired ( I put in alert('removed'); on the Store's remove listener, but the record doesn't seem to be removing.
Any thoughts?


var readerSchoolPrograms = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
root: 'data',
idProperty: 'ProgramID',
messageProperty: 'message' // <-- New "messageProperty" meta-data
},
[
{ name: 'ProgramID' },
{ name: 'ProgramName' },
{ name: 'ProgramCode' }
]
);

var storeSchoolPrograms = new Ext.data.Store({
id: 'storeSchoolPrograms',
proxy: new Ext.data.HttpProxy({ url: 'ws_lms.aspx?op=GetCampusPrograms' }),
baseParams: {
CampusID: campusID,
SchoolID: schoolID,
mode: 'avail'
},
pruneModifiedRecords: true,
autoLoad: true,
listeners: {
beforeLoad: function() {
Ext.MessageBox.wait('Loading Data. Please wait...');
},
load: function() {
Ext.MessageBox.hide();
}
},
remove: function() {
alert('item removed');
},
reader: readerSchoolPrograms
});

var gridSchoolPrograms = new Ext.grid.GridPanel({ // new Ext.ux.maximgb.tg.GridPanel({
id: 'gridSchoolPrograms',
loadMask: true,
layout: 'fit',
width: 200,
autoHeight: true,
forceFit: true,
store: storeSchoolPrograms,
sm: new Ext.grid.RowSelectionModel(),
columns: CampusProgramsColumns,
enableColumnResize: false,
stripeRows: true,
title: "Available School Programs",
viewConfig: {
forceFit: true,
scrollOffset: 0,
emptyText: 'No rows to display'
},
listeners: {
rowdblclick: function(g, index, ev) {
var rec = g.store.getAt(index);
g.store.removeAt(index);
//g.store.removeAll();

//Ext.getCmp('gridSchoolPrograms').getStore().remove(rec);
Ext.getCmp('gridCampusPrograms').getStore().add(rec);

}
}
});

Screamy
17 Nov 2010, 10:34 AM
This works for me:



listeners: {
rowdblclick: function(grid, rowIndex, evt) {
var record = grid.store.getAt(rowIndex);
grid.store.remove(record);
}
}


What version of Ext are you using?

JanVenekamp
17 Nov 2010, 10:37 AM
My prev post didn't made it so again:
See Ext.grid.GridView.refresh();

ekhanh101
17 Nov 2010, 10:46 AM
I'm using 3.3.1,
it looks like the store it self is not removing the record, when i trace in firebug.

The remove event fires,
but the getStore().data.length is never changed.
when i do getStore().removeAll(), i see the changes, and the getStore().data.length = 0

i think it has something to do with the idProperty
the data retrieves and display fine, just can't seem to remove.

Screamy
17 Nov 2010, 12:13 PM
As an alternative, try using a JsonStore and see if you get the same results.



var storeSchoolPrograms = new Ext.data.JsonStore({
autoLoad: true,
fields: ['ProgramID', 'ProgramName'],
idProperty: 'PropgramID',
root: 'data',
totalProperty: 'total',
url: 'ws_lms.aspx?op=GetSchoolPrograms'
});

ekhanh101
22 Nov 2010, 11:10 AM
converting to JsonStore didn't work.
I've reduced the code below.


default.html:


<html>
<head>

<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext/resources/css/ext-all.css" />

<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="http://dev.sencha.com/deploy/ext/adapter/ext/ext-base.js"></script>

<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="http://dev.sencha.com/deploy/ext/ext-all.js"></script>

<script src="CampusPrograms.js" type="text/javascript"></script>


<script type="text/javascript" language="javascript">
var campusID = "1";
var schoolID = "1";

Ext.onReady(function() {
createCampusPrograms();
});
</script>
<script src="Scripts/CampusPrograms.js" type="text/javascript"></script>
</head>
<body>
<div id="grid-SchoolPrograms" width="300px"></div>
<br/>

<div id="grid-CampusPrograms" width="300px"></div>
</body>
</html>

CampusPrograms.js:



function createCampusPrograms() {


var readerCampusPrograms = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'ProgramID',
root: 'data',
messageProperty: 'message' // <-- New "messageProperty" meta-data
},
[
{ name: 'ProgramID' },
{ name: 'ProgramName' },
{ name: 'ProgramCode' },
{ name: 'LMSProgramCode' },
{ name: 'AreaName' },
{ name: 'CareerType' }
]
);

var readerSchoolPrograms = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
root: 'data',
idProperty: 'ProgramID',
messageProperty: 'message' // <-- New "messageProperty" meta-data
},
[
{ name: 'ProgramID' },
{ name: 'ProgramName' },
{ name: 'ProgramCode' }
]
);

var storeSchoolPrograms = new Ext.data.Store({
id: 'storeSchoolPrograms',
proxy: new Ext.data.HttpProxy({ url: 'programs.asp' }),
baseParams: {
CampusID: campusID,
SchoolID: schoolID,
mode: 'avail'
},
pruneModifiedRecords: true,
autoLoad: true,
listeners: {
beforeLoad: function() {
Ext.MessageBox.wait('Loading Data. Please wait...');
},
load: function() {
Ext.MessageBox.hide();
}
},
remove: function() {
alert('item removed');
},
reader: readerSchoolPrograms
});

var storeCampusPrograms = new Ext.data.Store({
id: 'storeCampusPrograms',
proxy: new Ext.data.HttpProxy({ url: 'programs2.asp' }),
baseParams: {
CampusID: campusID
},
autoLoad: true,
listeners: {
beforeLoad: function() {
Ext.MessageBox.wait('Loading Data. Please wait...');
},
load: function() {
Ext.MessageBox.hide();
},
update: function() {
}
},
remove: function() {
alert('removed');
},
exception: function() {
},

reader: readerCampusPrograms
});


var CampusProgramsColumns = [
{ header: "ID", width: 50, sortable: true, dataIndex: 'ProgramID' },
{ header: "Program Name", width: 150, sortable: true, dataIndex: 'ProgramName' },
{ header: "Code", width: 50, sortable: true, dataIndex: 'ProgramCode' },
{ header: "", width: 5, align: 'right', dataIndex: '' }
];



var gridCampusPrograms = new Ext.grid.GridPanel({
id: 'gridCampusPrograms',
loadMask: true,
layout: 'fit',
autoHeight: true,
width:200,
forceFit: true,
store: storeCampusPrograms,
columns: CampusProgramsColumns,
enableColumnResize: false,
stripeRows: true,
title: "Campus Programs",
viewConfig: {
forceFit: false,
scrollOffset: 0,
emptyText: 'No rows to display'
}
});

var gridSchoolPrograms = new Ext.grid.GridPanel({
id: 'gridSchoolPrograms',
loadMask: true,
layout: 'fit',
width: 200,
autoHeight: true,
forceFit: true,
store: storeSchoolPrograms,
sm: new Ext.grid.RowSelectionModel(),
columns: CampusProgramsColumns,
enableColumnResize: false,
stripeRows: true,
title: "Available School Programs",
viewConfig: {
forceFit: true,
scrollOffset: 0,
emptyText: 'No rows to display'
},
listeners: {
rowdblclick: function(g, index, ev) {
var rec = g.store.getAt(index);
g.store.removeAt(index);
//g.store.removeAll(); -- this works

//Ext.getCmp('gridSchoolPrograms').getStore().remove(rec);
Ext.getCmp('gridCampusPrograms').getStore().add(rec);

}
}
});

gridSchoolPrograms.getStore().load();
document.getElementById('grid-SchoolPrograms').innerHTML = "";
gridSchoolPrograms.render('grid-SchoolPrograms');

gridCampusPrograms.getStore().load();
document.getElementById('grid-CampusPrograms').innerHTML = "";
gridCampusPrograms.render('grid-CampusPrograms');



}


programs.asp:



{"success":"true","total":"6","data":[{"SchoolName":"NHI","ProgramID":"3","SchoolID":"5","ProgramName":"Massage 3","DegreeTypeID":null,"isActive":null,"ProgramCode":"MT3","CampusID":"115","LMSProgramCode":"MT","AreaID":"1","CareerTypeID":null,"AreaName":"Art & Design","CareerType":"Animation","_id":3},{"SchoolName":"NHI","ProgramID":"4","SchoolID":"5","ProgramName":"Massage 4","DegreeTypeID":null,"isActive":null,"ProgramCode":"MT4","CampusID":"116","LMSProgramCode":"MT","AreaID":"1","CareerTypeID":null,"AreaName":"Art & Design","CareerType":"Animation","_id":4},{"SchoolName":"NHI","ProgramID":"5","SchoolID":"5","ProgramName":"Massage 5","DegreeTypeID":null,"isActive":null,"ProgramCode":"MT5","CampusID":"117","LMSProgramCode":"MT","AreaID":"1","CareerTypeID":null,"AreaName":"Art & Design","CareerType":"Animation","_id":5},{"SchoolName":"NHI","ProgramID":"2","SchoolID":"5","ProgramName":"Massage Therapy 2","DegreeTypeID":null,"isActive":null,"ProgramCode":"MT2","CampusID":"114","LMSProgramCode":"MT","AreaID":"1","CareerTypeID":null,"AreaName":"Art & Design","CareerType":"Animation","_id":2},{"SchoolName":"NHI","ProgramID":"7","SchoolID":"5","ProgramName":"Program 3","DegreeTypeID":null,"isActive":null,"ProgramCode":"P3","CampusID":"","LMSProgramCode":"P3","AreaID":"3","CareerTypeID":null,"AreaName":"Criminal Justice","CareerType":"Fine and Studio Art","_id":7},{"SchoolName":"NHI","ProgramID":"6","SchoolID":"5","ProgramName":"Program2","DegreeTypeID":null,"isActive":null,"ProgramCode":"P2","CampusID":"","LMSProgramCode":"P2","AreaID":"2","CareerTypeID":null,"AreaName":"Business","CareerType":"Fashion","_id":6}]}



I must be missing something simple.
All I want to do is move records from one grid to another.

ekhanh101
22 Nov 2010, 2:05 PM
looks like if i do this:


listeners: {
rowdblclick: function(g, index, ev) {
var rec = g.store.getAt(index);
g.store.data.removeAt(index);
g.getView().refresh();

}

it works, i didn't think i had to do getStore().data ?? and then refresh...
this doesn't sound correct.

Condor
23 Nov 2010, 5:34 AM
How about:

listeners: {
rowdblclick: {
fn: function(grid, rowIndex, e) {
var rec = grid.getStore().getAt(rowIndex);
grid.getStore().remove(rec);
},
delay: 1
}
}
(Haven't tested, but it could be that you can't remove a record from it's dblclick event)

Also, remove(rec) only works if the record ids are unique.

MiguelVelarde
24 Jun 2016, 12:38 PM
I had the same problem. I use this and it worked.

#{grdAlertas}.store.removeAt(index,1);