zoukankan      html  css  js  c++  java
  • NSS_09 gridpanel中的actioncolumn事件

      在设计角色权限时, 终于用到了grid的actioncolumn,如下:

    {
                header: '权限设定',
                xtype: 'actioncolumn',
                items: [{
                    icon: 'Content/images/cog_edit.png',
                    tooltip: '权限设定',
                    handler: function (grid, rowIndex, colIndex) {
                        //var rec = grid.getStore().getAt(rowIndex);
                        //alert("Edit " + rec.get('Role_name'));
                }]
            },

      这是官方示例中的事件处理方式,但是用这种方式很明显的不符合MVC的模式, 要怎么才能够在MVC模式中应用actioncolumn的事件呢?

      因为actioncolumn中的元素,它只是一张图片,而不是Extjs中的组件, 所以不能应用以下方式:

    this.control({
        'mygrid actioncolumn button[type=edit]' : this.onEdit

      上面的方式,应该是最好的, 但不幸的是它是不可能实现的, 但是有另一种方法, 它和上面的一样简洁:让actioncolumn的处理函数去触发grid的自定义事件(由你自己定义),

    handler: function(grid, rowIndex, colIndex) {
                // fire custom event "itemeditbuttonclick"
                this.up('grid').fireEvent('itemeditbuttonclick', grid, rowIndex, colIndex);
            }

      然后控制器上实现如下:

    this.control({
            'viewport > testpanel': {
                itemeditbuttonclick: this.onEdit,
                itemdeletebuttonclick: this.onDelete
            }
        });

      感慨一下,国外的extjs资料确实多啊。

      自定义事件原理以后再深入了解吧, 最近做项目每天脑袋胀胀的

      ------------------------------------------------

      发现在此函数中, 给grid添加window, grid.add('')时会报错, 然后 debug发现grid是Ext.grid.View类型, 从属性中看到ownCt属性, 哈哈。

    [参考]http://stackoverflow.com/questions/12716675/how-to-perform-view-controller-separation-when-using-an-actioncolumn-ext-grid

  • 相关阅读:
    虚继承virtual public
    My first blog
    mybatis(一)SqlSessionFactory初始化
    dubbo
    设计模式
    基本算法
    redis
    spring cloud eureka
    spring boot
    spring MVC
  • 原文地址:https://www.cnblogs.com/taotaonwsuaf/p/3226040.html
Copyright © 2011-2022 走看看