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 );
    }

} ); 

[sliu2005]

Thank you so much! Good job! I understand the gist of your code, yet still need to study some of the details. I'll give it a try once I can wrap my head around it. Thanks again.

[Tim Toady]

It is very basic. It waits until afterrender and grabs the html element that was created automatically by Ext. It then uses that element to inject the Kendo grid with the configuration object you passed in named gridOptions. The grid options are exactly the same as what you would use in a Kendo grid outside Ext. It then loops over the event names specified at the top and creates events that fire an Ext event by the same name.

The onBoxReady method is overriden so that Kendo knows to refresh the grid after it gets laid out the first time, otherwise it wouldn't look like it is sized correctly. onResize does the same for any other time.

The get methods are just so I don't have to retype the same code over and over and allows me to hide away jQuery a bit.

It should be simple to use. I wrap it with a panel here. Obviously you don't have to.

Ext.create( 'Ext.panel.Panel', {
title: 'My Grid',
width: 600,
height: 600,
renderTo: Ext.getBody(),
layout: 'fit',
items: [
{
xtype: 'kendogrid',
gridOptions: {
//Whatever you want here that works when specified directly in Kendo
}
}
 ]
 } );

[sliu2005]

holy cow, it worked! Sorry for the late reply, by the way. I was trying to incorporate your code into a prototype that was created by Sencha Architect 2. It has a complex container hierarchy. I encountered some issues due to the way Sencha Architect organize files, but at the end I was able to resolve all the references and the new grid is injected into the Ext JS layout and resizing seems to be working.

Excellent code and advice, really appreciate it. Maybe you should consider writing a tutorial on this. The only guide I can find on custom extensions is a video from two years ago in Ext JS documentation, which still uses the now deprecated Ext.Extend call and does not go into the detail level in your code. Did you distill the info from reference manual?

There are still things on to do list. For some reason, when I change "items per page", the grid changes height, which is a different behavior that the kendo demo. Also I need to figure out how to adapt the Ext JS data source into Kendo data source. But it should be doable built upon the foundation we have.

[Tim Toady]

I have been doing Ext for a while now so I knew how to go about doing it. There are more current guides available for creating your own classes/components. In fact, if you are using Ext's MVC pattern, you extend components all the time.
http://docs.sencha.com/ext-js/4-1/#!/guide/class_system
http://docs.sencha.com/ext-js/4-1/#!/guide/components

Make sure you have a layout on the parent container/panel. I can't replicate the height issue with changing items per page unless I remove the layout. As far as the datasource is concerned, I personally would just use the Kendo one rather than try to integrate with an Ext store since you are working with a Kendo component