0

グリッド「actioncolumn」では、「レンダラー」を使用して画像を表示しました。

画像 + テキスト

アクション列をクリックすると、いくつかのアクションを呼び出しています。

ただし、クリック イベントは、グリッド セルの空きスペースをクリックしてもトリガーされます。空きスペースをクリックしないようにする方法。

グリッドセルの空きスペースではなく、リンク（画像+テキスト）のクリックを識別する方法。

{
          xtype: 'actioncolumn',
          width: '17%',      
          text: 'Display Option',
          renderer: function (value, metadata, record) {
          var label = '';
            if (record.get('status') == 0) {
                     lable = 'Show';
                     etadata.style += 'margin-top:10px;cursor:pointer;';
                     return '<span style="font-size: 14px; color:#3b87de; font-family:arial; margin-left:-3px;">' + '<img src="resources/images/show_msg.png"/>' + label + '</span>'
              } else {
                metadata.style += 'margin-top:10px;cursor:pointer;';
                 lable = 'Hide';
                   return '<span style="font-size: 14px; color:#3b87de; font-family:arial;">' + '<img src="resources/images/hide_fault.png"/>' + label + '</span>'
                            }                              

                                },
                                handler:function(grid, rowIndex, columnIndex, e){
console.log('handler test');//not triggering
                                },
                                listeners: {

                                    click: function ( grid, rowIndex, colIndex) {
console.log('handler test');// triggering
                    }
}

ありがとう

4

3 に答える 3

0

ハンドラに渡されたイベント パラメータを使用する必要があります。ドキュメントhttp://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.grid.column.Action-cfg-を参照してください。ハンドラ

イベント オブジェクトを使用すると、ターゲットを見て、処理したい要素かどうかを確認できます。そうでない場合は、false を返して、他のことが起こらないようにすることができます。

于 2015-02-23T11:44:49.447 に答える
0

「Ext.grid.column.Action」クラスは、オーバーライドされたメソッド defaultRenderer でオーバーライドできます。

actioncolumn の項目構成内 - img: 'image path' text: 'your text' のようないくつかのカスタム構成を提供します

defaultRenderer メソッド内にこれらの構成が存在するかどうかを確認して、戻ります

 '<span style="font-size: 14px; color:#3b87de; font-family:arial;">' + '<img src="resources/images/hide_fault.png"/>' + label + '</span>'

また

'<span style="font-size: 14px; color:#3b87de; font-family:arial; margin-left:-3px;">' + '<img src="resources/images/show_msg.png"/>' + label + '</span>'

このようにして、そのアイテムに対して定義したハンドラーは、画像がクリックされたときにのみ呼び出されます。

いくつかのCSSを処理する必要があるかもしれません..

于 2015-03-06T15:26:44.060 に答える