PDA

View Full Version : chicken and egg



nickweavers
11 Nov 2009, 5:49 PM
I have used a nice example from the book Ext JS 3.0 Cookbook (page 218) of what the author calls a "Master details view" with a grid and a form. My implementation is shown in an attachment below.

I hit a problem when I wanted to use the form to allow full record updates or creation of new records and needed buttons that performed actions on the form such as submit and reset.

The way the author creates the component is to use an Ext.formPanel as shown in the example below


var personForm = new Ext.FormPanel ({
id: 'personForm',
frame: true,
labelAlign: 'left',
title: 'Person form',
bodyStyle: 'padding: 5px',
width: 750,
layout: 'column',
url: 'index.php',
baseParams: {
option: 'com_opsuk-backoffice',
view: 'persons',
layout: 'updatePersonRecord',
format: 'raw'
},
items: [{
columnWidth: 0.5,
items: [grid]
}, fieldset]
});

The fieldset is configured as below


var fieldset = {
xtype: 'fieldset',
labelWidth: 90,
title: 'Person details',
defaults: { width: 230 },
defaultType: 'textfield',
autoHeight: true,
bodyStyle: Ext.isIE ? 'padding: 0 0 5px 15px;' : 'padding: 10px 15px;',
buttons: [{
text: 'Save',
handler: function() {
personForm.getform().submit({
success: function(f, a) {
Ext.Msg.alert('Success', 'It worked');
},
failure: function(f, a) {
Ext.Msg.alert('Warning', 'Error');
}
});
}
}, {
text: 'Reset',
handler: function() {
personForm.getform().reset();

}
}],
items: [{
id: 'id_person_ref',
fieldLabel: 'PersonID',
name: 'id_person_ref',
disabled: true
},{
id: 'id_person',
name: 'id_person',
hidden: true
},{
id: 'first_name',
fieldLabel: 'First name',
name: 'first_name'
},{
id: 'initials',
fieldLabel: 'Initials',
name: 'initials'
},{
id: 'last_name',
fieldLabel: 'Last name',
name: 'last_name'
},{

The problem I have is that when I click a button I get the following error: "personForm.getform is not a function" as shown by Firebug (see attachment below).
Is this a scope error? What do I have to do to fix it?

evant
11 Nov 2009, 6:09 PM
getForm

nickweavers
11 Nov 2009, 6:16 PM
getForm

Thank you kindly :">

(Time to get myself a copy of jslint I think)

Animal
12 Nov 2009, 1:16 AM
This code is wrong:



items: [{

columnWidth: 0.5,

items: [grid]

}, fieldset]



Ity should be


items: [grid, fieldset]


Where the grid was configured with columnWidth: 0.5

nickweavers
14 Nov 2009, 8:40 AM
items: [grid, fieldset]

This code produces the appearance shown in the first attachment.


items: [{
columnWidth: 0.5,
items: [grid]
}, fieldset]

This code produces the appearance shown in the second attachment.

Mr Ramon says he takes this code from Sakila's sample database.

The "columnWidth: 0.5" seems to generate a 2 column layout with each column getting 50% of the width. I don't know enough about how the formPanel works to know if that is possible. I just say what I see.

For my education, could you elaborate on why it is wrong, and comment on why it appears to work?