2011-03-11 33 views
4

我有一個表格面板和我想的文本字段堅持自己的標籤,但labelAlign:「正確」不能正常使用文本字段中心對齊labelAlign:「權利」不是我的ExtJS的工作形成

這裏我的代碼:

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 
+1

你包括任何自定義CSS? – JamesHalsall 2011-03-11 16:46:09

回答

7
labelAlign : 'right' 

控制中的fieldLabel的位置和取向,並應被插入字段集配置對象,而不是內部形成配置對象。

例如:

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

而且您還需要將該字段包含在formpanel中才能使labelAlign具有任何效果。 – 2016-03-09 13:33:56

0

爲的xtype 「單選」,在右邊的標籤不起作用。你可以看看(最新的代碼)。我發現可以是一個解決方法,而不是使用fieldLabel,而是使用boxLabel代替單選按鈕。我希望他們儘快修復這個惱人的bug。

2

如果有人正在尋找一種方法來在球場上
(常見的複選框)使用屬性是正確的「位置」標籤:

boxLabel: 'Some text AFTER the field', 
+0

謝謝你讓我的一天;) – malko 2013-08-14 10:06:54