PDA

View Full Version : row-grid editor update record key values

ktoole
02-01-2010, 11:46 AM
I have been trying out the new plug in Editor for row-grid editing. I have most of it working and have to modify the delete and add functions to work. The problem I have is with the update function. When I update a field that was part of the key, how can I get at the previous value or save the value somewhere? When you create a regular edit grid, you can get at originalValue. I can't figure out how to get at this in here or find another way to get at the original value of a field. Here is the code (note-I had to remove some of the grid fields that were defined for display in order to fit this in the size of this box):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Copyright" content="Copyright 2008-2009 CNX Corporation, All Rights Reserved">
<title>Valence - AutoCode - Grid Inquiry Template</title>
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/RowEditor.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/valence.css" />
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="/lps/RowEditor.js"></script>
<script type="text/javascript" src="/vvresources/valence.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var LXCMPKEY;
var LXGROUPKEY;
var LXDESCKEY;
var LXSEQKEY;

Ext.QuickTips.init();

var recordRef = Ext.data.Record.create(['LXCMP','LXGROUP','LXFILD','LXDESC','LXLEN','LXAN' ,'LXDEC','LXUINVT','LXSEQ','LXACTIVE','LXAREA',
{name:'LXCCTD',type:'date',dateFormat:'c'},'LXCCTT ','LXCCTU',{name: 'LXLCGD',type: 'date',dateFormat: 'c'},'LXLCGT','LXLCGU']);

var dsReaderRef = new Ext.data.JsonReader({
root: "MLPXREF",
totalProperty: "totalCount"
}, recordRef);

var dsRef = new Ext.data.GroupingStore({
autoLoad: true,
url: 'vvcall.pgm',
reader: dsReaderRef,
remoteSort: true,
sortInfo: {
field: 'LXGROUP',
direction: 'ASC'
},
groupField: 'LXGROUP',
listeners:{
beforeload: function(){
this.baseParams = {
pgm: 'MLPXREF2',
action: 'getRecords'
}
}
}
});

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});

var grid = new Ext.grid.GridPanel({
store: dsRef,
region:'center',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
/* tbar: [{
iconCls: 'icon-user-add',
text: 'Add Record',
handler: function(){
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'addRecord',
pgm: 'MLPXREF2',
success: function(response){
var check = response.responseText;
if (check){
var data = Ext.util.JSON.decode(response.responseText);
if (data.SUCCESS != '1'){
Ext.Msg.alert('Record Not Found','Hmmm...could not retrieve the record');
Ext.getCmp('editWindow').hide();
};
}
Ext.getBody().unmask();
},
failure: function(){
Ext.getBody().unmask();
Ext.Msg.alert('Failure','Failed to receive a response from server');
}
}
});


handler: function(){
var e = new Employee({
name: 'New Guy',
email: 'new@exttest.com',
start: (new Date()).clearTime(),
salary: 50000,
active: true
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'Remove Employee',
disabled: true,
handler: function(){
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store.remove(r);
}
}
}],
*/
columns: [
{
xtype: 'numbercolumn',
header: 'Company No.',
dataIndex: 'LXCMP',
width: 100,
sortable: true,
format: '0',
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 99
}
},{
header: 'Data Group',
dataIndex: 'LXGROUP',
width: 150,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
header: 'Data Field',
dataIndex: 'LXDESC',
width: 150,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
}]
});


