我有一个面板,布局是hbox,我有两个textfileds作为面板的项目。
执行时我无法查看fieldLabels。请找到代码
Ext.onReady(function(){
var panel = new Ext.Panel({
title:"HBox Panel",
layout:'hbox',
width:300,
height:200,
renderTo:document.body,
items:[
{
xtype:"textfield",
fieldLabel:"Label1"
},
{
xtype:"textfield",
fieldLabel:"Label2"
}
]
});
});
注意:我正在使用Ext 3.2.1
答案 0 :(得分:2)
您的布局应为form
。来自api documentation:
仅当此组件由a呈现时,才会使用fieldLabel 配置 已配置为使用FormLayout布局的容器 经理(例如Ext.form.FormPanel或指定布局:'表格')。
答案 1 :(得分:1)
如前所述,fieldLabel
选项仅适用于表单布局上下文(通常由表单面板提供)。
作为快速解决方法,您可以在BoxComponent
中显示标签:
Ext.onReady(function() {
var panel = new Ext.FormPanel({
title: "HBox Panel",
layout: 'hbox',
width: 300,
height: 200,
renderTo: document.body,
items: [{
xtype: 'box'
,html: '<label class="x-form-item-label" style="width: auto; margin: 0 5px;">'
+ 'Label 1:</label>'
,cls: 'x-form-item'
},{
xtype: "textfield"
},{
xtype: 'box'
,html: '<label class="x-form-item-label" style="width: auto; margin: 0 5px;">'
+ 'Label 2:</label>'
,cls: 'x-form-item'
},{
xtype: "textfield"
}]
});
});
当然,为自定义样式创建CSS类会更加清晰,甚至可以从BoxComponent
扩展新组件。
您还可以在父面板的initComponent
方法中概括此逻辑,以便为已配置的fieldLabel
字段中的标签创建框组件(这样您也可以设置for
} label
标记的属性,因为您此时将知道生成的id
字段组件。
答案 2 :(得分:0)
将布局类型更改为form,
Ext.onReady(function(){
var panel = new Ext.Panel({
title:"HBox Panel",
layout:'form',
width:300,
height:200,
renderTo:document.body,
items:[
{
xtype:"textfield",
fieldLabel:"Label1"
},
{
xtype:"textfield",
fieldLabel:"Label2"
}
]
});
});