ExtJS 4.1 gridpanel如何在每列最后添加带文字的操作按钮

0 0

ExtJS 4.1 gridpanel如何在每列最后添加带文字的操作按钮10

想要的效果跟actioncolumn的显示效果差不多，但是希望能带上文字

效果如下：

其中操作样式1是xtype : 'actioncolumn',当鼠标放到图片上之后显示提示，但是觉得不是很方便，尤其有一些特殊操作的时候，客户很难直接通过图标找到想要的功能。

{
        text : "操作样式1",
        xtype : 'actioncolumn',
        items : [{
            test : "编辑",
            icon : basePath + '/resources/images/icons/common/edit.png',
            tooltip : '编辑',
            renderer : function(value) {
                return Ext.String.format('<button>{1}<span>{0}<span></button>', '编辑', value);
            }
        }, {
            test : "删除",
            icon : basePath + '/resources/images/icons/common/delete.png',
        }]
    }

样式2是通过renderer 拼的HTML代码生成的

{
        id : 'action',
        sortable : false,
        text : '操作样式2',
        resizable : false,
        renderer : function(value, metadata, model, rowIndex, colIndex, store) {
            return '<span id="rbacUserGridUpdate" ><img  data-qtip="编辑" src="/ext/resources/images/icons/common/edit.png" alt="编辑">编辑</span>' + '<span id="rbacUserGridDelete"><img  data-qtip="删除" src="/ext/resources/images/icons/common/delete.png" alt="删除">删除</span>'
        }
    }

但是样式2有一个问题，因为ExtJS4.0之后有了提供了MVC的Controller，现在样式对了，但是配置Controller的

init: function() {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },

时，由于使用的是Ext.ComponentQuery，所以无法定位到样式2中的span(id=rbacUserGridUpdate)

请帮忙提供解决方法，或只要能结合Ext MVC实现类似的功能要求(每列最后有按钮并有中文注释)

问题补充：我尝试了一下，使用getClass，但是只能点击图标，不能点击文字，当然getClass也不是干这个的。
现在采用的做法是不写xtype，而用renderer生成超链接效果的文字，renderer : function(value, metadata, model, rowIndex, colIndex, store) {
            var style = ['color:blue;cursor:pointer;', 'color:#AAA;cursor:default;']
            var updateBtn = '<span style="' + (model.getId() < 5 ? style[0] : style[1]) + '"' + (model.getId() < 5 ? 'action="update"' : '') + '>修改</span>&nbsp&nbsp';
            return updateBtn;
        }
可惜controller中的init里面是组件选择器，找不到这个，所以只能在listern中添加监听。