PDA

View Full Version : Form submission in extended FormPanel



acoker2009
23 Dec 2009, 8:47 AM
LI.PropertyForm = Ext.extend(Ext.FormPanel, {
border: false,
initComponent: function() {
var parentForm = this;

var fieldset1 = {
xtype: 'fieldset',
title: 'Property Information',
flex: 1,
border: false,
labelWidth: 100,
defaultType: 'field',
defaults: {
anchor: '-10',
allowBlank: false,
msgTarget: 'side'
},
items: [{
fieldLabel: 'Name / Number',
name: 'namenumber',
allowBlank: false
},
{
fieldLabel: 'Street',
name: 'address1'
},
{
name: 'address2'
}]
};

var fieldset2 = Ext.apply({},
{
flex: 1,
title: ' ',
items: [{
fieldLabel: 'Town',
name: 'town'
},
{
fieldLabel: 'County',
name: 'county'
},
{
fieldLabel: 'Post Code',
name: 'postcode',
anchor: '75%',
regex: /^([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9]?[A-Za-z])))) [0-9][A-Za-z]{2})$/i,
regexText: 'Not a valid postcode!'
}]
},
fieldset1);

var fieldsetContainer = {
xtype: 'container',
layout: 'hbox',
height: 120,
layoutConfig: {
align: 'stretch'
},
items: [fieldset1, fieldset2]
};

var tabs = [{
xtype: 'container',
title: 'Details',
layout: 'form',
bodyStyle: 'padding:6px 6px 0',
defaults: {
xtype: 'numberfield',
width: 230
},
items: [{
fieldLabel: 'Bathrooms',
name: 'bathrooms'
},
{
fieldLabel: 'Loft',
name: 'loft'
},
{
fieldLabel: 'Conservatory',
name: 'conservatory'
},
{
fieldLabel: 'Garages',
name: 'garages'
},{
fieldLabel: 'Picture',
name: 'picture',
inputType: 'file'
}]
},
{
title: 'Notes',
xtype: 'htmleditor',
name: 'notes',
height: 200
}];

var tabPanel = {
xtype: 'tabpanel',
activeTab: 0,
deferredRender: false,
layoutOnTabChange: true,
border: false,
flex: 1,
plain: true,
items: tabs
};

var onSuccessOrFail = function(form, action) {
parentForm.el.unmask();

var result = action.result;
if (result.success) {
//Ext.MessageBox.alert('Success',action.result.msg);
}
else {
// If not specified this is handled by Ext.Direct.on('exception') in viewport
//Ext.MessageBox.alert('Failure',action.result.msg);
}
};

var tbar = {
buttons: [
{
text: 'New',
icon: '/skin/standard/img/icons/fam/page_add.png'
},{
text: 'Save',
icon: '/skin/standard/img/icons/fam/disk.png',
handler: function(btn){
parentForm.el.mask('Saving...', 'x-mask-loading');
parentForm.getForm().submit({
failure: onSuccessOrFail,
success: onSuccessOrFail
});
}
},{
text: 'Open',
icon: '/skin/standard/img/icons/fam/folder_page.png'
},{
text: 'Delete',
icon: '/skin/standard/img/icons/fam/page_delete.png'
}
]
};

var config = {
title: 'Property Form',
//defaultType: 'textfield',
bodyStyle: 'padding: 5px',
layout: 'form',
labelWidth: 100,
layoutOnTabChange: true,
items: [fieldsetContainer, tabPanel],
tbar: tbar,
api: {
// The server-side method to call for load() requests
//load: LID.Property.load,
// The server-side must mark the submit handler as a 'formHandler'
submit: LID.PropertyAdd.add
}
}; // eo config object


// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

LI.PropertyForm.superclass.initComponent.apply(this, arguments);

} // eo function initComponent

,
onRender: function() {

LI.PropertyForm.superclass.onRender.apply(this, arguments);
} // eo function onRender
});

Ext.reg('propertyform', LI.PropertyForm);


The above code is what I am using to extend a FormPanel, add fields and submit using Ext.Direct. I can't get the form to do client side validation. I can pass errors back using my PHP Direct server side validation, but I want to be able to validate the form on the client side before I submit it. You can see that I have regular expression in the postcode field to check for valid UK postcodes - this is never being run?

I must be missing something obvious? This is my first real experience extending Ext components - is it something to do with that? :s