首页 文章

如何使自定义ExtJS组件基于绑定值呈现一些html

提问于
浏览 次
1

我正在尝试获取一个自定义extjs组件来呈现绿色检查或red-x图像，基于绑定到它的true / false值 .

还有一些其他控件，以前的开发人员已经编写了用于渲染自定义标签/自定义按钮，我试图关闭我的控件，但我没有太多运气 .

我希望能够在视图中使用它，其中“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;
    }
});

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

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

任何帮助将不胜感激 .

javascript extjs custom-component extjs4.2

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.form.field.Field mixin . 有关该主题的扩展讨论，请参见other question .

    回复于

相关问题