3

我正在使用 extjs 4，并且我有一个显示字段名称 Approval 的网格。在这里，我显示了复选框，如果值为 true，则在加载网格时将检查该复选框。但如果 dataIndex 值错误，则只会出现复选框。现在我希望如果我单击未选中的复选框，它将使用侦听器执行操作。但我无法做到。谁能帮我解决这个问题？我的代码如下：

{
   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');
    }
4

2 回答 2

5

旧答案

该复选框有一个更改侦听器，该侦听器将在值更改后触发。

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

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

编辑：

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

现在您可以使用：

{ 
    xtype: 'checkcolumn',
    text: 'Approval',
    dataIndex: 'approve',
    flex: 1,
    align: 'left',
    sortable: false,
    listeners:{
        checkchange:function(cc,ix,isChecked){
            alert(isChecked);
        }
    }
}
于 2012-11-28T08:18:03.930 回答
1

您尝试归档的内容不可能开箱即用。

我猜你想一直显示复选框？否则，CellEditor插件已经是您正在寻找的。

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

往这边走？当然，您可以使用唯一 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

于 2012-11-28T10:05:05.627 回答