Question

extjs GridPanel怎么设置图片按钮点击事件

如上图。。 在操作列点击一个按钮，根据piId和PKID（PKID已隐藏）查询数据，操作列的代码如下

{header:"操作",dataIndex:'piId', renderer:function(value,cellmeta,record,rowIndex,columnIndex,store){ var str='<img src="'+contextPath+'/theme/default/images/ext/button/query.gif" onClick="javascript:openTable()" style="cursor:hand" qtip="查看明细"/>   '; if(record.data.isReturn==1){str+='<img style="cursor:hand" src="'+contextPath+'/theme/default/images/ext/button/arrow-curve-180-double.png" onClick="javascript:retrieveTask()" qtip="取回"/>   ';} else{str+='<img style="filter:gray()" src="'+contextPath+'/theme/default/images/ext/button/arrow-curve-180-double.png"/>   ';} return str; } }

并且这个GridPanel设置了rowclick事件。。 有一个全局的piId和pkId.。rowclick事件主要就是把选择的那一列的piId和pkId赋给全局pkId和piId

可是先在测试的效果是：点第一条数据 操作列的一个按钮，第一次没有反应，第二次才会有明细出来，然后再点第二条，进去明细页面，但是明细是第一条数据的明细，点第三条是第二条数据的明细。。不知道明白我的意思没有。。这样的问题要怎么解决？
Ext新手。。 求帮忙。。 在线等。。。
代码：
{ header : '操作',
xtype:'actioncolumn',
items : [{
icon : 'theme/default/images/ext/button/query.gif',
tooltip : '查看明细',
handler : function(grid,rowIndex,colIndex){

}]
}

因为我那个明细图片按钮点进去是另外一个页面。。 图片中操作列的路径就是查询明细的方法。。不知道怎么搞的。。

Answer 1

你这样的最好使用 actioncolumn , 显示效果一样...但是设置点击事件要方便的多,  可以查看下API

//下面代码是直接复制的API例子
Ext.create('Ext.data.Store', {
    storeId:'employeeStore',
    fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
    data:[
        {firstname:"Michael", lastname:"Scott"},
        {firstname:"Dwight", lastname:"Schrute"},
        {firstname:"Jim", lastname:"Halpert"},
        {firstname:"Kevin", lastname:"Malone"},
        {firstname:"Angela", lastname:"Martin"}
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Action Column Demo',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
        {text: 'First Name',  dataIndex:'firstname'},
        {text: 'Last Name',  dataIndex:'lastname'},
        {
            xtype:'actioncolumn',
            width:50,
            items: [{
                //这里直接通过URL设置图标
                icon: 'extjs/examples/shared/icons/fam/cog_edit.png',  
                tooltip: 'Edit',
                //这里是图标的点击事件
                //参数中有点击行的record , 所以很方便做处理
                handler: function(grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("Edit " + rec.get('firstname'));
                }
            },{
                icon: 'extjs/examples/restful/images/delete.png',
                tooltip: 'Delete',
                handler: function(grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("Terminate " + rec.get('firstname'));
                }
            }]
        }
    ],
    width: 250,
    renderTo: Ext.getBody()
});

追问

可是为什么出来的是一个路径，而不是图片？

追答

路径?
哪里是路径?显示的是文本不是图片么?

代码怎么写的?

追问

这是效果图，这里限制字数，代码在补充问题里

追答

不知道你的图标是怎么设置的....
http://runjs.cn/detail/skugvtwr
这是我直接把上面那个代码 显示出来的 , 只是修改了那个icon的url...显示是没问题的..你可以看看..是不是自己哪写错了