editor.on({
scope: this,
/* beforeedit: function(e) {
LXCMPKEY=e.record.value('LXCMP');
LXCMPKEY=object.record.get['LXCMP'];
LXGROUPKEY=e.record.get['LXGROUP'];
LXDESCKEY=e.record.get['LXDESC'];
LXSEQKEY=e.record.get['LXSEQ'];
*/
// e.record.data[e.field] = e.originalValue
// },
afteredit: function(grid, changes, record, rowIndex) {
// afteredit: function(e) {
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'updateRecord',
pgm: 'MLPXREF2',
LXCMP:record.data['LXCMP'],
LXGROUP:record.data['LXGROUP'],
LXFILD:record.data['LXFILD'],
LXDESC:record.data['LXDESC'],
LXLEN:record.data['LXLEN'],
LXAN:record.data['LXAN'],
LXDEC:record.data['LXDEC'],
LXSEQ:record.data['LXSEQ'],
LXACTIVE:record.data['LXACTIVE'],
LXAREA:record.data['LXAREA'],
LXCMPKEY:changes.data['LXCMP'],
LXGROUPKEY:LXGROUPKEY,
LXDESCKEY:LXDESCKEY,
LXSEQKEY:LXSEQKEY,
/* LXCMP:record.data['LXCMP'],
LXGROUP:record.data['LXGROUP'],
LXFILD:record.data['LXFILD'],
LXDESC:record.data['LXDESC'],
LXLEN:record.data['LXLEN'],
LXAN:record.data['LXAN'],
LXDEC:record.data['LXDEC'],
LXSEQ:record.data['LXSEQ'],
LXACTIVE:record.data['LXACTIVE'],
LXAREA:record.data['LXAREA'],
LXCMPKEY:record.originalValue['LXCMP'],
LXGROUPKEY:LXGROUPKEY,
LXDESCKEY:LXDESCKEY,
LXSEQKEY:LXSEQKEY,
*/
success: function(response){
var check = response.responseText;
if (check){
var data = Ext.util.JSON.decode(response.responseText);
if (data.SUCCESS != '1'){
Ext.Msg.alert('Record Not Found','Hmmm...could not retrieve the record');
Ext.getCmp('editWindow').hide();
};
}
Ext.getBody().unmask();
},
failure: function(){
Ext.getBody().unmask();
Ext.Msg.alert('Failure','Failed to receive a response from server');
}
}
});
}
});


var layout = new Ext.Panel({
title: 'Data Setup File Data',
layout: 'border',
layoutConfig: {
columns: 1
},
width: 1600,
height: 600,
items: [grid]
});
layout.render(Ext.getBody());


grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});
});
</script>
</head>
<body>
</body>
</html>
richard.milone
02-02-2010, 01:46 PM
I think you could easily use the "modified" public property on the record to determine the original value on any field in the record. For example, I modified the basic row editor example from Ext JS to include an afteredit listener that throws up an alert with the original and new value of the "name" field after editing. Notice in the code how you can access the original value of any field in the record by the notation rec.modified.fieldname. If the field has not been modified it will be null. Hope this helps.


var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update',
listeners: {
afteredit: function(thisEditor, obj, rec, index) {
if (rec.modified.name != null) {
alert('old value: ' + rec.modified.name + ' new value: ' + rec.get('name'));
}
}
}
});
ktoole
02-03-2010, 07:45 AM
Thanks Richard. This is the code I added to the afteredit section, based on the information you provided, to get the previous value to a field I could pass back to the program:

if (record.modified.LXCMP != null) {
LXCMPKEY=record.modified.LXCMP;}
else { LXCMPKEY=record.get('LXCMP'); };
if (record.modified.LXGROUP != null) {
LXGROUPKEY=record.modified.LXGROUP;}
else { LXGROUPKEY=record.get('LXGROUP'); };
if (record.modified.LXDESC != null) {
LXDESCKEY=record.modified.LXDESC;}
else { LXDESCKEY=record.get('LXDESC'); };
if (record.modified.LXSEQ != null) {
LXSEQKEY=record.modified.LXSEQ;}
else { LXSEQKEY=record.get('LXSEQ'); };
richard.milone
02-03-2010, 09:36 AM
Great, thanks for this post...I'm sure it will help others.
ktoole
02-03-2010, 01:30 PM
I have two addtional problems with this same code.

1) when the Ajax call goes out to update the record and the 400 has a problem, I can't get the datastore (and screen) to take back the change. I figured out that the return must be be set to false for the validateedit listener, but I can't get it to change on the Ajax request. It keeps running the Ajax request after the listener has run. Code here:

