PDA

View Full Version : Grid and FormPanel unsaved records



Graveworm
2 Jul 2013, 3:56 AM
hello community,

i worked a while with extjs 3 and now started using extjs 4. I've already searched the web for a solution but i didn't find anything.

My application is really simple, a (normal) grid on the left and a form.Panel on the right. When you click on a record in the grid the record will be shown in the FormPanel (loadRecord). That works fine and very simular to ExtJS3.

Problem: When a user start editing a record in the form panel, it will get "dirty". When the user then wants to change the record, i want to show him a message that there a unsaved changes. In ExtJs3 I used the "beforerowselect" event, checked the FormPanel and skipped changing record. I thougt I could use the "beforeselect" in ExtJs4 on a simular way but they are completly different.

In Extjs4 the "beforedeselect" event seams to be nearly the same, but in this event I don't know the the next record which will be selected and the "beforeselect" event the "old" selected record is already (visually) deselected.

How do you solve this?

I hope you'll understand my problem and excuse my bad english!
Thanks for reply :)

slemmon
3 Jul 2013, 3:54 PM
The beforeselect event listener will have access to the selection model where you can use getLastSelected() to inspect the last selected model to see if it is dirty and if so: 1) have the user alerted to confirm the changes, etc. and 2) return false so that the selection doesn't continue on the next record.



Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
listeners: {
beforeselect: function (selModel, rec, i) {
var selected = selModel.getLastSelected();

if (selected && selected.dirty) {
// have the user confirm changes, etc.
return false;
}
}
}
});

Graveworm
4 Jul 2013, 11:43 PM
The beforeselect event listener will have access to the selection model where you can use getLastSelected() to inspect the last selected model to see if it is dirty and if so: 1) have the user alerted to confirm the changes, etc. and 2) return false so that the selection doesn't continue on the next record.
(...)


Thank you slemmon for reply, i'll try it!!!