javascript - 在模板中使用自定义属性

Question

我有一个自定义字段，它扩展了 Ext.form.field.Text。我的新字段使用自定义模板，如下所示:

fieldSubTpl: [
    '<div class="uk-margin-medium-bottom"><div class="md-input-wrapper"><label for="{id}">{label}</label><input class="md-input" id="{id}" name="{name}" type="text" value="{value}" /><span class="md-input-bar "></span></div></div>',{
    compiled: true}
],

问题出在模板内的这个 {label} 属性上。如果我像这样在 initComponent 方法中检查它:

...
initComponent: function() {
   console.log(this.label); // prints out some value
},
...

我在控制台中看到了一些值(value)。所以，这个属性存在并且组件看到它，但是，我不知道如何在模板中使用它。

Answer 1

发生这种情况是因为 <label>和<input>标签是单独渲染的。

标签使用 Labelable 呈现mixin 。您可以使用配置 labelableRenderTpl 更改它的渲染模板.

如果您仍然想使用fieldSubTpl要立即渲染所有内容，您应该扩展 getSubTplData 组件的方法并附加 label返回对象的值。该对象将被传递到fieldSubTpl渲染模板。

UPD。 fiddle 示例 https://fiddle.sencha.com/#view/editor&fiddle/1ui1