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.
PHP Code:
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 );
}
} );