0

XTemplateの条件に基づいて画像を表示するツリーグリッド「templatecolumn」があります。

ただし、画像の上にマウスを置いたときに表示されるhtml形式のツールチップも必要です。レンダラーのext：qtipmetatdata属性を介してExtJS 3.xでこれを実行しましたが、tplを使用してExt JS 4.1でこれを実行する方法を理解できず、検索で何も見つかりませんでした。

レコード値に基づいて画像を表示する必要があるのは次のとおりです。

var myTemplate = new Ext.XTemplate( 
    '<tpl if="p &gt; 0">',
        '<img src="exclamation.gif" height="16" width="16"/>',
    '</tpl>' 
);

var schedTree = Ext.create('Ext.tree.Panel', {
    ...
    columns:[
        { header:' ', dataIndex:'p',  xtype:'templatecolumn', tpl:myTemplate }
    ]
}

誰かがこれをしたか、何か提案がありますか？これを行うためのより良い方法はありますか？ありがとう

4

1 に答える 1

0

これは XTemplate を使用する方法ではありませんが、これは私にとってはうまくいきます:

{
    text : 'Zdj', 
    width: 40, 
    align : 'center', 
    dataIndex : 'Name', 
    sortable : false, 
    resizable: false,
    renderer: function (v, m, r) {
        if(r.get('leaf')==true) {
            m.tdAttr = 'data-qtip="<img src=services/Images.ashx?id='+r.get('id')+' width=60px height=60px>"';
            return '<img src="services/Images.ashx?id='+r.get('id')+'" width="25px" height="25px"/>';
        }
    }
},

私の例では、ツールチップに大きな画像を表示していますが、HTML 形式のツールチップを表示しても問題ありません。
レンダラーに条件を追加することができ、私の意見では、XTemplate でできることはさらに多くなります。

小さな画像は、行とツールチップのコンテンツを m.tdAttr に返す必要があります。

レンダラー機能の詳細については、http: //docs.sencha.com/ext-js/4-1/# !/api/Ext.grid.column.Column-cfg-renderer をご覧ください。

お役に立てれば ：）

于 2012-07-12T14:36:58.913 に答える