editor.on({
scope: this,
validateedit: function(grid, changes, record, rowIndex) {
var errorFound=false;
/* if (record.modified.LXCMP != null) {
LXCMPKEY=record.modified.LXCMP;}
else { LXCMPKEY=record.get('LXCMP'); };
if (record.modified.LXGROUP != null) {
LXGROUPKEY=record.modified.LXGROUP;}
else { LXGROUPKEY=record.get('LXGROUP'); };
if (record.modified.LXDESC != null) {
LXDESCKEY=record.modified.LXDESC;}
else { LXDESCKEY=record.get('LXDESC'); };
if (record.modified.LXSEQ != null) {
LXSEQKEY=record.modified.LXSEQ;}
else { LXSEQKEY=record.get('LXSEQ'); };
*/
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'updateRecord',
pgm: 'MLPXREF2',
LXCMP:record.data['LXCMP'],
LXGROUP:record.data['LXGROUP'],
LXFILD:record.data['LXFILD'],
LXDESC:record.data['LXDESC'],
LXLEN:record.data['LXLEN'],
LXAN:record.data['LXAN'],
LXDEC:record.data['LXDEC'],
LXSEQ:record.data['LXSEQ'],
LXACTIVE:record.data['LXACTIVE'],
LXAREA:record.data['LXAREA'],
LXCMPKEY:LXCMPKEY,
LXGROUPKEY:LXGROUPKEY,
LXDESCKEY:LXDESCKEY,
LXSEQKEY:LXSEQKEY
},
success: function(response){
var check = response.responseText;
if (check){
var data = Ext.util.JSON.decode(response.responseText);
if (data.SUCCESS != '1'){
Ext.getBody().unmask();
Ext.Msg.alert('Error','Error updating this record.');
errorFound=true;
};
}
},
failure: function(){
Ext.getBody().unmask();
Ext.Msg.alert('Failure','Failed to receive a response from server');
errorFound=true;
},
listeners:{
requestcomplete: function(){
return false;
}
}
});
// return true;
}
});

2) the second problem is related to the code that adds the record. I can get it to add the record to the 400 file, but not to the data store. I need a blank record added to the datastore, or better yet one with defaults loaded from the RPG program. Here is that section of code:

tbar: [{
iconCls: 'icon-user-add',
text: 'Add Record',
handler: function(){
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'getFieldDefaults',
pgm: 'MLPXREF2',
success: function(response){
var check = response.responseText;
if (check){
var data = Ext.util.JSON.decode(response.responseText);
if (data.SUCCESS == '0'){
/* Ext.getCmp('LXCMP').setValue(data.LXCMP);
Ext.getCmp('LXGROUP').setValue(data.LXGROUP);
Ext.getCmp('LXFILD').setValue(data.LXFILD);
Ext.getCmp('LXDESC').setValue(data.LXDESC);
Ext.getCmp('LXLEN').setValue(data.LXLEN);
Ext.getCmp('LXAN').setValue(data.LXAN);
Ext.getCmp('LXDEC').setValue(data.LXDEC);
Ext.getCmp('LXUINVT').setValue(data.LXUINVT);
Ext.getCmp('LXSEQ').setValue(data.LXSEQ);
Ext.getCmp('LXACTIVE').setValue(data.LXACTIVE);
Ext.getCmp('LXAREA').setValue(data.LXAREA);
Ext.getCmp('LXCMPKEY').setValue(data.LXCMP);
Ext.getCmp('LXGROUPKEY').setValue(data.LXGROUP);
Ext.getCmp('LXDESCKEY').setValue(data.LXDESC);
Ext.getCmp('LXSEQKEY').setValue(data.LXSEQ);
*/ var newRecord = new recordRef({
LXCMP:data.LXCMP,
LXGROUP:data.LXGROUP,
LXFILD:data.LXFILD,
LXDESC:data.LXDESC,
LXLEN:data.LXLEN,
LXAN:data.LXAN,
LXDEC:data.LXDEC,
LXUINVT:data.LXUINVT,
LXSEQ:data.LXSEQ,
LXACTIVE:data.LXACTIVE,
LXAREA:data.LXAREA,
LXCMPKEY:data.LXCMP,
LXGROUPKEY:data.LXGROUP,
LXDESCKEY:data.LXDESC,
LXSEQKEY:data.LXSEQ
// start: (new Date()).clearTime(),
});

editor.stopEditing();
dsRef.insert(0, newRecord);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
// dsRef.reload();
};
if (data.SUCCESS != '1'){
Ext.Msg.alert('Record Not Found','Hmmm...could not retrieve the record');
Ext.getCmp('editWindow').hide();
};
}
Ext.getBody().unmask();
},
failure: function(){
Ext.getBody().unmask();
Ext.Msg.alert('Failure','Failed to receive a response from server');
}
}
});
}
}],
ktoole
02-05-2010, 07:12 AM
Any ideas on the additional problems I listed?
I thought I would post this under the same problem thread, since all of this code is related to the same program.
richard.milone
02-05-2010, 09:23 AM
Since you're updating on a record-by-record basis you can use the "reject" method on your record if there is a failure. Since your record name is just "record" in your sample code, it would be:

record.reject();

This would in effect revert all the field values with a red change triangle in the upper left to their original values, or at least back to the last record.commit().

