javascript - 如何获取自定义 ExtJS 组件以根据绑定(bind)值呈现一些 html

Question

我正在尝试获取自定义 extjs 组件，以根据绑定(bind)到它的 true/false 值呈现 green-check 或 red-x 图像。

以前的开发人员还编写了一些其他控件来呈现自定义标签/自定义按钮，我试图将我的控件作为基础，但我运气不佳。

我希望能够在如下 View 中使用它，其中“recordIsValid”是我模型中属性的名称。 (如果我删除 xtype:它只会呈现为 true/false)

{
    "xtype": "booldisplayfield",
    "name": "recordIsValid"
}

这是我目前所掌握的，但 ExtJS 对我来说很陌生。

Ext.define('MyApp.view.ux.form.BoolDisplayField', {
    extend: 'Ext.Component',
    alias : 'widget.booldisplayfield',
    renderTpl : '<img src="{value}" />',
    autoEl: 'img',
    config: {
        value: ''
    },
    initComponent: function () {
        var me = this;
        me.callParent(arguments);

        this.renderData = {
            value: this.getValue()
        };
    },
    getValue: function () {
        return this.value;
    },
    setValue: function (v) {

        if(v){
            this.value = "/Images/booltrue.png";
        }else{
            this.value = "/Images/boolfalse.png";
        }
        return this;
    }
});

我从以前的自定义链接按钮实现中获取了上述大部分内容。我假设当 recordIsValid 的模型值绑定(bind)到控件时，将调用 setValue。然后根据它是真还是假，它将用正确的图像覆盖设置控件的 value 属性。

然后在 initComponent 中，它将通过调用 getValue 设置 renderData 值，并将其注入(inject)到 renderTpl 字符串中。

如有任何帮助，我们将不胜感激。

Answer 1

你应该使用 tpl选项而不是 renderTpl 选项。后者旨在呈现组件结构，而不是其内容。这样，您就可以使用 update更新组件的方法。

您还需要调用 initConfig在组件的构造函数中应用初始状态。

最后，出于语义原因，我建议使用 applyValue 而不是 setValue，并保留 getValue/setValue 的 bool 值。

Ext.define('MyApp.view.ux.form.BoolDisplayField', {
    extend: 'Ext.Component',
    alias : 'widget.booldisplayfield',

    tpl: '<img src="{src}" />',

    config: {
        // I think you should keep the true value in there
        // (in order for setValue/getValue to yield the expected
        // result)
        value: false
    },

    constructor: function(config) {
        // will trigger applyValue
        this.initConfig(config);

        this.callParent(arguments);
    },

    // You can do this in setValue, but since you're using
    // a config option (for value), it is semantically more
    // appropriate to use applyValue. setValue & getValue
    // will be generated anyway.
    applyValue: function(v) {

        if (v) {
            this.update({
                src: "/Images/booltrue.png"
            });
        }else{
            this.update({
                src: "/Images/boolfalse.png"
            });
        }

        return v;
    }
});

有了它，您可以在创建时或之后使用 setValue 设置您的值。

// Initial value
var c = Ext.create('MyApp.view.ux.form.BoolDisplayField', {
    renderTo: Ext.getBody()
    ,value: false
});

// ... that you can change later
c.setValue(true);

但是，您将无法删除此组件，因为它处于 Ext 表单中并将其用作完整的字段。也就是说，它的值不会被设置、检索等。为此，您必须使用 Ext.form.field.Field混合。看这个other question对这个主题进行更深入的讨论。