View Full Version : Problem with row editor

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
<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){
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);
case 1:
Ext.MessageBox.alert('Uh uh...','We couldn\'t save him...');
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error,retry later');

// Ext.onReady delays execution until page is fully loaded into memory
// data store
var dsObjects = new Ext.data.JsonStore({
id: 'dsObjects',
autoLoad: true,
url: 'http://server1.vilden.net:9289/rpgui/sse999r',
root: 'employees',
fields: [

// 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,
width: 600,
margins: '0 5 5 5',
plugins: [editor],

var EditorWindow = new Ext.Window({
id: 'EditorWindow',
title: 'Employee Listing',
layout: 'fit',
items: EditorGrid

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

Your example is quite hard to read...

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...

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

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 ...

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)

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 ...

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