Programming jQuery UI like ExtJS

Question

I'm trying to develop an abstraction layer to jQuery UI that allows define Widgets as Objects just like (or similar) to ExtJS. This is the concept:

var mydialog = new $.ui.dialog({

modal:true,
renderTo:'body',
title:'The Windows Tittle',
content:'The content of the Window'


});

Now I can say:

mydialog.show();

The first step (i think) was to add a Class creation function to jQuery, this allow to make classes:

$.MYNAMESPACE.dialog = $.Class ({

constructor:function(){}

//methods and properties

});

And here comes the real problem: What I have to put inside the previous class definition to link the real $.ui.dialog with mine? What I meant is that I don't want to create a new widget, I just want to reuse the code behind predefined jQuery UI widgets in order to create an abstraction layer that allows OOP with jQuery UI.

Thanks in advance

Answer 1

have you tried the jquery-ui widget factory? You might be re-inventing the wheel.js

slideshow on what you get with the widget factory

official splash page and the api

quick idea what it's doing. I want a new dialog with some custom events on it

//this is instantiating the widget, does not need to be in the same file
$(function(){
  $(".some-selector").miDialog({autoopen:true //because we can});
});
//this is a definition, not an instantiation of the widget. aka, 
$.widget("mi.miDialog" //namespace
  ,$.ui.dialog //inherit from this jquery widget
  ,//start your widget definition
{ options:{autoopen:false,//overwrite parent default option, while still giving instance option to override our definition's override of parent
   someInstanceSafeOption: {why:"not",have:"a",subobject:"option"} },
//underscore functions are 'private' unless you dig into the prototype manually
_create :function(){
//you'll need this function.  guaranteed to run once.
// upcoming version call parent create
this._super(); 
//current version call parent create
$.ui.dialog.prototype._create(this.options);
this.element.addClass("mi-dialog"); //help with custom styling
  this._trigger("created"); //trigger custom events
//register for events here, as _create() will only run once per individual instance

},
_init:function(){
//this will run every time someone calls $('some-selector').miDialog();
//i have yet to use it much
},
publicFunction: function(some, params){
 //this function does whatever you want, and is called $('some-selector'.miDialog("publicFunction", some,params);
},
_destroy: function(){
//clean up after your widget's create function, if needed.
}