One of my recent Ext JS forms had a section which looked like this:
items: [
new Ext.Button({
text: 'Preview Video',
iconCls: 'play',
handler: function() {
var win;
if (!win) {
win = new Ext.Window({
title: 'Preview Video',
modal: true,
height: 377,
width: 368,
items: [
new Ext.Panel({
autoLoad: '/admin/videos/' + video_id + '/preview.html'
})
],
buttons: [
{
text: 'OK',
handler: function() {
win.close();
}
}
]
});
};
win.show();
}
})
]
Not horrific but not nice either - let's DRY this up. It's not too pleasant to read but all it's really doing is rendering a customised Ext.Button which opens up a modal Ext.Window, in which is loaded the contents of a known url.
Ok so let's start with that Window. First, we'll make a subclass of Ext.Window:
/**
* AdFunded.views.Video.PreviewWindow
* @extends Ext.Window
* A simple Preview window for the given video_id
*/
AdFunded.views.Video.PreviewWindow = function(config) {
var config = config || {};
Ext.applyIf(config, {
title: 'Preview Video',
modal: true,
height: 377,
width: 368,
items: [
new Ext.Panel({
autoLoad: '/admin/videos/' + config.video_id + '/preview.html'
})
],
buttons: [
{
text: 'OK',
scope: this,
handler: function() {
this.window.close();
}
}
]
});
AdFunded.views.Video.PreviewWindow.superclass.constructor.call(this, config);
this.window = this;
};
Ext.extend(AdFunded.views.Video.PreviewWindow, Ext.Window);
Ext.reg('video_preview_window', AdFunded.views.Video.PreviewWindow);