用文本创建Extjs 4网格动作列?

时间:2013-07-26 11:39:21

标签: javascript extjs extjs4

如何使用文本创建ExtJs 4网格操作列? 这是我的代码

{
    xtype : 'actioncolumn',
    text : lang('publish'),
    width    : 100,
    tdCls: 'x-publish-cell',
    items : [{
         getClass : function(v, meta, rec) {
             if (rec.get('isPublished') == true) {
                 //this.items[0].tooltip = 'Test';
                 return 'y';
             } else {
                 return 'n';
             }
         }
     }

如何使用文本创建ExtJs 4网格操作列?

1 个答案:

答案 0 :(得分:13)

您可以使用列renderer。诀窍是Ext专门隐藏CSS规则以隐藏动作列的内容:

.x-grid-cell-inner-action-col {
    line-height: 0;
    font-size: 0;
}

所以你必须要弥补这一点。

示例:

{
    xtype:'actioncolumn',
    renderer: function() {
        return 
            '<div style="float:right; font-size: 13px; line-height: 1em;">'
                + 'Hey!' 
            + '</div>'
    },
    items: [
        // ...
    ]
}

这里我使用了内联样式,但自定义CSS类可能会更好。

现在,您可以在列中添加一些文本。如果您要实现的目的是在列中添加一些文本每个操作项,则必须覆盖Ext.grid.column.Action#defaultRenderer