[英]Ext.form.Panel, Ext 5, Align Labels and Fields
I am utilizing an Ext.form.Panel , it's configurations are as follows: 我正在使用Ext.form.Panel ,其配置如下:
defaultType : 'textfield',
layout : 'auto',
height : '60%',
width : '40%',
floating : true,
modal : true,
renderTo : Ext.getBody(),
closeAction : 'destroy', // default; invoked via the .close() method
Within this form, I have a number of textfield
type components, each with a corresponding label. 在此表单中,我有许多
textfield
类型的组件,每个组件都有一个相应的标签。 The configuration, beyond their label and name, is identical and is as follows: 除了其标签和名称之外,该配置是相同的,如下所示:
fieldLabel : 'Dimension Label',
name : 'dimensionLabel',
labelWidth : '400px', // to exagerate the label size
padding : '10px'
I would like to align the input fields, not necessarily the label (as demonstrated in this question regarding the .Net Framework); 我想对齐输入字段,不一定标签(如证明这个问题对于.Net框架); however, my input fields are aligning, as follows:
但是,我的输入字段正在对齐,如下所示:
A number of SO posts suggest the labelAlign
configuration for the FormPanel
; 许多SO帖建议
labelAlign
为配置FormPanel
; however, it is not an available configuration for the Ext.form.Panel
in Ext JS 5 (I don't know when it was previously available). 但是,它不是Ext JS 5中
Ext.form.Panel
的可用配置(我不知道它何时可用)。 If I attempt to configure it, the configuration is ignored. 如果我尝试配置它,则忽略配置。 I have tried both on the field and panel level.
我已经在现场和小组层面上进行了尝试。
Is it possible to align the above fields on the left? 是否可以在上方对齐以上字段? Someone else on the Sencha forums suggest utilizing a
fieldset
; 有人在论坛上煎茶其他建议利用
fieldset
; however, this also does not have the above mentioned configuration. 但是,它也没有上述配置。
You can use the form
layout: 您可以使用
form
布局:
This is a layout that will render form Fields, one under the other all stretched to the Container width.
这是一种布局,将呈现表单字段,一个在另一个下全部拉伸到容器宽度。
See working example: https://fiddle.sencha.com/#fiddle/ls5 请参阅工作示例: https : //fiddle.sencha.com/#fiddle/ls5
Alternatively you can use the anchor
layout: 另外,您可以使用
anchor
布局:
This is a layout that enables anchoring of contained elements relative to the container's dimensions.
这是一种布局,可以相对于容器的尺寸锚固所包含的元素。
See working example: https://fiddle.sencha.com/#fiddle/ls7 请参阅工作示例: https : //fiddle.sencha.com/#fiddle/ls7
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.