PDA

View Full Version : best way to get form button scope



wisecounselor
25 Nov 2007, 11:54 AM
I am defining a FormPanel inside a Window component, with standard Submit and Cancel type buttons, here is how I did it below. Is this the best way to get the containing form and the containing window, so I can 1) submit the form or 2) close the containing window,or is there a simpler way?

Buttons only:



buttons: [{
text: 'Submit',
disabled: false,
handler: function(){
var f = Ext.getCmp('implantform');
f.form.submit( {reset: true, url:'/itracker/implants/add', waitMsg:'Saving Data...'} );
}
},{
text: 'Cancel',
disabled: false,
handler: function() {
var f = Ext.getCmp('myform');
f.close();
}
}],



var fs = new Ext.Window({
minimizable: true,
maximizable: true,
constrain: true,
manager: windows,
shim:false,
animCollapse:false,
constrainHeader:true,
constrain: true,
renderTo: 'mdi',
layout: 'fit',
autoScroll: true,
width: 400,
height: 400,
id: 'myform',
items: new Ext.FormPanel({
listeners: { actioncomplete: h },
title: 'XML Form',
labelAlign: 'right',
labelWidth: 85,
width: 340,
layout: 'fit',
waitMsgTarget: true,
id: 'implantform',
buttons: [{
text: 'Submit',
disabled: false,
handler: function(){
var f = Ext.getCmp('implantform');
f.form.submit( {reset: true, url:'/itracker/implants/add', waitMsg:'Saving Data...'} );
}
},{
text: 'Cancel',
disabled: false,
handler: function() {
var f = Ext.getCmp('myform');
f.close();
}
}],
// configure how to read the XML Data
reader : new Ext.data.XmlReader({
record : 'contact',
success: '@success'
}, [
{name: 'first', mapping:'name/first'}, // custom mapping
{name: 'last', mapping:'name/last'},
'company', 'email', 'state',
{name: 'dob', type:'date', dateFormat:'m/d/Y'} // custom data types
]
),

// reusable eror reader class defined at the end of this file
//errorReader: new Ext.form.XmlErrorReader(),

items: [{
//new Ext.form.FieldSet({
collapsible: true,
autoHeight: true,
xtype: 'fieldset',
//layout: 'fit',
title: 'Contact Information',
defaultType: 'textfield',
items: [{
fieldLabel: 'Tissue ID',
name: 'data[Implant][tissue_id]',
width:190
}, {
fieldLabel: 'Lot ID',
name: 'data[Implant][lot_id]',
width:190
},

new Ext.form.ComboBox({
fieldLabel: 'Product ID',
hiddenName: 'data[Implant][product_id]',
store: ds,
loadingText: 'Loading...',
valueField: 'product_id',
displayField: 'product_name',
typeAhead: true,
triggerAction: 'all',
emptyText: 'Select a Product...',
selectOnFocus: true,
width:190
}),

new Ext.form.DateField({
fieldLabel: 'Date of Exp.',
name: 'data[Implant][date_of_expiration]',
width:190,
allowBlank:false
})
]
}
]
})
});
}

fs.setSize({height: 400,width:400});
fs.show();

SeaSharp
26 Nov 2007, 1:44 AM
If this is a question about scope, here is how I define my form buttons:


this._submitBtn = new Ext.Button({ text:'Save', handler:this.save, scope:this });

this._form = new Ext.FormPanel({
...
buttons:[this._submitBtn]
});



From inside the this.save() function I could reach other class instance variables that reference the form or container window.