1

Extjsトリガーフィールドのカスタマイズに興味があり、次のことを行うための最良の方法は何でしょうか（テキスト図を失礼します）（角かっこは要素を表します）：

[field label] [trigger element] [button]

これは基本的に、末尾に小さなボタンが追加されたトリガーフィールドです。トリガーフィールドを拡張し、fieldSubTplを介してボタンを追加することを望んでいました。

fieldSubTpl: [
    '<input id="{id}" type="{type}" ',
        '<tpl if="name">name="{name}" </tpl>',
        '<tpl if="size">size="{size}" </tpl>',
        '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
        'class="{fieldCls} {typeCls}" autocomplete="off" />',
    '<div id="{cmpId}-triggerWrap" class="{triggerWrapCls}" role="presentation">',
        '{triggerEl}',
        '{buttonEl}',  <--- New Button Element
        '<div class="{clearCls}" role="presentation"></div>',
    '</div>',
    {
        compiled: true,
        disableFormats: true
    }
]

フィールドのコンストラクターでExt.Buttonを作成し、それを{buttonEl}に使用できるようにしたいと思います。完全な例：

Ext.define("Ext.ux.NewField", {
    extend: "Ext.form.field.Trigger",

    constructor: function(config) {
        config.newButton = Ext.create("Ext.button.Button", {
            /** ... button configs ... **/
        });

        Ext.applyIf(config, {
            fieldSubTpl: // as shown above
        });

        this.callParent([config]);
    },

    initComponent: function() {
        this.callParent();

        this.newButton.on("click", this.__onButtonClick, this);
    },

    getSubTplData: function() {
        var obj = this.callParent(arguments);
        obj.buttonEl = this.newButton.???????  <-- This is what I can't figure out
        return obj;
    },

    __onButtonClick: function() {
        // ...
    } 
});

デフォルトのExtボタン構成と、ボタンコンストラクターでオーバーライドした構成をどのように適用しますか？これは可能ですか、それともここでのテンプレートの使用は完全に間違っていますか？

繰り返しになりますが、Extフィールドの「is-a」関係を維持したいので、トリガーフィールドとボタンをExt.container.Containerでラップするだけでは不可能です。

ヘルプや提案をありがとうございます。

4

1 に答える 1

0

パフォーマンスはあまり高くありませんが、childEls やレンダー セレクターを使用すると可能です。

    Ext.define("Ext.ux.NewField", {
    extend: "Ext.form.field.Trigger",

    fieldSubTpl: [
        '<input id="{id}" type="{type}" ',
            '<tpl if="name">name="{name}" </tpl>',
            '<tpl if="size">size="{size}" </tpl>',
            '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
            'class="{fieldCls} {typeCls}" autocomplete="off" />',
        '<div id="{cmpId}-triggerWrap" class="{triggerWrapCls}" role="presentation">',
            '{triggerEl}',
            '<div class= "myButton"> </div>',  
            '<div class="{clearCls}" role="presentation"></div>',
        '</div>',
        {
            compiled: true,
            disableFormats: true
        }
    ],

    initComponent: function() {
        this.renderSelectors = {
            buttonEl: '.myButton'
        };
        this.newButton = new Ext.button.Button({
            text: 'New'
        });
        this.on('afterrender', function() {
            this.newButton.render(this.buttonEl);
        }, this);

        this.newButton.on("click", this.__onButtonClick, this);

        this.callParent();
    },

    __onButtonClick: function() {
        window.alert("new")
    } 
});

これは実際には入力 el の下にボタンをレンダリングするため、テンプレートを微調整する必要がありますが、ボタンはフィールドの一部であり、その要素内にレンダリングされます。renderSelector は基本的に、レンダリング時に「.myButton」に一致する要素を見つけてから、this.buttonEl を関連する Ext.Element に設定するように言っています。afterrender リスナーは、その要素にボタンをレンダリングするだけです。レンダーと再レンダーは、ほとんどの場合、パフォーマンスに影響を与えませんが、フィールドのように動作する必要があるコンテナーのオーバーヘッドが発生したり、レンダー テンプレート内にボタンのマークアップを記述したりするよりははるかに簡単です。

編集してコメントに応答する:

getSubTplData は、値が適用されるときに XTemplate によって使用されるデータを収集するためのものです。あなたがした場合、あなたの例{buttonEl}はに置き換えられ[object Object]ます。のようなことをした場合、 をボタンの ID にobj.buttonEl = this.newButton.id置き換えますが、それは役に立ちません。{buttonEl}テンプレートがボタンをレンダリングするためのフックを提供せず、ボタンgetSubTplDataのレンダリングとは関係がないため、例は機能しませんでした。

レンダリング テンプレートをいじることなく、トリガー フィールドの下にボタンをレンダリングするために、このようなことを行うことができます。

Ext.define('CustomTrigger', {
    extend: 'Ext.form.field.Trigger',
    initComponent: function() {
        this.callParent();
        this.btn = new Ext.Button({text: 'My Trigger'});
        this.on('afterrender', function(){
            this.btn.render(this.el.createChild());
        }, this)
    }
});
于 2013-03-22T22:11:39.630 に答える