我有一个表单面板,希望文本字段与其标签保持对齐,但是labelAlign:'right'无效,文本字段被居中对齐。
这是我的代码:
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