在ExtJS中,是否可以将文本字段的标签放大到最适合其文本的一行？
labelWidth属性没有自动设置,将其完全保留与指定默认值100相同,这将导致冗长的文本突破多行：
我想让标签尽可能宽地包含整个文本而不包装,可编辑字段填充剩余的可用宽度.
解决方法
您还可以使用Ext.util.TextMetrics来测量标签的长度并相应地设置labelWidth. (见
this fiddle).
var label = 'Changing text with variable length',tm = new Ext.util.TextMetrics(),n = tm.getWidth(label + ":"); //make sure we account for the field separator
Ext.create('Ext.form.Panel',{
bodyPadding: 10,bodyStyle: 'background-color: #cef',items: [{
xtype: 'textfield',emptyText: 'no data',fieldLabel: label,labelWidth: n
}],margin: 25,renderTo: Ext.getBody()
});
如果您需要更通用的解决方案,请查看the example in the comment provided by slemmon in the ExtJS docs.实际上,他的示例创建了文本字段的扩展,它根据标签动态设置标签宽度.这是他的例子：
Ext.define('MyTextfield',{
extend: 'Ext.form.field.Text',xtype: 'mytextfield',initComponent: function () {
var me = this,tm = new Ext.util.TextMetrics();
me.labelWidth = tm.getWidth(me.fieldLabel) + 10;
tm.destroy();
me.callParent(arguments);
}
});
