Làm thế nào để thực hiện điều khiển kế thừa trong ExtJS 4?

Question

Tôi đang tìm cách viết một ứng dụng khá phức tạp có liên quan đến việc có một số mục "cơ bản" (dạng cơ sở, lưới cơ sở, v.v.) mà các mục khác sẽ kế thừa từ đó để theo dõi DRY. Các mục cơ sở này sẽ có các sự kiện phổ biến mà tất cả các mục kế thừa sẽ kích hoạt. Vì đây là trường hợp, tôi sẽ cần một loại bộ điều khiển cơ bản sẽ lắng nghe những sự kiện này.

Cách cơ bản để thiết lập bộ điều khiển để dễ dàng được kế thừa/mở rộng là gì?

Answer 1

Đây chính xác là những gì chúng tôi đang thực hiện trong dự án của mình. Dưới đây là mẫu vợ chồng cho lưới điện/điều khiển kết hợp:

BaseGrid:

Ext.define('BaseGrid', { 
    extend: 'Ext.grid.Panel', 

    initComponent: function() { 
    var me = this; 
    // create common stuff 

    me.on('itemcontextmenu', me.showContextMenu, me); 
    me.callParent(arguments); 
    }, 

    showContextMenu: function(view, rec, node, index, e) { 
    var me = this; 

    if (me.contextMenu === undefined) 
     return; 

    e.stopEvent(); 
    me.contextMenu.showAt(e.getXY()); 
    } 

}); 

BaseController:

Ext.define('BaseController', { 
    extend: 'Ext.app.Controller', 

    init: function() { 
     // put some common stuff 


     this.callParent(arguments); 
    }, 

    gridRendered: function() { 
    // common function to do after grid rendered 
     var me = this, 
      grid = me.getGrid(); // note that base controller doesn't have ref for Grid but we still using it !! 

     gr.contextMenu = me.createContextMenu(); 
    }, 

    createContextMenu: function() { 
     return ... // create context menu common for all grids with common handlers 
    }, 

}); 

ChildGrid:

Ext.define('ChildGrid', { 
    extend: 'BaseGrid', 
    alias: 'widget.child' 
... 

}); 

ChildController:

Ext.define('ChildController', { 
    extend: 'BaseController', 

    refs: [ 
    { ref: 'grid', selector: 'child gridpanel' } // now basecontroller will have something when called getGrid()!! 
    ], 

    init: function() { 
    var me = this; 
    me.control({ 
     'child gridpanel': { 
      afterrender: me.gridRendered, // subscribing to the event - but using method defined in BaseController 
      scope: me 
     } 
    }); 

    me.callParent(arguments); 

    }, 
}); 

Hy vọng các mẫu cặp đôi này sẽ giúp ích. Những ý tưởng cơ bản là những:

• Bạn đặt càng nhiều mã càng tốt vào các điều khiển cơ bản và cơ sở điều khiển
• Bạn sử dụng chức năng refs (getGrid() vv) trong bộ điều khiển cơ sở
• Đừng quên tạo các tham số này trong tất cả các trình điều khiển con
• Liên kết một số sự kiện quan trọng với trình xử lý bộ điều khiển cơ sở trong các bộ điều khiển con.