I have a form panel and I want the text fields to attach to their labels, but labelAlign: "right" does not work, and the text fields are centered
here is my code:
Ext.ns('Tunkv.forms'); Tunkv.forms.user_settings = Ext.extend(Ext.form.FormPanel, { // i inserted labelAlign here,maybe the wrong place??? labelAlign : 'right', labelWidth : 80, layout:'form' ,border:false ,frame:true ,url:'index.php?option=com_Tunkv&c=doctor&task=saveProfile&format=raw' ,constructor:function(config) { config = config || {}; config.listeners = config.listeners || {}; Ext.applyIf(config.listeners, { actioncomplete:function() { if(console && console.log) { console.log('actioncomplete:', arguments); } } ,actionfailed:function() { if(console && console.log) { console.log('actionfailed:', arguments); } } }); Tunkv.forms.user_settings .superclass.constructor.call(this, config); } ,initComponent:function() { var timezones = new Ext.data.SimpleStore({ fields: ['id', 'timezone'], data : [<?php echo $this->zonesdata; ?>] }); var joomlaEditors = new Ext.data.SimpleStore({ fields: ['id', 'editor'], data : [<?php echo $this->editors; ?>] }); var languages = new Ext.data.SimpleStore({ fields: ['id', 'language'], data : [<?php echo $this->languages; ?>] }); var ext_templates = new Ext.data.SimpleStore({ fields: ['id', 'ext_template'], data : [<?php echo $this->ext_template; ?>] }); // hard coded - cannot be changed from outside var config = { items: [{ xtype: 'textfield', fieldLabel: 'Name', name: 'name', allowBlank: false, value: '<?php echo $user->name; ?>', maxLength: 32, maxLengthText: 'Maximum name length is 36 characters.', msgTarget:'side' },{ xtype: 'textfield', fieldLabel: 'Username', name: 'username', minLength: 2, maxLength: 32, minLengthText:'Username must be at least 2 characters long. ', maxLengthText: 'Maximum username length is 36 characters.', value: '<?php echo $user->username; ?>', allowBlank : false, msgTarget:'under' },{ xtype: 'textfield', inputType: 'password', fieldLabel: 'Password', name: 'password', minLength: 6, maxLength: 32, minLengthText: 'Password must be at least 6 characters long.', maxLengthText: 'Maximum Password length is 36 characters.', msgTarget:'under' },{ xtype: 'textfield', fieldLabel: 'Email', name: 'email', vtype: 'email', allowBlank : false, value: '<?php echo $user->email; ?>', msgTarget:'under' },{ xtype: 'combo', name: 'joomlaeditor', fieldLabel: 'Editor', mode: 'local', store: joomlaEditors, displayField:'editor', value: '<?php echo $user->getParam ( 'editor' ); ?>', msgTarget:'under' },{ xtype: 'combo', name: 'language', fieldLabel: 'Language', mode: 'local', store: languages, displayField:'language', value: '<?php echo $user->getParam ( 'language' ); ?>', msgTarget:'under' },{ xtype: 'combo', name: 'timezone', fieldLabel: 'Timezone', mode: 'local', store: timezones, displayField:'timezone', value: '<?php echo $user->getParam ( 'timezone' ); ?>' , msgTarget:'under' },{ xtype: 'combo', name: 'ext_template', fieldLabel: 'Skin', mode: 'local', store: ext_templates, displayField:'ext_template', value: '<?php echo $user->getParam ( 'ext_template' ); ?>' ,msgTarget:'under' },{ xtype: 'hidden', fieldLabel: '<?php echo JUtility::getToken (); ?>', name: '<?php echo JUtility::getToken (); ?>', value: '<?php echo JUtility::getToken (); ?>', hideLabel:true }] ,buttons:[{ text:'Submit' ,formBind:true ,scope:this ,handler:this.submit }] }; // eo config object // apply config Ext.apply(this, Ext.apply(this.initialConfig, config)); // call parent Tunkv.forms.user_settings .superclass.initComponent.apply(this, arguments); } // eo function initComponent /** * Form onRender override */ ,onRender:function() { // call parent Tunkv.forms.user_settings .superclass.onRender.apply(this, arguments); // set wait message target this.getForm().waitMsgTarget = this.getEl(); } // eo function onRender /** * Submits the form. Called after Submit buttons is clicked * @private */ ,submit:function() { this.getForm().submit({ url:this.url ,scope:this ,success:this.onSuccess ,failure:this.onFailure //,params:{cmd:'save'} ,waitMsg:'Saving...' }); } // eo function submit /** * Success handler * @param {Ext.form.BasicForm} form * @param {Ext.form.Action} action * @private */ ,onSuccess:function(form, action) { Ext.Msg.show({ title:'Success' ,msg:'Form submitted successfully' ,modal:true ,icon:Ext.Msg.INFO ,buttons:Ext.Msg.OK }); } // eo function onSuccess /** * Failure handler * @param {Ext.form.BasicForm} form * @param {Ext.form.Action} action * @private */ ,onFailure:function(form, action) { this.showError(action.result.error || action.response.responseText); } // eo function onFailure /** * Shows Message Box with error * @param {String} msg Message to show * @param {String} title Optional. Title for message box (defaults to Error) * @private */ ,showError:function(msg, title) { title = title || 'Error'; Ext.Msg.show({ title:title ,msg:msg ,modal:true ,icon:Ext.Msg.ERROR ,buttons:Ext.Msg.OK }); } // eo function showError }); // eo extend // register xtype Ext.reg('settingsform', Tunkv.forms.user_settings ); // invalid markers to sides Ext.form.Field.prototype.msgTarget = 'side'; // create and show window var userSettingsWindow = new Ext.Window({ title: 'Settings panel' ,layout:'fit' ,width:800 ,height:520 ,closable:true ,items:{id:'formloadsubmit-form', xtype:'settingsform'} }); // eof