javascript 在 ExtJS 中自动调整文本字段标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18791661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Autosizing textfield label in ExtJS
提问by GOTO 0
In ExtJS, is it possible to have the label of a textfield optimally sized to fit its text in one line?
在 ExtJS 中，是否可以将文本字段的标签调整为最佳大小以适合一行中的文本？
The labelWidthproperty doesn't have an autosetting, and leaving it out completely has same effect as specifying the default value 100, which will cause a lengthy text to break over multiple lines:
该labelWidth属性没有自动设置，完全省略它与指定默认值 100 的效果相同，这将导致冗长的文本分成多行：
I would like to have the label just as wide as it takes to contain the whole text without wrapping, and the editable field fill up the rest of the available width.
我希望标签的宽度与包含整个文本而无需换行一样宽，并且可编辑字段填充可用宽度的其余部分。
采纳答案by Towler
You could also use Ext.util.TextMetricsto measure the length of your label and set the labelWidthaccordingly. (See this fiddle).
您还可以使用Ext.util.TextMetrics来测量标签的长度并相应地设置labelWidth。（见这个小提琴）。
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()
});
If you need a more general solution, take a look at the example in the comment provided by slemmon in the ExtJS docs. Essentially, his example creates an extension of the text field which dynamically sets the label width based on the label. Here is his example:
如果您需要更通用的解决方案，请查看ExtJS 文档中 slemmon 提供的注释中的示例。本质上，他的示例创建了文本字段的扩展，它根据标签动态设置标签宽度。这是他的例子：
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);
}
});
回答by fujy
It worked for me like that:
它对我有用：
labelWidth: 300
OR to make autosize, You could try it like that:
或制作autosize，您可以这样尝试：
// anchor: '100%',
labelStyle: 'white-space: nowrap;'
回答by ddragos
what I have done was to disable the fieldLabel for the textField and add a Ext.form.Labelin front of the textField. Ext.form.Label has the shrinkWrap config. I hope this helps and if you figured other workarounds that does not imply modifying the default functionality of the components please let me know :). I should say that I am using Sencha Architect and that's why I would like to add custom scripts as little as possible.
我所做的是禁用 textField 的 fieldLabel 并在 textField前面添加一个Ext.form.Label。Ext.form.Label 有shrinkWrap 配置。我希望这会有所帮助，如果您想出其他不意味着修改组件默认功能的解决方法，请告诉我:)。我应该说我正在使用 Sencha Architect，这就是为什么我想尽可能少地添加自定义脚本。
回答by skycon
You can actually set the label width as auto. Try this:
您实际上可以将标签宽度设置为自动。试试这个：
labelWidth: false,
labelStyle: 'width: auto'
回答by TigerDave
You can also try
你也可以试试
width: '100%'
回答by Idan Dagan
One simple solution that could be helpful all over your app is to override the 'onRender' event. Using Ext.util.TextMetrics to calculate the text width:
一种可能对整个应用程序都有帮助的简单解决方案是覆盖“onRender”事件。使用 Ext.util.TextMetrics 计算文本宽度：
(Here is an example on radiogroup)
（这是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);
}
}
});
Then set the property 'autoBoxLabelWidth' to 'true' or number of px to add:
然后将属性“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
}]
