Question

是否有可能在TreeGrid中合并2列，当其中一列是xtype'treecolumn'时？

现在我有2个单独的列，一个是标准树列，第二个是带有自定义模板的模板列（基本上是图像）

now it looks like this

我想得到的应该是这样的：

what I'm trying to do

因此，第二列内容将首先添加到右侧，但右对齐。

我不知道如何开始使用那种渲染器:(

到目前为止，这是我的专栏的代码：

{
    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>'
);

我真的很感激有关如何合并这两列的任何提示。

Answer 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属性。

Answer 2

我所做的是使用模板我使用了渲染器，所以我的专栏现在看起来像这样：

{
    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;向左飘浮} .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}

我必须将float：left添加到该单元格中显示的所有图像：

x-tree-elbow
x-tree-elbow-end
x-tree-elbow-plus
的x树图标

我知道这可以很多优化，但对我来说它工作得很好。如果一些ExtJS大师可以调整它以更好地工作，那么欢迎你：）

ExtJs 4.1 TreeGrid treecolumn自定义渲染器

2 个答案: