1

我正在尝试获取一个自定义 extjs 组件，以根据绑定到它的真/假值来呈现绿色检查或红色 x 图像。

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

我希望能够在如下视图中使用它，其中“recordIsValid”是我模型中属性的名称。（如果我删除 xtype: 它只是呈现为真/假）

{
    "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;
    }
});

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

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

任何帮助将不胜感激。

4

1 回答 1

3

您应该使用该tpl选项而不是那个选项renderTpl。后者旨在呈现组件结构，而不是其内容。这样，您将能够使用该update方法来更新组件。

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

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

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.Fieldmixin。有关该主题的扩展讨论，请参阅this other question。

于 2013-08-28T08:48:07.873 回答