0

フィールド ラベルの後に画像を表示する必要があります。afterLabelTextTpl を使用できるかどうかを確認しようとしています。しかし、それを使用する方法として、オンラインで例を見つけられませんでした。

これが私がやろうとしていることのアイデアです。誰かが私を構文的に修正できますか..

                                {
                                    xtype: 'combobox',
                                    fieldLabel: 'Role',
                                    editable:false,
                                    store: roles_store, 
                                    triggerAction:'all',
                                    name: 'role_id',
                                    valueField: 'role_id',
                                    displayField:'role_name',
                                    afterLabelTextTpl : function() {

                                        {
                                            xtype: 'image',
                                            src:'../www/css/slate/btn/question.png',
                                            padding: '5 0 0 0',
                                            cls:'pointer',
                                            listeners: {
                                                el:{
                                                    click: function() {
                                                        Ext.create('Ext.tip.Tip', {
                                                            closable:true,
                                                            padding: '0 0 0 0',
                                                            maxWidth:300,
                                                            html: "<b>read-only</b>: Has read access to all pages, but can make no changes.<br><br><b>user</b>: Can edit rules and commit to production.<br><br><b>admin</b>: Can edit rules, commit to production, and add/delete users.<br><br> "+supertext
                                                        }).showAt([810, 340]);
                                                    }
                                                }
                                            }


                                        }
                                    }
4

2 に答える 2

1

はテンプレート構成です。afterLabelTextTplつまり、文字列、文字列の配列、またはインスタンスのいずれかを受け取り、それをExt.XTemplate使用して HTML を生成します。

XTemplate を介してコンポーネントを作成する組み込みの方法はありません (ただし、フォーラム メンバーはこれを可能にするCTemplateという拡張機能を作成しました)。したがって、純粋な Ext JS を使いたい場合は、もう少し作業を行う必要があります。

注:私は Ext JS 4.1.3 にアクセスできないので、以下は 4.1.0 での私の経験に基づく概算です。コードを適切に調整する必要があるかもしれませんが、十分な出発点を提供する必要があります。

ステップ 1: afterLabelTextTpl を設定します。次のようなことを試してください：

afterLabelTextTpl:'<img id="combo_icon" style="padding-top:5px" class="pointer" src="../www/css/slate/btn/question.png"/>'

これでアイコンが表示されるはずです。

ステップ 2: クリック リスナーの追加。これには 2 つの方法があります。どちらの方法も、 という関数があることを前提としていますMy.Name.Space.onImageClick。もちろん、この名前は任意のものに置き換えることができます。関数は次のとおりです。

My.Name.Space.onImageClick = function(){
    Ext.create('Ext.tip.Tip', {
        closable: true,
        padding:  0,
        maxWidth: 300,
        html:     '<b>whatever you want here</b>'
    }).showAt([810, 340]);
};

1 つの方法は、リスナーを DOM に直接追加することです。

'<img onclick="My.Name.Space.onImageClick();" /* the rest of the HTML here */ />'

もう 1 つの方法は、リスナーを追加することExt.dom.Elementです。これは、おそらくより適切な選択です。コンボボックスの設定に次のようなものが必要です。

listeners: {
    afterrender: function(me){
        var imgEl = Ext.get("combo_icon");
        if(imgEl){
            imgEl.on("click", My.Name.Space.onImageClick);
        }
    }
}

これを機能させるのに特に問題がある場合は、コメントを残してください。できることを明確にするお手伝いをします。

于 2012-12-14T19:01:24.663 に答える
1

XTemplate インスタンスまたは文字列です。

ドキュメントから：

ラベル テキストの後にフィールド マークアップに挿入するオプションの文字列または XTemplate 構成。XTemplate が使用されている場合、コンポーネントのレンダリング データがコンテキストとして機能します。

したがって、文字列「Hello」で十分ですし、 XTemplateが取るものなら何でも構いません。

于 2012-12-14T18:49:06.697 に答える