Check out the Ext JS API documentation for the "reject" and "commit" methods on the Ext.data.Record object for a more complete explanation of what these do.
ktoole
02-05-2010, 10:40 AM
I wasn't getting the red triangles so I didn't think I would use the reject or commit properties. I tried that and the reject worked just fine. I also discovered I could use the afteredit listener and it would still reverse the change. Here is that section of code with the changes that made it work:

editor.on({
scope: this,
afteredit: function(grid, changes, record, rowIndex) {

if (record.modified.LXCMP != null) {
LXCMPKEY=record.modified.LXCMP;}
else { LXCMPKEY=record.get('LXCMP'); };
if (record.modified.LXGROUP != null) {
LXGROUPKEY=record.modified.LXGROUP;}
else { LXGROUPKEY=record.get('LXGROUP'); };
if (record.modified.LXDESC != null) {
LXDESCKEY=record.modified.LXDESC;}
else { LXDESCKEY=record.get('LXDESC'); };
if (record.modified.LXSEQ != null) {
LXSEQKEY=record.modified.LXSEQ;}
else { LXSEQKEY=record.get('LXSEQ'); };

Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'updateRecord',
pgm: 'MLPXREF2',
LXCMP:record.data['LXCMP'],
LXGROUP:record.data['LXGROUP'],
LXFILD:record.data['LXFILD'],
LXDESC:record.data['LXDESC'],
LXLEN:record.data['LXLEN'],
LXAN:record.data['LXAN'],
LXDEC:record.data['LXDEC'],
LXSEQ:record.data['LXSEQ'],
LXACTIVE:record.data['LXACTIVE'],
LXAREA:record.data['LXAREA'],
LXCMPKEY:LXCMPKEY,
LXGROUPKEY:LXGROUPKEY,
LXDESCKEY:LXDESCKEY,
LXSEQKEY:LXSEQKEY
},
success: function(response){
var check = response.responseText;
if (check){
var data = Ext.util.JSON.decode(response.responseText);
if (data.SUCCESS != '1'){
Ext.getBody().unmask();
Ext.Msg.alert('Error','Error updating this record.');
record.reject();
};
}
},
failure: function(){
Ext.getBody().unmask();
Ext.Msg.alert('Failure','Failed to receive a response from server');
record.reject();
}
});
}
});


Thanks Richard....
Now, how about the section where I try to add the record to the datastore so it shows up in the grid? Any suggestions?
sean.lanktree
02-05-2010, 03:31 PM
If you want to add an extra record to the data store, you can simply just increment the count (third parameter to vvOut_toJson) by 1.
If you want the extra row to be first, start your count at 2 when adding records, otherwise, just add one before the call to vvOut_toJson.
sean.lanktree
02-05-2010, 03:39 PM
Disregard my last post....for some reason I though you wanted to initiate an extra record from the back-end when loading the store.

Anyhow, I noticed in the code you posted that you are have:


if (data.SUCCESS == '0')


If it is 0, then you execute the code to add the record to the data store. Are you really sending back a success of 0 or should this be if success = 1?
ktoole
02-09-2010, 07:46 AM
You are right Sean, I missed that, but when I changed to data.SUCCESS == '1' it does work. I actually already had found that problem through debug. I'm slowly getting better at figuring out what is wrong with the javascript.

I am still having a problem with this program though. When I run the program I get an error from the Roweditor.js that I downloaded that f.getActiveError is not a function. This happens when I create an error condition on a field when adding a record. The window that pops up in the ExtJS example does not show up to display what the error is. I suspect this function is a new function in ExtJS 3.1. I also noticed that in my example the update button is not disabled on errors showing, like it does in the example ExtJS has. Is this also a 3.1 feature? Can I somehow use 3.1 instead of 3.0 or do I need to wait until your new release comes out March 1st? Other suggestions?

Just curious, how can I create a test condition for errors that are displayed on the screen and disable an update/save button on the screen when there are errors displaying?
sean.lanktree
02-09-2010, 11:39 AM
What is the value of "f" before you attempt getActiveError()? Or what is the statement that sets the value of before you call getActiveError()?

In order to disable the Save button, I would do the following:

Give your Save button an id
In the ajax request that sets the error condition(s), I imagine you have a field.markInvalid() somewhere. After this is done, disable the button Ext.getCmp('mySaveButton').disable(). If no errors are marked, then Ext.getCmp('mySaveButton').enable()
ktoole
02-09-2010, 02:53 PM
f. is a very large object with all sorts of properties, but I cannot find a function called getActiveError in it's list.
I tried to send you what I could see on the screen, but it was too big to send.

