1

バインドされている真/偽の値に基づいて、緑のチェックまたは赤の x 画像をレンダリングするカスタム extjs コンポーネントを取得しようとしています。

以前の開発者がカスタム ラベル/カスタム ボタンをレンダリングするために作成した他のコントロールがいくつかありますが、それを基にコントロールしようとしていますが、うまくいきません。

「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;
    }
});

上記のほとんどは、以前のカスタム リンクボタンの実装から取得しました。setValueモデル値recordIsValidがコントロールにバインドされたときに呼び出されると想定していました。次に、それが true か false かに基づいて、コントロールの value プロパティの設定を正しい画像でオーバーライドします。

そして、initComponent で、renderData value呼び出しによって を設定しgetValue、これが文字列に挿入されるようにしrenderTplます。

どんな助けでも大歓迎です。

4

1 に答える 1

3

tplの代わりにオプションを使用する必要がありますrenderTpl。後者は、そのコンテンツではなく、コンポーネント構造をレンダリングすることを目的としています。このようにして、updateメソッドを使用してコンポーネントを更新できるようになります。

initConfigまた、初期状態を適用するには、コンポーネントのコンストラクターを呼び出す必要があります。

最後に、意味上の理由からapplyValue代わりに使用し、getValue/setValue のブール値を保持することをお勧めします。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.Fieldミックスインを使用する必要があります。この件に関する詳細な議論については、この他の質問を参照してください。

于 2013-08-28T08:48:07.873 に答える