PDA

View Full Version : Ext 1.1 AIR Window



stekolla
7 Aug 2007, 11:55 AM
We've all seen Jack's Ext 2 AIR application, but I haven't seen much for AIR using Ext 1, so I offer an AIR window class based off of Ext 1.1 which can be used instead of the standard AIR chrome.

The window is based off of LayoutDialog and can be extended likewise.


Ext.namespace('Rack.air');

// ------------------------------------------------------------
// Rack.air.Window
//
// A window that can be used with Adobe AIR in place of the
// standard chrome.
// ------------------------------------------------------------

// ------------------------------------------------------------
// Constructor
// ------------------------------------------------------------
Rack.air.Window = function (container, config) {
// Always use these values
config = Ext.apply(config || {}, {
autoCreate: true,
modal: false,
draggable: false,
resizable: false,
shim: false,
proxyDrag: true
});

this.addEvents({
// Passes:
// Window this
'render': true,

// Passes:
// Window this
'maximize': true,

// Passes:
// Window this
'minimize': true,

// Passes:
// Window this
'restore': true,

// Passes:
// Window this
// Number x
// Number y
'resize': true
});

Rack.air.Window.superclass.constructor.call(this, container, config);

// Set up window controls
this.maximized = false;

// Make the header move the window
this.header.dom.style.cursor = 'move';
this.header.on('mousedown', function(e){
if (!e.getTarget('.x-dlg-toolbox', 1)) {
window.htmlControl.stage.window.startMove();
}
});

// Override header double click
this.header.un('dblclick', this.collapseClick, this);
// Doesn't currently work
this.header.on('dblclick', this.maximizeWindow, this);

// Override close button
this.close.un('click', this.closeClick, this);
this.close.on('click', this.closeWindow, this);

// Add the maximize button
this.toolbox.setWidth(70); // Toolbox is too small. Make it bigger.
var maxContainer = this.collapseBtn.insertSibling({cls:'x-dlg-collapsed'}); // A bit of hackery
maxContainer.setStyle('border', '1px solid transparent'); // More hackery
this.maximizeBtn = maxContainer.createChild({cls:"x-dlg-collapse"});
this.maximizeBtn.addClassOnOver("x-dlg-collapse-over");
this.maximizeBtn.on('click', this.maximizeWindow, this);

// Override collapse button
this.collapseBtn.un('click', this.collapseClick, this);
this.collapseBtn.on('click', this.minimizeWindow, this);

// Make this thing resizable
// Map AIR handles to Window handles
var handleTpl = Ext.DomHelper.createTemplate(
{cls: "x-resizable-handle x-resizable-handle-{0}"}
);
handleTpl.compile();

// Using all handles
var handles = [
{x: 'north', n: 'TOP'},
{x: 'south', n: 'BOTTOM'},
{x: 'east', n: 'RIGHT'},
{x: 'west', n: 'LEFT'},
{x: 'northeast', n: 'TOP_RIGHT'},
{x: 'northwest', n: 'TOP_LEFT'},
{x: 'southeast', n: 'BOTTOM_RIGHT'},
{x: 'southwest', n: 'BOTTOM_LEFT'}
];

Ext.each(handles, function (h) {
var handle = handleTpl.append(this.el, [h.x]);
handle.style.cursor = 'move';
Ext.fly(handle).on('mousedown', function(e) {
e.stopEvent();
window.htmlControl.stage.window.startResize(air.NativeWindowResize[h.n]);
});
}, this);

// Resize this window when the native window is resized
Ext.EventManager.onWindowResize(this.resizeTo, this);
};

// ------------------------------------------------------------
// Public Methods
// ------------------------------------------------------------
Ext.extend(Rack.air.Window, Ext.LayoutDialog, {
// ------------------------------------------------------------
// Void maximizeWindow()
//
// Maximize or Restore the window
// ------------------------------------------------------------
maximizeWindow: function () {
if (this.maximized) {
this.maximized = false;
window.htmlControl.stage.window.restore();
this.fireEvent('restore', this);
} else {
this.maximized = true;
window.htmlControl.stage.window.maximize();
this.fireEvent('maximize', this);
}
},

// ------------------------------------------------------------
// Void minimizeWindow()
//
// Minimize the window
// ------------------------------------------------------------
minimizeWindow: function () {
window.htmlControl.stage.window.minimize();
this.fireEvent('minimize', this);
},

// ------------------------------------------------------------
// Void closeWindow()
//
// Close the window
// ------------------------------------------------------------
closeWindow: function () {
window.htmlControl.stage.window.close();
},

// ------------------------------------------------------------
// Void resizeTo(Number x, Number y)
//
// Resize the window
// ------------------------------------------------------------
resizeTo: function (x, y) {
// Allow extra space for the shadow
if (this.shadow) {
x = x - 20;
y = y - 20;
}
Rack.air.Window.superclass.resizeTo.call(this, x, y);
this.fireEvent('resize', this, x, y);
},

// ------------------------------------------------------------
// Void render(String/HTMLElement/Ext.Element element)
//
// Renders the window and displays it anchored to the passed element
// ------------------------------------------------------------
render: function (to) {
var adj = [0, 0];
if (this.shadow) {
adj = [10, 10];
}
this.anchorTo(to, 'tl', adj);
this.show();
this.fireEvent('render', this);
}
});

galdaka
7 Aug 2007, 1:49 PM
Live example?

Thanks in advance,

wregen
15 Aug 2007, 12:07 PM
Hi,
I have tried to make live example of the window.
The screenshot is attached... and it can be downloaded from here:

http://wregen.home.pl/pub/ExtJSForumMonitor.air

Please keep in mind that this is just an example. (It uses this "Ext 1.1 AIR Window" and the rest of code is "Paging Grid Example" from documentation.

Hope you like it.

PS. To install ExtJSForumMonitor.air you have to have ADOBE AIR, of course.
http://labs.adobe.com/downloads/airsdk.html

violinista
15 Aug 2007, 11:39 PM
Thank you, good work