Extjs4链接点击功能错误

Question

我正在extjs4中工作。我已经GRIDVIEW为=

{ 
      margin : '10 0 5 100', 
      xtype : 'grid', 
      id : 'g2', 
      //title : 'Educational Details', 
      store : 'qb.qbquestionoptionStore', 
      columns : [ { 
       text : 'Options', 
       dataIndex : 'option', 
       flex : 1 
      }, { 
       text : 'Answer', 
       dataIndex : 'isAnswer', 
       flex : 2.5 
      },{ 
       header : 'edit', 
       renderer : function(val) { 
        return '<a href="#" id="edit">Edit</a>'; 
       } 
      }, 
      { 
      header : 'Remove', 
      renderer : function(val) { 
       return '<a href="#" id="remove">Remove</a>'; 
      } 
     } 

对于这些上述编辑和删除链接我已经编写的代码在控制器原样

deleterow：功能（CMP）{ cmp.mon（cmp.getEl（），'点击”功能（事件，目标）{

 if (target.id == 'edit') { 
      console.log('edit'); 
      listview = Ext.getCmp('g2'); 

      listview.on({ 
       itemClick : function(dv, record, item, index, e, opts) { 
        var view = Ext.widget('useredit'); 
        view.down('form').loadRecord(record); 

       } 
      }); 

     } 

     if (target.id == 'remove') { 
      //alert("hello"); 
      listview = Ext.getCmp('g2'); 

      listview.on({ 
       itemClick : function(dv, record, item, index, e, opts) { 
        //var grid = button.up('g3'); 
        var store = listview.getStore(); 
        var selected = listview.getSelectionModel() 
          .getSelection(); 
        console.log(selected); 

        if (selected && selected.length == 1) { 
         store.remove(selected); 
         console.log(store); 
        } 
       }});}}, this, { 
     delegate : "a" 
    });}, 

但在两个链接点击，同样的编辑链接功能正在执行。因此，如何在特定的链接点击执行特定的功能？

Answer 1

这不是获得所需功能的理想方法。您正在使用html id属性，理论上该属性只应在页面上使用一次。此外，你正在做一些不必要的黑客，只是为了向dom元素添加点击事件，这不是最佳做法。

这里有2种可能性。首先，您可以使用Ext.grid.column.Action，它允许您为每个操作使用handler函数。这是一种干净的方式来做事，并且可以看起来很脆，有很好的编辑/删除图标。 Sencha的例子有你的确切场景作为他们的行为，你可以在这里看到文档：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Action

另一种方法是给你的链接添加一个onclick属性，并使你的控制器需要这个调用函数，传递正确的参数：

{ 
    header : 'edit', 
    renderer : function(val, meta, rec) { 
     return '<a href="#" onclick="MyApp.app.getController(\'MyController\').editRow(' + rec.get('id') + ')">Edit</a>'; 
    } 
}, 
{ 
    header : 'Remove', 
    renderer : function(val) { 
     return '<a href="#" onclick="MyApp.app.getController(\'MyController\').removeRow(' + rec.get('id') + ')">Remove</a>'; 
    } 
} 

然后，在你的控制器，你可以检索基础上的ID记录，你需要用它做什么：

editRow: function(recordId) { 
    var view = Ext.widget('useredit'), 
     record = Ext.getCmp('g2').getStore().findExact('id', recordId); 
    view.down('form').loadRecord(record); 
}, 

removeRow: function(recordId) { 
    var store = Ext.getCmp('g2').getStore(), 
     record = store.findExact('id', recordId); 
    store.remove(record); 
}