在ExtJS中,是否可以使文本字段的标签大小最优化地适合一行文本?
labelWidth
属性没有自动设置,完全省略它与指定默认值100具有相同的效果,这将导致冗长的文本分成多行。
我希望标签的宽度可以刚好容纳整个文本内容,不换行,并且可编辑字段填满其余可用宽度。labelWidth
属性没有自动设置,完全省略它与指定默认值100具有相同的效果,这将导致冗长的文本分成多行。
我希望标签的宽度可以刚好容纳整个文本内容,不换行,并且可编辑字段填满其余可用宽度。对我来说是这样的:
labelWidth: 300
或者为了使 autosize,您可以尝试这样做:
// anchor: '100%',
labelStyle: 'white-space: nowrap;'
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()
});
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);
}
});
TextMetrics
预先计算labelWidth
并直接设置在配置中时,一切都正常。这正是我要寻找的东西。 - GOTO 0textMetrics = new Ext.util.TextMetrics();
component.labelWidth =
textMetrics.getWidth
(component.fieldLabel + component.labelSeparator) +
component.labelPad;
textMetrics.destroy();
- codelion您可以将标签宽度设置为自动。尝试这样做:
labelWidth: false,
labelStyle: 'width: auto'
你也可以尝试一下
width: '100%'
一个简单的解决方案,可以在你的整个应用程序中都有所帮助,就是覆盖 'onRender' 事件。使用 Ext.util.TextMetrics 来计算文本宽度:
(这里是 radiogroup 的示例)
Ext.define('NG.override.form.field.Radio', {
override: 'Ext.form.field.Radio',
autoBoxLabelWidth: false,
onRender: function () {
var me = this,
boxlabelWidth;
me.callParent(arguments);
me.renderActiveError();
if (me.autoBoxLabelWidth) {
me.tm = new Ext.util.TextMetrics(me.getEl());
boxlabelWidth = me.tm.getWidth(me.boxLabel) + Ext.Number.from(me.autoBoxLabelWidth, 0);
me.setWidth(boxlabelWidth);
}
}
});
然后将属性 'autoBoxLabelWidth' 设置为 'true' 或要添加的像素数:
xtype: 'radiogroup',
fieldLabel: 'Two Columns',
columns: 2,
vertical: true,
items: [{
boxLabel: 'Item 1',
name: 'rb',
autoBoxLabelWidth: true,
inputValue: '1'
}, {
boxLabel: 'Item 2',
name: 'rb',
autoBoxLabelWidth: 15,
inputValue: '2',
checked: true
}]