如何在单元格ColumnTree中动态添加css类?

时间:2014-01-08 07:32:48

标签: javascript extjs ext.net

检查此Ext.Net示例

http://examples1.ext.net/#/TreePanel/Advanced/ColumnTree/

我想用列“持续时间”动态地将css类添加到单元格。我怎么能这样做?

3 个答案:

答案 0 :(得分:1)

试试这个,在列内调用渲染函数

    <ext:Column ID="Column10" runat="server" DataIndex="Bolum" Width="35" Text="Blm" Flex="1">
   <Renderer Fn="renderActions"></Renderer>
    </ext:Column>

和渲染器功能

  function renderActions(value, meta, record) {
            var image = "<div align='center'><img src='{0}' alt='{0}' /></div>";

            if (value == 'BİTTİ') {

                return Ext.String.format(image, 'images/accept.png');
            }
.............

修改你的愿望

答案 1 :(得分:0)

我不确定会帮助你,但试试这个。

PS:我不知道Ext.NET所以你应该修改代码片段。

columns: [
    {
        dataIndex: 'Duration',
        title="Duration",
        renderer: function(value) {
            if (value == '15 min') {
                status = 'status-up'
            }
            return Ext.DomHelper.markup({
                tag: 'img',
                src: '/image/path/'+status+.png',
                cls: 'icon-status-up'
            });
        }
    }
]

在这里,您可以使用renderer函数,因为TreePanel的columns属性扩展为grid

Ext.tree.Panel

答案 2 :(得分:0)

我通过使用css类选择器x-tree-col-text查找每个html div来对事件nodeLoad进行一些javascript hack。我使用dom操作技术。我认为我所做的不是最佳实践,但它确实有效。