I'll see if I can figure out how to setup the save button.
ktoole
02-09-2010, 02:57 PM
About the save button...actually I have the screen handling the errors, so there is no field.markInvalid() function call.
sean.lanktree
02-09-2010, 06:47 PM
Hi Ken -

Post the code and we will get to the bottom of this...
ktoole
02-10-2010, 11:06 AM
For the getActiveError, it's the code that ExtJS has on their web site for the Row Editor Grid example, the include file is the RowEditor.js. That is what has the getActiveError function in it that is having the problem. Other than that I'm not sure what code you would want for that error.

I will put my code in here for you to see the save button issue too.

I have another issue where I am displaying a check box, but when you edit the line, the checkbox does not come up checked when it should.

I had to remove some of the fields I was displaying, that are irrelavent to the problems to fit it in here.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Copyright" content="Copyright 2008-2009 CNX Corporation, All Rights Reserved">
<title>Valence - AutoCode - Grid Inquiry Template</title>
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/RowEditor.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/valence.css" />
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="/lps/RowEditor.js"></script>
<script type="text/javascript" src="/vvresources/valence.js"></script>
<script type="text/javascript">

Ext.onReady(function(){
var L2CMPKEY;
var L2GROUPKEY;
var L2SEQKEY;
var L2DESCKEY;

Ext.QuickTips.init();

var recordRef = Ext.data.Record.create(['L2CMP','L2GROUP','L2DESC','L2LEN','L2AN','L2DEC', 'L2UINVT','L2SEQ','L2ACTIVE','L2AREA',
{name:'L2CCTD',type:'date',dateFormat:'c'},'L2CCTT ','L2CCTU',{name: 'L2LCGD',type: 'date',dateFormat: 'c'},'L2LCGT','L2LCGU']);

var dsReaderRef = new Ext.data.JsonReader({
root: "MLPXREF2",
totalProperty: "totalCount"
}, recordRef);

var dsRef = new Ext.data.GroupingStore({
autoLoad: true,
url: 'vvcall.pgm',
reader: dsReaderRef,
remoteSort: true,
sortInfo: {
field: 'L2GROUP',
direction: 'ASC'
},
groupField: 'L2GROUP',
listeners:{
beforeload: function(){
this.baseParams = {
pgm: 'MLPXREF2',
action: 'getRecords'
}
}
}
});

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});
function updateRecord(grid, changes, record, rowIndex) {
if (record.modified.L2CMP != null) {
L2CMPKEY=record.modified.L2CMP;}
else { L2CMPKEY=record.get('L2CMP'); };
if (record.modified.L2GROUP != null) {
L2GROUPKEY=record.modified.L2GROUP;}
else { L2GROUPKEY=record.get('L2GROUP'); };
if (record.modified.L2DESC != null) {
L2DESCKEY=record.modified.L2DESC;}
else { L2DESCKEY=record.get('L2DESC'); };
if (record.modified.L2SEQ != null) {
L2SEQKEY=record.modified.L2SEQ;}
else { L2SEQKEY=record.get('L2SEQ'); };

Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'updateRecord',
pgm: 'MLPXREF2',
L2CMP:record.data['L2CMP'],
L2GROUP:record.data['L2GROUP'],
L2DESC:record.data['L2DESC'],
L2LEN:record.data['L2LEN'],
L2AN:record.data['L2AN'],
L2DEC:record.data['L2DEC'],
L2SEQ:record.data['L2SEQ'],
L2UINVT:record.data['L2UINVT'],
L2ACTIVE:record.data['L2ACTIVE'],
L2AREA:record.data['L2AREA'],
L2CMPKEY:L2CMPKEY,
L2GROUPKEY:L2GROUPKEY,
L2DESCKEY:L2DESCKEY,
L2SEQKEY:L2SEQKEY
},
success: function(response){ var check = response.responseText; if (check){ var data = Ext.util.JSON.decode(response.responseText); if (data.SUCCESS != '1'){
Ext.getBody().unmask(); Ext.Msg.alert('Error','Error updating this record.');
record.reject();
}
else {record.commit();}
}
}, failure: function(){
Ext.getBody().unmask(); Ext.Msg.alert('Failure','Failed to receive a response from server'); record.reject();
}
});
};
var grid = new Ext.grid.GridPanel({
store: dsRef,
region:'center',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-user-add',
text: 'Add Record',
handler: function(){
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'getFieldDefaults',
pgm: 'MLPXREF2'
},
success: function(response){ var check = response.responseText; if (check){ var data = Ext.util.JSON.decode(response.responseText);
if (data.SUCCESS == '1'){
var newRecord = new recordRef({
L2CMP:data.L2CMP,
L2GROUP:data.L2GROUP,
L2DESC:data.L2DESC,
L2LEN:data.L2LEN,
L2AN:data.L2AN,
L2DEC:data.L2DEC,
L2UINVT:data.L2UINVT,
L2SEQ:data.L2SEQ,
L2ACTIVE:data.L2ACTIVE,
L2AREA:data.L2AREA,
L2CMPKEY:data.L2CMP,
L2GROUPKEY:data.L2GROUP,
L2DESCKEY:data.L2DESC,
L2SEQKEY:data.L2SEQ
// start: (new Date()).clearTime(),

});
editor.stopEditing();
dsRef.insert(0, newRecord);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
// addListener({ afteredit:updateRecord });

};
if (data.SUCCESS != '1'){
Ext.Msg.alert('Record defaults not Found.');
record.reject();
Ext.getCmp('editWindow').hide();
};
}
// Ext.getBody().unmask();
},
failure: function(){
Ext.getBody().unmask();
Ext.Msg.alert('Failure','Failed to receive a response from server');
record.reject();
}
});
}
}], columns: [
{
xtype: 'numbercolumn',
header: 'Company No.',
dataIndex: 'L2CMP',
width: 100,
sortable: true,
format: '0',
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 99
}
},{
header: 'Data Group',
dataIndex: 'L2GROUP',
width: 150,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
xtype: 'numbercolumn',
header: 'Sequence Number',
dataIndex: 'L2SEQ',
width: 100,
sortable: true,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 9999
}
},{
header: 'Data Field',
dataIndex: 'L2DESC',
width: 150,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
xtype: 'numbercolumn',
header: 'Field Length',
dataIndex: 'L2LEN',
width: 100,
sortable: true,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 999
}
},{
header: 'Field Type',
dataIndex: 'L2AN',
width: 150,
sortable: true,
editor: {
xtype: 'combo',
autoLoad: true,
triggerAction:'all',
forceSelection:true,
displayField:'text',
valueField:'type',
editable: false,
store: new Ext.data.SimpleStore({
fields: ['type', 'text'],
data: [['A', 'Alpha'], ['N', 'Numeric'], ['D', 'Date'], ['T', 'Time']]
}),
mode: 'local',
allowBlank: false
}
},{
xtype: 'numbercolumn',
header: 'Decimal Positions',
dataIndex: 'L2DEC',
width: 100,
sortable: true,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0,
maxLength: 1
}
},{
xtype: 'booleancolumn',
header: 'Update Inventory?',
dataIndex: 'L2UINVT',
align: 'center',
width: 50,
trueText: 'Y',
falseText: 'N',
editor: {
xtype: 'checkbox',
renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+'> </div>';
}
}
},{
xtype: 'booleancolumn',
header: 'Active?',
dataIndex: 'L2ACTIVE',
align: 'center',
width: 50,
trueText: "A",
falseText: "I",
editor: {
xtype: 'checkbox'
}
}]
});


