Question

I have a form panel and i want text fields stick to their labels but labelAlign:’right’ isn’t working and text fields are aligned centrally

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

Answer 1

labelAlign : 'right'

Controls the position and alignment of the fieldLabel and should be inserted into fieldset config object and not inside forms config object.

For example:

{
    xtype: 'combo',
    name: 'ext_template',
    fieldLabel: 'Skin',
    mode: 'local',
    store: ext_templates,
    displayField:'ext_template',
    value: 'value',
    msgTarget:'under',
    labelAlign : 'right'
}