编辑：

Question

我正在使用extjs 4，我有一个显示字段名称Approval的网格。这里我显示了复选框，如果值为true，将在加载网格时检查该复选框。但如果dataIndex值为fault，则仅显示复选框。现在我希望如果我单击未选中的复选框，它将使用侦听器执行操作。但我无法做到这一点。有人可以帮我这个吗？我的代码如下：

{
   text: 'Approval',
   dataIndex: 'approve',
   flex: 1,
   align: 'left',
   renderer: function(value, metaData, record, row, col, store, gridView){
    if(value == true)
      {
        return '<input type="checkbox" checked="true" />';
      }else{
        return '<input type = "checkbox"  />';
         listeners: {
            this.approve();
          }
       }
     }   
  }

approve: function(){
        alert('hi');
    }

Answer 1

旧答案

该复选框有一个change监听器，在值发生变化后会被触发。

{
        xtype     : 'checkbox'
        boxLabel  : 'This is my checkbox',
        name      : 'mycheckbox',
        inputValue: true,
        listeners : {
              change: function(cbx, newValue, oldValue){
                     me.approve();
              }
        }
}

请注意，您无法在侦听器中使用this，因为该函数在另一个范围内被调用。

编辑：

开始在网格上使用Ext.ux.CheckColumn。

现在你可以使用：

{ 
    xtype: 'checkcolumn',
    text: 'Approval',
    dataIndex: 'approve',
    flex: 1,
    align: 'left',
    sortable: false,
    listeners:{
        checkchange:function(cc,ix,isChecked){
            alert(isChecked);
        }
    }
}

Answer 2

您想要存档的内容无法开箱即用。

我想你想一直显示复选框？否则 CellEditor 插件已经是你要找的了。

但无论如何应该开始（我猜）。这是一个使用ExtJS类和放大器的示例代码。图像在一个单元格中显示一种假组合以及一个celleditior。有人认为你还需要解决;你需要在编辑开始之前覆盖cellcontent，因为celleditor似乎只删除了默认类型。

这样做的方式？当然你可以用一个唯一的id来修改复选框，并为它获取Ext.Element，这样你就可以注册事件了。但是这种方法有一个缺点，你需要关心渲染时间，否则当你试图获取它时你的组合不存在。因此我推荐你这种方法。在渲染开始之前，您很容易擦除图像。

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":true},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":false},
        {"name":"Homer", "email":"home@simpsons.com", "phone":true},
        {"name":"Marge", "email":"marge@simpsons.com", "phone":true}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1},
        {header: 'Phone', dataIndex: 'phone',
         editor: { xtype: 'checkbox', inputValue: 'true', uncheckedValue: 'false' }, renderer: function(value){ 
             return value ? '<span class="x-form-cb-checked"><div class="x-form-checkbox"></div></span>' : '<div class="x-form-checkbox"></div>';  
         }
  }
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

这是 JSFiddle

如何在网格列中的渲染器函数中激活侦听器

2 个答案:

旧答案

编辑：