如何在extjs4中点击链接调用控制器的操作

时间:2013-06-22 13:36:52

标签: controller extjs4 hyperlink

我在extjs4工作。我有一个gridview链接as =

{
            margin : '10 0 5 100',
            xtype : 'grid',
            id : 'g2',

            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>';
                    return '<a href="#" onclick=" ">Edit</a>';
                }}}

所以点击上面的链接我想调用控制器的动作。那么如何实现呢? 我有我的app.js -

Ext.application({
requires: ['Ext.container.Viewport'],
name: 'Balaee',
appFolder: 'app',

        controllers: [ 'Balaee.controller.qb.qbquestionController'
                             ],
launch: function() {
        Ext.create('Ext.container.Viewport', 
         {
            //id:'mainId',
            layout: 'auto',
            items: {xtype:'editView'}
        });
    }
});

我试过 - “'编辑';”但它给我的错误是“Balaee.app未定义”。所以我需要做什么

1 个答案:

答案 0 :(得分:1)

如果要控制DOM元素的事件,最好在View中绑定DOM事件,然后View应生成View的高级事件以将Controller绑定到。

示例小提琴:http://jsfiddle.net/Virt/8xtAN/

评论:

查看将DOM事件绑定到元素并为Controller生成事件所需的函数:

    initComponent: function () {
        this.addEvents('editcompany');
        this.callParent(arguments);
    },
    afterRender: function () {
        this.mon(this.el, 'click', this.onEditClick, this, {
            delegate: 'a'
        });

        this.callParent(arguments);
    },
    onEditClick: function (e, t) {
        e.stopEvent();
        var id = Ext.fly(t).getAttribute('dataValue');
        this.fireEvent('editcompany', id, this, e);
    }

绑定到View事件的控制器函数:

    init: function () {
        this.control({
            'testgrid': {
                editcompany: function (companyId) {
                    alert('Edit Company ' + companyId);
                }
            }
        });
    }