editor.on({
scope: this,
afteredit: updateRecord

});


var layout = new Ext.Panel({
title: 'Data Setup File Data',
layout: 'border',
layoutConfig: {
columns: 1
},
width: 1600,
height: 600,
items: [grid]
});
layout.render(Ext.getBody());


/* grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});
*/
});
</script>
</head>
<body>
</body>
</html>
sean.lanktree
02-10-2010, 11:52 AM
It does appear that the row editor plugin (at least the one you are using) is specific to 3.1. I did not see getActiveError as an available method in the 3.0 documentation. Any other problems you are having may be related to this as the script will stop functioning once you encounter the error.
ktoole
02-10-2010, 02:52 PM
The error occurs during add only. Can I somehow use 3.1 at this time or should we wait until March 1st?

The update has the problem with the save button and does not hit the getActiveError message. I just can't disable the save button. There must be some value on the DOM or in ExtJS to test if there are errors, that I can use to disable the save button.

The checkbox is unrelated to the errors also. It just will not display a check. This maybe related to 3.1, but I get no error and can't see why it won't display a check mark in the box.
ktoole
03-16-2010, 08:39 AM
I have the new release on and the Row-Editor does work now. It is not working exactly like the demo that ExtJS provides, but it is very close. The only issue I still have is that check boxes still do not work correctly when they load. The check is always not there. I changed the fields to combo boxes, which work fine. Let me know if you try the Row-Editor and how it works for you.