2

Ext Scheduler ( http://www.bryntum.com/products/scheduler/ ) を使用して簡単なアプリケーションを構築しています。ツリー内の人物のアイコンを持つツリー列のカスタム レンダラーを追加しようとしています。 ここに画像の説明を入力

その列のレンダリングを作成しました：

renderer: function (v, m, r) {
            if (r.get('leaf')) {
                return '<div style="float: left">' +
                    r.get('Name') +
                    '</div>'+
                    '<img data-qtip="<img src=iconUrl.png width=60px height=60px/>" '+
                    'src="iconUrl.png" '+
                    'width="20px" height="20px" style="float: right; margin-right: 5px"/>';
            }
            return v;
        }

これは問題ないように見えますが、長い名前の場合、望ましくない外観になります。

ここに画像の説明を入力

コードを調べてみると、不要なマークアップがいくつか見つかりました。 ここに画像の説明を入力

必要なのは、標準のツリー列とほぼ同じレンダラーですが、その列の右側に追加のアイコン (従業員の画像のサムネイル) を追加する必要があります。

ここに画像の説明を入力

ドキュメントを検索していたところ、cellTpl( http://docs.sencha.com/extjs/4.2.1/source/Column2.html#Ext-tree-Column )というプライベート プロパティがあることがわかりました。

しかし、これをどのように変更すればよいかわかりません。これは、上でプライベートとしてマークされているため、まったく変更する必要があります。

最後の画像のように効果を得るには、そのレンダラーをどのように変更すればよいですか?

再生するjsfiddleは次のとおりです：http://jsfiddle.net/Misiu/gwFdr/

4

1 に答える 1

2

Ext.tree.Columnサムネイルを表示する通常の葉のアイコンの代わりに拡張を終了しました。
これが私のコードです：

Ext.define('Grafik.component.tree.Column2', {
    extend: 'Ext.tree.Column',
    alias: 'widget.treecolumn2',

    thumbnailsServiceUrl:'',

    cellTpl: [
        '<tpl for="lines">',
            '<img src="{parent.blankUrl}" class="{parent.childCls} {parent.elbowCls}-img ',
            '{parent.elbowCls}-<tpl if=".">line<tpl else>empty</tpl>"/>',
        '</tpl>',
        '<img src="{blankUrl}" class="{childCls} {elbowCls}-img {elbowCls}',
            '<tpl if="isLast">-end</tpl><tpl if="expandable">-plus {expanderCls}</tpl>"/>',
        '<tpl if="checked !== null">',
            '<input type="button" role="checkbox" <tpl if="checked">aria-checked="true" </tpl>',
                'class="{childCls} {checkboxCls}<tpl if="checked"> {checkboxCls}-checked</tpl>"/>',
        '</tpl>',
        '<img src="{loginUrl}" class="{childCls} {baseIconCls} ',
            '{baseIconCls}-<tpl if="leaf">leaf<tpl else>parent</tpl> {iconCls}"',
            '<tpl if="icon">style="background-image:url({icon})"</tpl>/>',
        '<tpl if="href">',
            '<a href="{href}" target="{hrefTarget}" class="{textCls} {childCls}">{value}</a>',
        '<tpl else>',
            '<span class="{textCls} {childCls}">{value}</span>',
        '</tpl>'
    ],


    treeRenderer: function (value, metaData, record, rowIdx, colIdx, store, view) {
        var me = this,
            cls = record.get('cls'),
            renderer = me.origRenderer,
            data = record.data,
            parent = record.parentNode,
            rootVisible = view.rootVisible,
            lines = [],
            parentData;

        if (cls) {
            metaData.tdCls += ' ' + cls;
        }

        while (parent && (rootVisible || parent.data.depth > 0)) {
            parentData = parent.data;
            lines[rootVisible ? parentData.depth : parentData.depth - 1] =
                    parentData.isLast ? 0 : 1;
            parent = parent.parentNode;
        }

        return me.getTpl('cellTpl').apply({
            record: record,
            baseIconCls: me.iconCls,
            iconCls: data.iconCls,
            icon: data.icon,
            checkboxCls: me.checkboxCls,
            checked: data.checked,
            elbowCls: me.elbowCls,
            expanderCls: me.expanderCls,
            textCls: me.textCls,
            leaf: data.leaf,
            expandable: record.isExpandable(),
            isLast: data.isLast,
            blankUrl: Ext.BLANK_IMAGE_URL,
            loginUrl: data.leaf ? me.thumbnailsServiceUrl + record.get('Login') : Ext.BLANK_IMAGE_URL,
            href: data.href,
            hrefTarget: data.hrefTarget,
            lines: lines,
            metaData: metaData,
            // subclasses or overrides can implement a getChildCls() method, which can
            // return an extra class to add to all of the cell's child elements (icon,
            // expander, elbow, checkbox).  This is used by the rtl override to add the
            // "x-rtl" class to these elements.
            childCls: me.getChildCls ? me.getChildCls() + ' ' : '',
            value: renderer ? renderer.apply(me.origScope, arguments) : value
        });
    }
});

使用法は次のようになります。

{
    text: 'Users',
    dataIndex: 'Name',
    hideable: false,
    width: 260,
    xtype: 'treecolumn2',
    sortable: true,
    resizable: false,
    thumbnailsServiceUrl: window.appUrl + 'api/Thumbnails/'
}

api/Thumbnailsログインして画像を返すサービスはどこにありますか。
簡単な解決策、それが誰かに役立つことを願っています:)

于 2014-02-06T08:40:05.593 に答える