PDA

View Full Version : [3.0.0] GridPanel - new rows stay permanently selected



stachobywatelpl
5 Nov 2009, 2:51 PM
I have a simple GridPanel connected via CRUD api to database.

I hope I will be able to explain in a simple way what my problem is:
- A new row is inserted to GridPanel (after clicking a button).
- Request to the server is sent automatically and new id assigned to the row in the response.
- From this moment on, the newly created row cannot be deselected!
If I click just once on this new row it gets selected and whatever I do next,
it's still being rendered as selected.
The only way to deselect it is to click on it and then ctrl-click on it.
But if you click on it once again, the same happens - it cannot be unselected
by selecting another row (the other row is too rendered as selected though).
That happens no matter if the grid has singleselect on or off.

Is this by design or is that a flaw? Or maybe I am doing something in a wrong way..
I isolated the problem to this short piece of code:


var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
api: {read: 'unit_r', create: 'unit_c', update: 'unit_u', destroy: 'unit_d'}
}),
reader: new Ext.data.JsonReader(
{root: 'data'},
[{name: 'id'}, {name: 'name'}, {name: 'description'}]
),
writer: new Ext.data.JsonWriter({writeAllFields: true, listful: true})
});
var onReady = function() {
store.load();
var Grid = Ext.extend(Ext.grid.GridPanel, {});
var grid = new Grid({
store: store,
renderTo: 'user-grid',
height: 300,
width: 500,
columns : [
{header: "id", width: 40, sortable: true, dataIndex: 'id'},
{header: "Name", width: 100, sortable: true, dataIndex: 'name'},
{header: "Description", width: 50, sortable: true, dataIndex: 'description'}
],
initComponent: function() {
this.tbar = this.buildTopToolbar();
this.constructor.superclass.initComponent.call(this);
},
buildTopToolbar: function() {
return [{
text: 'Add',
handler: this.onAdd,
scope: this
}]
},
onAdd: function(btn, ev) {
var u = new this.store.recordType({
id : 10000,
name: 'abc',
description : 'def'
});
this.store.insert(0, u);
}
});
}
Ext.onReady(onReady);

Morin
17 Nov 2009, 3:16 AM
I had exactly the same problem. The reason for this is that the ext record id must not be changed by the server (otherwise the internal MixedCollection of the store becomes messed up, partially using the old keys). We solved the problem by using separate database IDs and ext record IDs. When records are loaded from the database, the value of both is taken from the database ID. When a record is updated, two valid IDs are sent by the client (equal or different, depending on whether the record was initially loaded or created) and returned to the client unchanged. When a record is created, the server returns the generated ext record ID unchanged to the client, and modifies the database ID field to the auto-generated value from the database. To Ext, the database ID is just a data field.

brentd
25 Feb 2010, 10:30 PM
This was spot on! I was also encountering the same error using the DwrProxy. Thanks!

realjax
26 Feb 2010, 12:54 AM
...We solved the problem by using separate database IDs and ext record IDs. When records are loaded from the database, the value of both is taken from the database ID. ......

This seems a little complicated to me. Why not simply create a new record, give it NO id so it gets marked dirty and a phantom? Update the id when the all ok comes from the server (with the correct ID) after insertion ...