PDA

View Full Version : Row-Editor


ktoole
01-27-2010, 06:46 AM
I am having a problem getting the row-editor example from ExtJS's web site to work for the Valence data coming in. I have the data store loading correctly, I checked with Firebug, but the data does not display on the screen and I can't figure out why it won't. The code from their example does work, but when I change it to what I am working with it displays the headings for the data and loads the store correctly, but no data shows up on the screen. What did I miss? Here is the code:


<!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(){
Ext.QuickTips.init();

var recordRef = Ext.data.Record.create(['LXCMP','LXGROUP','LXFILD','LXDESC','LXLEN','LXAN' ,'LXDEC','LXUINVT','LXSEQ','LXACTIVE','LXAREA',
'LXCCTD','LXCCTT','LXCCTU','LXLCGD','LXLCGT','LXLC GU']);

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(){
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: [
new Ext.grid.RowNumberer(),
{
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
}
},{
xtype: 'numbercolumn',
header: 'Field Length',
dataIndex: 'LXLEN',
width: 100,
sortable: true,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 999
}
},{
header: 'Field Type',
dataIndex: 'LXAN',
width: 150,
sortable: true,
editor: {
xtype:'textfield'
}
/* editor: {
xtype: 'combobox',
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: 'LXDEC',
width: 100,
sortable: true,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 9
}
},{
xtype: 'booleancolumn',
header: 'Update Inventory?',
dataIndex: 'LXUINVT',
align: 'center',
width: 50,
trueText: 'Y',
falseText: 'N',
editor: {
xtype: 'checkbox'
}
},{
xtype: 'numbercolumn',
header: 'Sequence Number',
dataIndex: 'LXSEQ',
width: 100,
sortable: true,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 9999
}
},{
xtype: 'booleancolumn',
header: 'Active?',
dataIndex: 'LXACTIVE',
align: 'center',
width: 50,
trueText: 'Y',
falseText: 'N',
editor: {
xtype: 'checkbox'
}
},{
xtype: 'datecolumn',
header: 'Last Change Date',
dataIndex: 'LXCCTD',
format: 'm/d/Y',
width: 100,
sortable: true,
groupRenderer: Ext.util.Format.dateRenderer('M y'),
editable: false
},{
xtype: 'numbercolumn',
header: 'Last Change Time',
dataIndex: 'LXCCTT',
width: 100,
sortable: true,
editable: false
},{
header: 'Last Change User',
dataIndex: 'LXCCTU',
width: 100,
sortable: true,
editable: false
},{
xtype: 'datecolumn',
header: 'Last Change Date',
dataIndex: 'LXLCGD',
format: 'm/d/Y',
width: 100,
sortable: true,
groupRenderer: Ext.util.Format.dateRenderer('M y'),
editable: false
},{
xtype: 'numbercolumn',
header: 'Last Change Time',
dataIndex: 'LXLCGT',
width: 100,
sortable: true,
editable: false
},{
header: 'Last Change User',
dataIndex: 'LXLCGU',
width: 100,
sortable: true,
editable: false
}]
});

/* editor.on({
scope: this,
afteredit: function(grid, changes, record, rowIndex), {
Ext.Ajax.request({
url: vvcall.pgm,
params: {
action: 'updateRecord',
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');
}
});

})
}
})
*/

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
01-27-2010, 08:24 AM
Can you post up the full JSON response data from Firebug coming from the getRecords action of MLPXREF2?
ktoole
01-27-2010, 12:05 PM
Here is the JSON data that comes back as show in FireBug:

{"totalCount":8.00000,"autogrid":[{"LXCMP":1,"LXGROUP":"GROUP2","LXFILD":1,"LXDESC":"","LXLEN":1,"LXAN":"A","LXDEC":0,"LXUINVT":"N","LXSEQ":10,"LXACTIVE":"A","LXAREA":"B","LXCCTD":20100111,"LXCCTT":115728,"LXCCTU":"KTOOLE","LXLCGD":20100111,"LXLCGT":115728,"LXLCGU":"KTOOLE"},{"LXCMP":1,"LXGROUP":"GROUP3","LXFILD":1,"LXDESC":"ABC","LXLEN":1,"LXAN":"A","LXDEC":0,"LXUINVT":"N","LXSEQ":10,"LXACTIVE":"A","LXAREA":"B","LXCCTD":20100111,"LXCCTT":115728,"LXCCTU":"KTOOLE","LXLCGD":20100111,"LXLCGT":115728,"LXLCGU":"KTOOLE"},{"LXCMP":1,"LXGROUP":"test","LXFILD":0,"LXDESC":"test2","LXLEN":1,"LXAN":"N","LXDEC":1,"LXUINVT":"N","LXSEQ":20,"LXACTIVE":"N","LXAREA":"H","LXCCTD":0,"LXCCTT":0,"LXCCTU":"","LXLCGD":20100107,"LXLCGT":93744,"LXLCGU":"KTOOLE"},{"LXCMP":1,"LXGROUP":"test","LXFILD":0,"LXDESC":"test","LXLEN":2,"LXAN":"F","LXDEC":1,"LXUINVT":"","LXSEQ":30,"LXACTIVE":"N","LXAREA":"L","LXCCTD":0,"LXCCTT":0,"LXCCTU":"","LXLCGD":20100107,"LXLCGT":93504,"LXLCGU":"KTOOLE"},{"LXCMP":1,"LXGROUP":"test","LXFILD":0,"LXDESC":"test3","LXLEN":1,"LXAN":"A","LXDEC":0,"LXUINVT":"","LXSEQ":0,"LXACTIVE":"F","LXAREA":"B","LXCCTD":0,"LXCCTT":0,"LXCCTU":"","LXLCGD":0,"LXLCGT":0,"LXLCGU":""},{"LXCMP":1,"LXGROUP":"test","LXFILD":0,"LXDESC":"tes","LXLEN":3,"LXAN":"A","LXDEC":0,"LXUINVT":"","LXSEQ":0,"LXACTIVE":"N","LXAREA":"G","LXCCTD":0,"LXCCTT":0,"LXCCTU":"","LXLCGD":0,"LXLCGT":0,"LXLCGU":""},{"LXCMP":1,"LXGROUP":"test","LXFILD":0,"LXDESC":"tet","LXLEN":5,"LXAN":"N","LXDEC":0,"LXUINVT":"","LXSEQ":0,"LXACTIVE":"Y","LXAREA":"G","LXCCTD":0,"LXCCTT":0,"LXCCTU":"","LXLCGD":0,"LXLCGT":0,"LXLCGU":""},{"LXCMP":1,"LXGROUP":"test","LXFILD":1,"LXDESC":"testddd","LXLEN":1,"LXAN":"N","LXDEC":0,"LXUINVT":"N","LXSEQ":10,"LXACTIVE":"A","LXAREA":"F","LXCCTD":20100108,"LXCCTT":110123,"LXCCTU":"KTOOLE","LXLCGD":20100108,"LXLCGT":110123,"LXLCGU":"KTOOLE"}]}
sean.lanktree
01-27-2010, 12:09 PM
It appears your root specified in the HTML does not match the root being sent back to the browser. Change your RPG program from:



vvOut.root = 'autoGrid';


To....



vvOut.root = 'MLPXREF'
sean.lanktree
01-27-2010, 12:12 PM
Additionally, if the your vvOut.object is already based on MLPXREF, you can simply omit the vvOut.root line in your program. If vvOut.root is not specified, it will just send back the name of the object as the root.
ktoole
01-27-2010, 12:29 PM
Thanks...that worked. I just took out the root that I had copied in from another area. I didn't realize the JSON data was showing the root name.