Use third party UI widgets with Ext JS

[sliu2005]

If I decide to use Ext JS 4 as the main framework for my JavaScript app, is it possible to add third party UI widgets such as JQuery UI, ComponentOne Wijmo, Infragistics IgniteUI, or Telerik Kendo UI? Can Ext JS work nicely with these third party components? If yes, how to introduce a third party widget to participate in Ext JS layout system, and how to capture its events in Ext JS controller? If someone could shed some light on this issue, I would be grateful.

[Tim Toady]

Ext is pretty well sandboxed, so it plays nice with most libraries. I would avoid it if at all possible though. Ext has a very robust set of components and methods. It would detract from consistency in both look and in code if you mix it with other frameworks/libraries. As far as getting it to to integrate with Ext's layout system/controller, you are probably better off handling it separately.

[sliu2005]

Thanks for your reply, Tim. I don't expect any problem to have an Ext JS widget and a third party widget to be attached to different html elements, even if they are on the same html page. I am more concerned about putting a third party widget inside an Ext JS container. My app has the typical single page app layout - a global panel contains menu and toolbar at the top, navigation tree at the left side, and a grid at the center. I would like to replace the Ext JS grid with a third party grid, which will become a child of the global panel container, but I don't know whether it is possible, or if yes, how to wire the new grid to Ext JS framework to make layout and event handling work.

To provide some background info, I need a third party grid to get the drag and drop grouping feature in grid (like in Microsoft Outlook). i.e. you can drag one or more columns to the grid header area to group rows by that column(s). Currently Ext JS does not support that feature, but a number of products do, such as ComponentOne Wijmo, Infragistics IgniteUI or Telerik Kendo UI.

[Tim Toady]

You could probably extend Component to wrap a third party widget, but I have never done it before. You could probably even use it as a proxy for the widget's events.

You could also use a pure Ext approach, but it would take some effort to implement that grouping feature.

[sliu2005]

I also had a feeling that I need to wrap an Ext class around the third party widget to wire it into the Ext framework. I'll look into it.

If anyone has similar experience, please share. I cannot imagine I am the first one want to do this. It is hard to have one company meet every requirement of everybody. In Java or .NET world, we take it for granted to be able to use any third party component without worrying about inter-operability issues.

[Tim Toady]

I was feeling generous today. Mostly out of curiosity. I probably should have implemented the grouping feature for Ext, but that would have been boring. I always recommend a pure Ext approach.

Disclaimer: I know nothing about Kendo. Not Extensively tested.

A simple wrapper for a Kendo Grid. If I knew the anything about Kendo I could probably make it nicer, but I don't. The wrapper allows you to specify your kendo configuration object in the property gridOptions. All events I found in the Kendo docs fire off an Ext event by the same name. There may be a better way than creating an event for every event. Apparently the Kendo docs lie about the existence of a destroy event and it needs memory cleanup for Kendo implemented in the beforeDestroy method.

Ext.define( 'KendoGrid', {
    extend: 'Ext.Component',
    alias: 'widget.kendogrid',

    gridOptions: null, //The kendo grid configuration object
    
    gridEvents: [ 
        'change', 
        'columnResize',
        'dataBound',
        'detailCollapse',
        'detailExpand',
        'detailInit',
        'edit',
        'save',
        'saveChanges'
    ],

    afterRender: function() {
        this.callParent();
        this.getJqueryEl().kendoGrid( this.gridOptions );
        this.addGridEvents();
        
    },

    addGridEvents: function() {
        var me = this;
        var kendoGrid = me.getKendoGrid();
        Ext.each( me.gridEvents, function( eventName ) {
            kendoGrid.bind( eventName, function( e ) {
                me.fireEvent( eventName, me, kendoGrid, e );                
            } );
        } );
    },

    onBoxReady: function() {
        this.callParent();
        this.refreshKendo();
    },

    onResize: function() {
        this.refreshKendo();
    },

    beforeDestroy: function() {
        //Kendo's docs claim there is a destroy method, but there isn't.  
        //It needs to be destroyed here to prevent memory leaks

        //this.getKendoGrid().destroy();
    },

    refreshKendo: function(){
        this.getKendoGrid().refresh();
    },

    getKendoGrid: function() {
        return this.getJqueryEl().data( 'kendoGrid' );
    },

    getJqueryEl: function(){
        var id = this.getId();
        return $("#" + id );
    }

} );