ExtJs 4.1 TreeGrid 树列自定义渲染器

Posted

技术标签:

【中文标题】ExtJs 4.1 TreeGrid 树列自定义渲染器【英文标题】:ExtJs 4.1 TreeGrid treecolumn custom renderer 【发布时间】:2012-07-12 14:23:45 【问题描述】:

当其中之一是 xtype 'treecolumn' 时,是否可以合并 TreeGrid 中的 2 列?

现在我有 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"  />',
    '</tpl>',
    '</tpl>'
);

对于如何合并这两列的任何提示,我将不胜感激。

【问题讨论】:

试图获得类似工作的东西 【参考方案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 属性。

【讨论】:

我已经添加了我的答案,也许你会发现它有用或者你可以改进它。 是的,就是这个想法,请参阅我的 cmets 进行一些优化。【参考方案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')
            + '"   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-iconmargin-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-lineheight:19px;background-position:0 -1px;浮动:左

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

x-tree-弯头 x-tree-elbow-end x-tree-elbow-plus x-tree-icon

我知道这可以优化很多,但对我来说效果很好。如果某些 ExtJS 大师可以对其进行调整以使其更好地工作,那么欢迎您:)

【讨论】:

我不敢碰你的 css,但这里有一些优化渲染器的指针: 1 - 你不需要访问记录来获取 Name 属性,因为它已经在 ' v'变量。 (你有两个电话)。 2 - 我会考虑使用 XTemplate 或 String.format() 来创建您的 html 字符串 - 它可能比进行字符串连接更有效(并且更具可读性)。 3 - 考虑将图像加载器的 url 移动到配置变量中,以便您以后可以在需要时替换它。 感谢 cmets :) 我刚开始使用 ExtJS,所以欢迎所有优化想法。实现应用程序配置的最佳想法是什么?将所有重要的网址存储在一个地方?对于用户偏好,我有一个存储当前用户设置和 2 个函数来获取设置(如果没有特定设置函数返回默认值)和第二个更新设置。我假设我不需要如此复杂的存储应用程序设置的方式,因为它们会在一段时间内更改。最好的方法是什么?您能为像我这样的初学者创建一个基本示例吗? :) 你当然可以发挥你的想象力来实现它。这是我发现有用的一种方法:jsfiddle.net/dbrin/Zk4Ah/1 在这个例子中,My.app 定义有一个“con”对象,它存储了一个命名的 url 'url1'。为了得到它,我使用 My.app.con.url1 (参见 onMainReady 函数)。这里的想法不是将其放入全局变量中,而是使用 My 命名空间。 感谢您提供的出色示例 :) 我正在构建面向对象的应用程序,因为我一直认为 MVC 很难,但看到您的代码后我意识到这并不难 :)我将尝试在 MVC 中重建我的应用程序。多谢!

以上是关于ExtJs 4.1 TreeGrid 树列自定义渲染器的主要内容,如果未能解决你的问题,请参考以下文章

如何应用自定义 CSS 将行选择到 Tree Grid Panel 到 Ext JS 4.1

一个树网格中的多个插件(失败) - Extjs 4.1

ExtJS TreeGrid的使用方法

在 ExtJS4 TreeGrid 中加载嵌套的 JSON 数据

ExtJS4.1 TreeGrid 中的二次排序

ExtJS TreeGrid 中的复选框列