0

我在 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>';
            }
        }

对于上面的这些编辑和删除链接，我在控制器中编写了代码作为-

删除行：函数（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"
    });},

但是在两个链接上单击，相同的编辑链接功能正在执行。那么如何在特定的链接点击上执行特定的功能呢？

4

1 回答 1

0

这不是获得您正在寻找的功能的理想方式。您正在使用 htmlid属性，理论上该属性只应该在页面上使用一次。此外，您正在做一些不必要的黑客攻击，只是为了将点击事件添加到 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);
}
于 2013-06-21T12:14:35.137 回答