why 'afteredit' event can't fire in my editorgrid

[qqeerr20012001]

Hi:
i have create a editorgrid like this :



// create the Grid
var grid = new Ext.grid.EditorGrid('grid-menu', {
ds: ds,
cm: colModel,
listeners:{
'afteredit':function(oe){
alert("after edit");
alert("field"+ oe.field + " value: "+ oe.value+" originalValue:" + oe.originalValue);
// return true;
},
'validateedit':function(){
return true;
}
}
});

but i try many times ,the 'afteredit' event can't fire,please help me.Thanks.

[tryanDLS]

I just tested that syntax with the editor grid example and it works correctly. You'll have to post more of your code to determine what you might be doing wrong.

[qqeerr20012001]

1>I create one combox and when I select of it ,it will fire 'select' event.
2>In 'select' event handler,I create editor grid.


//---use DWR to get data for comobx
var Data4Como = function(){
return{
callMethod:
function callMethod(){
//alert("callmethod");
menuService.getMenus("",this.callBackMethod);
},

callBackMethod:
function callBackMethod(data){
// alert("callBackMethod");
DWRUtil.removeAllOptions("menus");
DWRUtil.addOptions("menus",["please select"]);
DWRUtil.addOptions("menus",data,"menu","name");
setMenus();
}


}
}
//------------------grid--------------------------------//


var tgrid; //one reference to grid

function setMenus(){
var converted = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'menus',
width:135,
listeners:{
'select':function(combo,record,index){

var value = combo.getValue();
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy(
{url:"http://localhost:8080/de/MenuManage?id="+value,
extraParams:{test:'test'},
params:{action:'new',id:value},//can't send to server ,what's reason?
success: function (f,a) {alert('sucess'+a.result);},
failure: function() {alert('invalid');},
method:'POST'
}),
reader: new Ext.data.JsonReader( { totalProperty: "total",root: "rows"},
[ {name: 'text'},
{ name: 'id'},
{ name: 'hreftarget'}
])
});



// example of custom renderer function
function italic(value){
return '<i>' + value + '</i>';
}

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){

return '<span style="color:green;">' + val + '</span>';

return val;
}
var fm = Ext.form,Ed = Ext.grid.GridEditor;
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{header: "Name", width: 200, sortable: true, locked:false, dataIndex: 'text',
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},
{header: "ID", width: 85, sortable: true, dataIndex: 'id',
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},
{header: "URL", width: 240, sortable: true, renderer: change, dataIndex: 'hreftarget',
editor: new Ed(new fm.TextField({
allowBlank: false
}))
}
]);


// create the Grid
var grid = new Ext.grid.EditorGrid('grid-menu', {
ds: ds,
cm: colModel,
selModel: new Ext.grid.RowSelectionModel(),
listeners:{//I don't know why this can't fire
'afteredit':function(oe){
alert("after edit");
alert("field"+ oe.field + " value: "+ oe.value+" originalValue:" + oe.originalValue);
// return true;
},
'validateedit':function(){
return true;
}
}
});

// grid.on(, this, true);
ds.load({params:{start:0, limit:5}});
//for reused grid,should destroy tgrid which is ref to grid
if(tgrid!=null){
tgrid.destroy(true);
}
tgrid = grid;

var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');
gridpanel=layout;
grid.render();

//grid.getSelectionModel().selectFirstRow();
var gridFoot = grid.getView().getFooterPanel(true);

var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 5,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}',
emptyMsg: "No results to display"
});



}
},
forceSelection:true
});
}

//----------start up -------
Ext.onReady(
function(){
var tt = new Data4Como();
tt.callMethod();

}
);

[tryanDLS]

I gotta say that's one ugly mess. You need to take a step back, simplify things, and get to a point where you can debug/test small chunks of what you're doing to verify that it works. The examples are meant to demonstrate bits of functionality - they're certainly not intended to exhibit best practices and continuing to shoehorn more functionality into them is going to make your life difficult. Also, while the ability to inline listeners is very powerful, using it as your doing makes your code that much more difficult to follow.

[qqeerr20012001]

thanks for your reply.
Iwill try to refator my codes.

[qqeerr20012001]

Hi:
I refactor my codes.hope you will like this style.
and I find a thread about 'afteredit' event,it's link
http://extjs.com/forum/showthread.php?t=2834&highlight=afteredit


//------------------grid--------------------------------//
var grid4Menu=function(){
var ds;
var colModel;

var tgrid;//reference to grid
var fm = Ext.form,Ed = Ext.grid.GridEditor;

function createDataStore(value){
ds = new Ext.data.Store({
//proxy: new Ext.data.MemoryProxy(myData),
//new Ext.data.HttpProxy({url:'http://localhost:8080/de/extpages/griddata.jsp',
proxy: new Ext.data.HttpProxy(
{url:"http://localhost:8080/de/MenuManage?id="+value,
extraParams:{test:'test'},
params:{action:'new',id:value},//can't send to server ,what's reason?
success: function (f,a) {alert('sucess'+a.result);},
failure: function() {alert('invalid');},
method:'POST'
}),
reader: new Ext.data.JsonReader( { totalProperty: "total",root: "rows"},
[ {name: 'text'},
{ name: 'id'},
{ name: 'hreftarget'}
])
});
ds.load({params:{start:0, limit:5}});//start page and records of page
}

function getDataStore(){
return ds;
}


function createColumnModel(){
colModel = new Ext.grid.ColumnModel([
{header: "NAME", width: 200, sortable: true, locked:false, dataIndex: 'text',
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},
{header: "ID", width: 85, sortable: true, dataIndex: 'id',
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},
{header: "URL", width: 240, sortable: true, dataIndex: 'hreftarget',
editor: new Ed(new fm.TextField({
allowBlank: false
}))
}
]);
}



//------------------- Render function for column--START-------------------
function italic(value){
return '<i>' + value + '</i>';
}



//------------------- Render function for column-END--------------------


function createGrid(ds,colModel){
grid = new Ext.grid.EditorGrid('grid-menu', {
ds: ds,
cm: colModel,
selModel: new Ext.grid.RowSelectionModel(),
listeners:{
'afteredit':function(oe){
alert("after edit");
alert("field"+ oe.field + " value: "+ oe.value+" originalValue:" + oe.originalValue);
// return true;
},
'validateedit':function(){
return true;
}
}
});

}


function createPagintoolbar(grid,ds){
var gridFoot = grid.getView().getFooterPanel(true);

var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 5,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}',
emptyMsg: "No results to display"
});
}


function setMenus(){
var converted = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'menus',
width:135,
listeners:{
'select':function(combo,record,index){
var value = combo.getValue();
refreshGrid(value);
}
},
forceSelection:true
});
}



function refreshGrid(value){

createDataStore(value);

createColumnModel();

createGrid(ds,colModel);

//for reuse grid's DOM,so destroy reference of grid
if(tgrid){
tgrid.destroy(true);
}
tgrid = grid;

var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');



grid.render();
createPagintoolbar(grid,ds);
}
return {
callMethod:
function callMethod(){
menuService.getMenus("",this.callBackMethod);
},

callBackMethod:
function callBackMethod(data){
// alert("callBackMethod");
DWRUtil.removeAllOptions("menus");
DWRUtil.addOptions("menus",["please select"]);
DWRUtil.addOptions("menus",data,"menu","name");
setMenus();
}

}
}();

//----------start up -----------------------------------------------//
Ext.onReady(
grid4Menu.callMethod,grid4Menu,true
);

[Wolfgang]

I did not walk through your code. Anyway here an example that works. Hope it helps you...


grid = new Ext.grid.EditorGrid(gridId, {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock: false,
loadMask: true
});

// render it
grid.render();
// TODO some validation
function validateInput(record) {
console.log(record);
}
//grid.on('afteredit', validateInput, this);

grid.on('validateedit', validateInput, this);


Regards

Wolfgang

[Eloy Vieira]

Hi:
i have create a editorgrid like this :



// create the Grid
var grid = new Ext.grid.EditorGrid('grid-menu', {
ds: ds,
cm: colModel,
listeners:{
'afteredit':function(oe){
alert("after edit");
alert("field"+ oe.field + " value: "+ oe.value+" originalValue:" + oe.originalValue);
// return true;
},
'validateedit':function(){
return true;
}
}
});

but i try many times ,the 'afteredit' event can't fire,please help me.Thanks.


Hi, this function runs 100% in my aplication thanks! i just have 1 doubt..hope you can help me.
when i get the data "oe.field" it's ok.. but if i have a datagrid with 2 columns (ID, name) and just field (name ) is editable.. how can i get the (ID) data of the same row .. i want to know this function cause i need to put in php to update in mysql ID=row etc..etc..

Eloy

[Wolfgang]

use the record object, so you have access to all data of this record.
example:
myfieldname1value = record.data.myfieldname1
myfieldname2value = record.data.myfieldname2

however i suggest that you use use the set/get methods for records instead accessing data directly.
look to the docs for datastore for more details or use firebug, set a BP and inspect the record object.

Regards

Wolfgang