PDA

View Full Version : Problem with row editor



davisty
29 Apr 2010, 12:50 PM
Hi, Im a newbie at extJs

Im trying to use the row editor, Im getting a JS error. Firebug is telling me setWidth is not a function and kaboom. Im not sure what Im doing wrong . Any help is most appreciated. Here is my code. It works without the row-editor ...
Ps.. Please dont laugh. Im an AS/400 RPGILE developer, trying to learn this
<html>
<head>
<title>Edit Employees - Example</title>

<link rel="stylesheet" type="text/css" href="/js/ext-all.css (http://www.extjs.com/forum/view-source:http://server1.vilden.net:9289/js/ext-all.css)" />
<script type="text/javascript" src="/js/ext-base.js (http://www.extjs.com/forum/view-source:http://server1.vilden.net:9289/js/ext-base.js)"></script>
<script type="text/javascript" src="/js/ext-all.js (http://www.extjs.com/forum/view-source:http://server1.vilden.net:9289/js/ext-all.js)"></script>
<script type="text/javascript" src="/js/RowEditor.js (http://www.extjs.com/forum/view-source:http://server1.vilden.net:9289/js/RowEditor.js)"></script>
<script type="text/javascript">

function saveEmployee(oGrid_event){
Ext.Ajax.request({
waitMsg: 'Please wait...',
url: 'http://server1.vilden.net:9289/rpgui/SSE9999',
method: 'GET',
params: {
task: 'UPDATE',
EmployeeId: oGrid_event.record.data.EmployeeId,
EmpLname: oGrid_event.record.data.EmpLname,
EmpFname: oGrid_event.record.data.EmpFname,
EmpHdate: oGrid_event.record.data.EmpHdate
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1:
dsObjects.commitChanges();
dsObjects.reload();
break;
default:
Ext.MessageBox.alert('Uh uh...','We couldn\'t save him...');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error,retry later');
}
});
}

// Ext.onReady delays execution until page is fully loaded into memory
Ext.onReady(function()
{
Ext.QuickTips.init();
// data store
var dsObjects = new Ext.data.JsonStore({
id: 'dsObjects',
autoLoad: true,
url: 'http://server1.vilden.net:9289/rpgui/sse999r',
root: 'employees',
fields: [
'EmployeeId',
'EmpLname',
'EmpFname',
'EmpHdate',
]});

// column model
var colModelObjects = new Ext.grid.ColumnModel([
{header: "Emp Id", sortable: true, width: 50, dataIndex: 'EmployeeId'},
{header: 'Last Name',
dataIndex: 'EmpLname',
sortable: true,
width: 80,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})},
{header: 'First Name',
dataIndex: 'EmpFname',
width: 80,
sortable: true,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})},
{header: 'Hire Date',
dataIndex: 'EmpHdate',
width: 80,
sortable: true,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 10,
maskRe: /([a-zA-Z0-9\s]+)$/
})}
]);

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

var EditorGrid = new Ext.grid.GridPanel({
id: 'EditorGrid',
store: dsObjects,
cm: colModelObjects,
enableColLock:false,
width: 600,
region:'center',
margins: '0 5 5 5',
plugins: [editor],
clicksToEdit:2,
});

var EditorWindow = new Ext.Window({
id: 'EditorWindow',
title: 'Employee Listing',
closable:true,
width:700,
height:350,
plain:true,
layout: 'fit',
items: EditorGrid
});
dsObjects.load();
EditorWindow.show();
editor.on('afteredit',saveEmployee);
});
</script>
</head>
<body>
</body>
</html>

Sgt.Pepper
30 Apr 2010, 12:58 AM
Please use code tags and a pretty printer, when posting code.

Your example is quite hard to read...

Sgt.Pepper
30 Apr 2010, 1:06 AM
BTW: that code works perfectly for me. The only things I changed were the <script> tags. You might have a wrong path in there...

davisty
30 Apr 2010, 4:12 AM
Ok, Im not sure what pretty print is, or code tags? But I'll find out ...

By changing script tags you mean, the js path?

Thank You Sgt Pepper

davisty
30 Apr 2010, 5:01 AM
I think I found the problem. Our ext-all.js and ext-base.js are at 3.1.1 and RowEditor.js is at 3.2.1.

I pretty sure that's the issue. But, can you please post your version of the script?

Thank You for all your help, it is MOST appreciated ...

Sgt.Pepper
30 Apr 2010, 7:16 AM
Yes I meant the js path.

The row editor can be found within the ext distribution, so you should be able to take the correct version of RowEditor. Look at [path-to-your-ext-version]/examples/ux/RowEditor.js


Ok, Im not sure what pretty print is, or code tags? But I'll find out ...Are you are making a joke on me? Man, that AS/400 life must be hard :)


Prettyprint: http://en.wikipedia.org/wiki/Prettyprint
Code Tags: If you post source code, like the HTML and JavaScript code in your first post, surround them with [CODE]-Tags. Just look into the toolbar of the editor, when you type your post... (click on go advanced, if you can't see a toolbar)

davisty
30 Apr 2010, 7:22 AM
No joke, honest. We have all kind of forms of printing though. Dozens ...

It was a simple version mismatch problem. I found it when you mentioned that you were able to run it. That's what turned the light on ...

LostSoul
30 Apr 2010, 12:57 PM
to make the code look good when pasting first go to http://jsbeautifier.org/ then post in your code and beautify it and copy and past here in the code tags, your code will look great and make it much more readable