Ext.namespace('com.domorewithsage.mock');


com.domorewithsage.mock.CustomerFormPanel = Ext.extend(Ext.FormPanel, {



    initComponent : function()
    {
        Ext.apply(this, {
            layout : 'column',
            items  : [{
                columnWidth : 0.4,
                border      : false,
                bodyStyle   : 'padding:10px',
                items  : [{
                    autoHeight     : true,
                    style          : 'margin-bottom:10px',
                    xtype          : 'fieldset',
                    checkboxToggle : false,
                    title          : 'Account Details',
                    items          : [
                        new Ext.form.ComboBox({
                            fieldLabel    : 'A/C',
                            store         : [],
                            triggerAction : 'all',
                            editable      : false,
                            width         : 180
                        }),
                        new Ext.form.TextField({
                            fieldLabel : 'Name',
                            width      : 180
                        }),
                        new Ext.form.TextField({
                            fieldLabel : 'Balance',
                            value      : '0.0',
                            width      : 180
                        })
                    ]
                }, {
                    autoHeight     : true,
                    xtype          : 'fieldset',
                    checkboxToggle : false,
                    title          : 'Address',
                    items          : [
                        new Ext.form.TextArea({
                            height         : 110,
                            labelSeparator : '',
                            fieldLabel     : '<span style="line-height:20px;">Street1</span><br />'+
                                             '<span style="line-height:20px;">Street2</span><br />'+
                                             '<span style="line-height:20px;">Town</span><br />'+
                                             '<span style="line-height:20px;">Country</span><br />'+
                                             '<span style="line-height:20px;">Post Code</span>',
                            width          : 180
                        }),
                        new Ext.form.ComboBox({
                            fieldLabel    : 'Country',
                            store         : ['United Kingdom', 'Germany', 'United States of America'],
                            value         : 'United Kingdom',
                            triggerAction : 'all',
                            editable      : false,
                            width         : 180
                        }),
                        new Ext.form.TextField({
                            fieldLabel : 'VAT Number',
                            width      : 180
                        })
                    ],
                    buttons : [{
                        text : 'Delivery Addresses...'
                    }]

                }]
            }, {
                columnWidth : 0.4,
                border      : false,
                bodyStyle   : 'padding:10px',
                items  : [{
                    xtype          : 'fieldset',
                    autoHeight     : true,
                    style          : 'margin-bottom:10px',
                    checkboxToggle : false,
                    title          : 'Contact Information',
                    items          : [
                        new Ext.form.TextField({
                            fieldLabel : 'Contact name',
                            width      : 180
                        }),
                        new Ext.form.TextField({
                            fieldLabel : 'Trade contact',
                            width      : 180
                        }),
                        new Ext.form.TriggerField({
                            fieldLabel     : 'Telephone',
                            width          : 180,
                            triggerClass   : 'x-form-browse-trigger'
                        }),
                        new Ext.form.TriggerField({
                            fieldLabel     : 'Telephone 2',
                            width          : 180,
                            triggerClass   : 'x-form-browse-trigger'
                        }),
                        new Ext.form.TextField({
                            fieldLabel : 'Fax',
                            width      : 180
                        }),
                        new Ext.form.TriggerField({
                            fieldLabel     : 'Website',
                            width          : 180,
                            triggerClass   : 'x-form-browse-trigger'
                        })
                    ]
                }, {
                    xtype          : 'fieldset',
                    autoHeight     : true,
                    checkboxToggle : false,
                    title          : 'e-Mail Settings',
                    items          : [
                        new Ext.form.TriggerField({
                            fieldLabel     : 'e-Mail',
                            width          : 180,
                            onTriggerClick : function() {
                                // called in the scope of the trigger
                                location.href = 'mailto:'+ (this.getValue() ? this.getValue() : '');
                            },
                            triggerClass   : 'x-form-browse-trigger'
                        }),
                        new Ext.form.Checkbox({
                            labelSeparator : '',
                            ctCls          : 'spanningCheckbox',
                            labelStyle     : 'padding-left:0px;width:0px',
                            boxLabel       : 'I send invoices to this customer electronically'
                        })
                    ]
                }]
            }]
        });

        Ext.applyIf(this, {
            title : 'Details'
        });

        com.domorewithsage.mock.CustomerFormPanel.superclass.initComponent.call(this);
    }


});