1

それらの1つがxtype 'treecolumn'である場合、TreeGridの2つの列をマージすることは可能ですか?

今のところ、2 つの別々の列があります。1 つは標準の treecolumn で、2 つ目はカスタム テンプレート (基本的には画像) を含む templatecolumn です。

今はこのように見えます

私が取得したいものは次のようになります。

私がやろうとしていること

そのため、2 番目の列のコンテンツが最初に追加されますが、右揃えになります。

そのようなレンダラーから始める方法さえわかりません:(

これまでのコラムのコードは次のとおりです。

{
    xtype : 'treecolumn',
    text : 'Dział/Pracownik',
    width : 200,
    sortable : true,
    hideable: false,
    dataIndex : 'Name',
    renderer: function (v, m, r) {
        if(r.get('leaf')==true)
            m.tdAttr = 'data-qtip="<img src=services/Images.ashx?login='+r.get('login')+' width=60px height=60px>"';
            return v;
    }
},
{
    text : 'Zdj', 
    width: 40, 
    align : 'center', 
    dataIndex : 'Name', 
    sortable : false, 
    resizable: false,
    xtype : 'templatecolumn', 
    tpl : imgTpl
},
...
var imgTpl = Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '<tpl if="values.leaf == true">',
        '<img src="services/Images.ashx?login={login}" width="25px" height="25px"/>',
    '</tpl>',
    '</tpl>'
);

これらの2つの列をマージする方法についてのヒントに本当に感謝しています.

4

2 に答える 2

1

私が行ったことは、代わりにレンダラーを使用したテンプレートを使用することです。そのため、私の列は次のようになります。

{
    xtype : 'treecolumn',
    text : 'Employee',
    width : 200,
    sortable : true,
    hideable : false,
    dataIndex : 'Name',
    renderer : function(v, m, r) {
        if (r.get('leaf')) {
            return '<div style="float: left">'
            + r.get('Name')
            + '</div><img data-qtip="<img src=services/Images.ashx?login='
            + r.get('login')
            + ' width=60px height=60px/>" src="services/Images.ashx?login='
            + r.get('login')
            + '" width="25px" height="25px" style="float: right; margin-right: 5px"/>';
        }

    return '<div style="float: left">' + r.get('Name') + '</div>';
    }
}

要素が葉の場合、列の右側に追加の画像を表示します + ロールオーバー後に大きな画像を追加しました。

これを機能させるには、ext-all.css 内のいくつかの css を変更する必要がありました。

.x-grid-with-row-lines .x-tree-icon{margin-top:1px; float: left} .x-grid-with-row-lines .x-tree-elbow,.x-grid-with-row-lines .x-tree-elbow-end,.x-grid-with-row-lines .x-tree-elbow-plus,.x-grid-with-row-lines .x-tree-elbow-end-plus,.x-grid-with-row-lines .x-tree-elbow-empty,. x-grid-with-row-lines .x-tree-elbow-line{height:19px;background-position:0 -1px; フロート: 左}

そのセルに表示されるすべての画像に float:left を追加する必要がありました。

  • X-ツリーエルボー
  • X ツリー エルボー エンド
  • x-tree-エルボー-プラス
  • X ツリー アイコン

これはかなり最適化できることはわかっていますが、私にとってはうまく機能します。ExtJS の第一人者がそれを微調整してより適切に動作させることができれば、大歓迎です :)

于 2012-07-18T13:30:10.903 に答える
1

これが私がそれでやったことです：

 renderer:function (value, meta, record) {
                    var tasks = record.get("tasks"),
                        tpl =     this.taskImgTpl,
                        type, qtip;
                    if (tasks && tasks.length >0){
                        Ext.each(tasks, function(task){
                            if(task.refType) {
                                type = task.refType;
                            } else {
                                type = task.type.name;
                            }
                            qtip = Ext.String.format('Status:  {0}  Assignee:  {1}  %Complete:  {2}',task.state,task.assignee||'',task.pctComplete);
                            value += tpl.apply([type, qtip]);
                        },this);
                    }

                    return value;
                }

挿入される画像テンプレートは次のとおりです。

taskImgTpl:new Ext.XTemplate(" &nbsp; &nbsp;  <img class='{0} h16' width='16px' data-qtitle='{0}' data-qwidth='120' data-qtip='{1}'/>")

ここで、h16 は高さ:16px を与えるクラスであり、動的に挿入されたクラスは、表示されているオブジェクトの種類に関係なく背景画像 (16x16) を保持します。もちろん、代わりに src 属性を設定することもできます。

于 2012-07-17T06:01:58.267 に答える