PDA

View Full Version : some problems about editgrid



littlegg
19 Jun 2007, 1:50 AM
I am newbie to Ext. I am using EditorGrid of ext 1.01a. I am not an English speaker, i hope i can describe my problems clearly and hope somebody can give me a hand.

I have an editor grid, user inputs material number in first column, and when tab ahead, program querys detail of that material and fill detail data to corresponding other cells. I think I should use TextField's onchange event, but it seems does not work, why? so, I have to use onblur event. one of the problems is when query returned and data filled, the new value does not show in grid immediately. In my case, when i tab to the second column, the third column and fourth column's new value displays but second column's does not( second column is editing now) . how to refresh new value to the second column? the other problem is how to extract data from returned JSON object?

following code creates grid:


grid = new Ext.grid.EditorGrid(
'mygrid',
{
ds: ds,
cm: getColumnModel(),
autoSizeColumns: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
clicksToEdit: 1,
loadMask: true
}
);

following code defines column for inputing data


{
header: 'Serial No.',
width:200,
sortable:true,
dataIndex: 'bh',
editor: new Ext.grid.GridEditor(
new Ext.form.TextField(
{
blur: function(e){
selectedRow = grid.getSelectionModel().getSelected();
if(selectedRow){
cailiaoForm.submit({
waitMsg: 'Querying detail, please wait...',
url:'/servlets/cailiaoDetail',
params:{bh:selectedRow.data.bh},
success:function(form, action) {
selectedRow.data.secondCol = 'some value';// how to extract returned JSON object to corresponding cells?
selectedRow.data.thirdCol = 'some value';
selectedRow.data.fourthCol = 'some value';
selectedRow.commit();
},
failure: function(form, action) {
alert('Oops the save changes did not work out too well!');
}
});
};
}
}
)
)
},

littlegg
19 Jun 2007, 6:46 AM
is there anybody helps me?

para
19 Jun 2007, 7:34 AM
You may want to use the 'complete' event on the GridEditor.
I'm not sure this is perfect code, but it's the best I can do off the top of my head. I think that the 'blur' event happens when the next cell is selected, so it doesn't have a chance to change the contents of the second cell before it starts editing.



var ed = new Ext.grid.GridEditor(new Ext.form.TextField());
ed.on('complete', yourFunc);

{
header: 'Serial No.',
width:200,
sortable:true,
dataIndex: 'bh',
editor: ed
},

littlegg
20 Jun 2007, 6:38 AM
You may want to use the 'complete' event on the GridEditor.
I'm not sure this is perfect code, but it's the best I can do off the top of my head. I think that the 'blur' event happens when the next cell is selected, so it doesn't have a chance to change the contents of the second cell before it starts editing.



var ed = new Ext.grid.GridEditor(new Ext.form.TextField());
ed.on('complete', yourFunc);

{
header: 'Serial No.',
width:200,
sortable:true,
dataIndex: 'bh',
editor: ed
},



hello, para
thanks for your suggestion. but it does not work. you suggested i should use GridEditor's complete event. but I didn't find any document about GridEditor Class in Ext documents. where to find out detail of this class? many thanks

para
20 Jun 2007, 7:03 AM
Yeah, they're a little behind on the docs (understandably).
Check out the source code. In
ext-1.0.1\source\widgets\grid\GridEditor.js you can see the GridEditor, but there's not much there. The meat of it actually comes from the class 'Editor' which can be found at
ext-1.0.1\source\widgets\Editor.js
For a lot of this stuff you have to go to the code instead of the docs. Some of the docs are good, but many are lacking.

Let me know if this helps you.

mystix
20 Jun 2007, 7:54 AM
try the EditorGrid's validateedit or afterEdit events.



grid.on({
validateedit: function(e) {
if (e.field == 'common') {
e.value = 'myNewValue';
}
console.log('validateedit: value of e.record.data[\'common\'] = ' + e.record.data['common']);
},
afterEdit: function(e) {
if (e.field == 'common') {
console.log('afterEdit: value of e.record.data[\'common\'] = ' + e.record.data['common']);
}
}
});

littlegg
21 Jun 2007, 12:51 AM
try the EditorGrid's validateedit or afterEdit events.

many thanks, your code works really very well.