Question

我在extjs4工作。我有gridview as =

{
            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：function（cmp）{ cmp.mon（cmp.getEl（），'click'，function（event，target）{

        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元素添加点击事件而做了一些不必要的攻击，这不是最佳做法。

这有两种可能性。首先，您可以使用Ext.grid.column.Action，它允许您为每个操作使用handler函数。这是一种干净的做事方式，并且可以通过良好的图标进行编辑/删除。 Sencha示例将您的确切场景作为其操作，您可以在此处查看文档：{{3}}

另一种方法是在链接中添加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);
}

Extjs4链接点击功能错误

1 个答案: