Ext.air.MainWindow

[devnull]

What happened to Ext.air.MainWindow, which was how the custom ext-native chrome was explained in this original blog post: http://extjs.com/blog/2007/06/29/building-a-desktop-application-with-ext-air-aptana-and-red-bull/
This seemed to be one of the major selling points of ext-air, and then it just silently dissapeared...

[jack.slocum]

The problem had to do with the change of the AIR security model. However, now that it is compatible again (meaning no internal iframe needed), I am sure it could be ported over pretty easy.

[devnull]

I did make some progress on this, but do not yet have any code to post.
The APIs have changed a bit, but not enough to break things. The part that has me unsure what to do next is that the old Ext.air.mainWindow implementation seems very different from the new Ext.air.nativeWindow code, being that mainWindow extends panel and nativeWindow extends observable.
I will work on getting an updated version of my telnet app ready to post.

[Phunky]

I would be very intrested to know whats going on with this also :)

[devnull]

I am going to have to give up on this again for now. It was all working perfect, now nothing displays at all (including the main window) unless i do something that brings up the introspector console. I am very confused how this can be, and am thinking its a bug in air itself.

[Phunky]

Are you using Ext 2.0.2 or Ext 2.1?

[devnull]

Using 2.1

[amitava]

Does it make for a temporary solution?



Ext.onReady(function(){
var win = new Ext.Window({
id: 'window',
contentEl: 'win',
title: 'Custom Chrome',
width: 395,
height: 495,
resizable: false,
minimizable: true,
listeners: {
close: function(){
window.nativeWindow.close();
},
minimize: function(){
window.nativeWindow.minimize();
}
}
}).show();

// to allow to move the native window by dragging Ext.Window header
Ext.select('#window div.x-window-header').on('mousedown', function(){
window.nativeWindow.startMove();
});
});
http://i286.photobucket.com/albums/ll99/amitava/Screenshot.png

[MuratCorlu]

Ext.air.Window still is not working, is it?

[amon]

This is a basic workaround to using Ext window instead of chrome. It's not perfect, but it is a test. I just playing with AIR 1.1 and Ext 2.1 :)


Ext.onReady(function(){
var win = new Ext.air.NativeWindow({
id: 'mainWindow',
instance: window.nativeWindow,
width: screen.width,
height: screen.height
});
win.moveTo( 0, 0 );
var xwin = new Ext.Window({
title: 'AIR test',
width: 400,
height: 200,
autoHeight: false,
resizable: true,
collapsible: true,
maximizable: true,
minimizable: true,
constrain: true,
listeners: {
close: function() { win.close(); },
minimize: function(){ win.getNative().minimize() }
}
});
xwin.show();
});

plus: You must set the next variables in the application.xml:

<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<systemChrome>none</systemChrome>

<!-- Whether the window is transparent. Only applicable when systemChrome is false. Optional. Default false. -->
<transparent>true</transparent>

test.air (http://air.theba.hu/files/test.air), installable file

[MuratCorlu]

I'm trying somethings about this topic. I wrote a script like this:


Ext.override(Ext.Window.DD, {
startDrag : function(){
air.trace("drag started");
Ext.Window.DD.superclass.startDrag.call(this);
window.nativeWindow.startMove();
}
});

Ext.override(Ext.Window, {

listeners: {
close: function(){
window.nativeWindow.close();
},
minimize: function(){
window.nativeWindow.minimize();
},
maximize: function(){
window.nativeWindow.maximize();
}
}
});

When I include this file to an AIR project, Ext.Window's close, minimize and maximize methods are truly working. But when moving window, I get an error like "Undefined value". Also, if I write that code to ext-all-debug.js's 16911th line:


.....
Ext.extend(Ext.Window.DD, Ext.dd.DD, {
moveOnly:true,
headerOffsets:[100, 25],
startDrag : function(){

if(Ext.isAir) { window.nativeWindow.startMove(); } // Added line

var w = this.win;
.....

moving works. How can override Ext.Window's move and resize events?

[aaronstatic]

This seems to work... resizing is still a work in progress:



Ext.air.Window = Ext.extend(Ext.Window,{
maximizable: true,
minimizable: true,
resizable: false,
constrain: true,
initComponent : function(){
this.nativeWindow = new Ext.air.NativeWindow({
id: 'mainWindow',
instance: window.nativeWindow,
width: this.width+10,
height: this.height+10
}).show();
Ext.air.Window.superclass.initComponent.call(this);
},
maximize : function(){
window.nativeWindow.maximize();
Ext.air.Window.superclass.maximize.call(this);
},
restore : function(){
window.nativeWindow.restore();
Ext.air.Window.superclass.restore.call(this);
},
close : function(){
Ext.air.Window.superclass.close.call(this);
window.nativeWindow.close();
},
minimize : function(){
window.nativeWindow.minimize();
},
initDraggable : function(){
this.dd = new Ext.air.Window.DD(this);
}
});
Ext.air.Window.DD = Ext.extend(Ext.Window.DD,{
moveOnly:true,
headerOffsets:[100, 25],
startDrag: function(){
window.nativeWindow.startMove();
Ext.air.Window.DD.superclass.startDrag.call(this);
},
onDrag : function(e){
//This seems to stop scroll bars from appearing
}
});
Ext.onReady(function(){
var xwin = new Ext.air.Window({
title: 'AIR test',
width: 800,
height: 600
});
xwin.show();
});

[MuratCorlu]

Is Ext.air.NativeWindow working properly in Ext 2.2 ?

[desfrenes]

Apparently not... I get this:


TypeError: Undefined value
at app:/init.js : 12
at app:/init.js : 12
at app:/init.js : 12
at app:/init.js : 3
at app:/ext-2.2/ext-all-debug.js : 1488
at app:/ext-2.2/ext-all-debug.js : 1488
at app:/ext-2.2/ext-all-debug.js : 1592
at app:/ext-2.2/adapter/ext/ext-base.js : 10
at app:/ext-2.2/adapter/ext/ext-base.js : 10
undefined at undefined : undefined

The last line is particularly not explicit ! :D

[wmdev]

So far ot works fine for me, but i still can't figure out how to add the minimize to try functionality. Any ideas?

Cheers.

[letssurf]

wow thought I'd Adobe AIR with ExtJS 2.2 and duh duh duhhh it doesn't work :( no news on fixes from the support team?

[digitalkaoz]

aaronstatic's code works fine with ext-2.2

[letssurf]

aaronstatic's code works fine with ext-2.2

Yeah works rather well.

Apart from resizing. I have that partly working, just doesn't seem too smooth.

Thought it was meant to be part of ExtJS?

[cyberwizzard]

It works fine for me as well (sans resizing which I don't need).

The only thing bugging me was the fact that the window content disappears during a window drag. Now that the window is outside the browser I'd say the render engine is fast enough to handle a fully rendered window moving over the screen.

I couldn't figure out if this was an option somewhere but I found ghost() and unghost() in the Ext.Window class which simply seems to hide and unhide the content elements.

So I added this to the Ext.air.Window constructor:


ghost : function() {},
unghost : function() {}

and now all is well :)

[Jojo]

Thanks aaronstatic (https://extjs.com/forum/member.php?u=19276)!!

Here's a method for adding resize and state persistence, by using Ext.state.Manager and making the (invisible) NativeWindow really really big.

It starts with a simplified version of Ext.air.Window:


Ext.air.Window = Ext.extend(Ext.Window,{
maximizable: true,
minimizable: true,
resizable: true,
constrain: true,
initComponent : function(){
this.nativeWindow = new Ext.air.NativeWindow({
id: 'mainWindow',
instance: window.nativeWindow
});
this.nativeWindow.show();
Ext.air.Window.superclass.initComponent.call(this);
},
maximize : function(){
window.nativeWindow.maximize();
Ext.air.Window.superclass.maximize.call(this);
},
restore : function(){
window.nativeWindow.restore();
Ext.air.Window.superclass.restore.call(this);
},
close : function(){
Ext.air.Window.superclass.close.call(this);
window.nativeWindow.close();
},
minimize : function(){
window.nativeWindow.minimize();
},
initDraggable : function(){
this.dd = new Ext.air.Window.DD(this);
}
});
Ext.air.Window.DD = Ext.extend(Ext.Window.DD,{
moveOnly:true,
headerOffsets:[100, 25],
startDrag: function(){
window.nativeWindow.startMove();
Ext.air.Window.DD.superclass.startDrag.call(this);
}
});

Before you use it, though, you need to set up the state manager:



Ext.state.Manager.setProvider(new Ext.air.FileProvider({
file: 'my_app_state', //or whatever
defaultState: {
applicationWindow: {
width: 800, //the default size for the window
height: 600
},
mainWindow: {
width: 10240, //an arbitrary number, larger than the width of a very large screen
height: 10240,
x: 256, //the default placement for the window
y: 256
}
}
}));

Then, just make sure you set the id of your new window to match the one you put in the state manager:


var win = new Ext.air.Window({
title: 'ERP',
id: 'applicationWindow',
items: [
//your panels here
//or delete the items array altogether
]
});
win.show();

Tested with AIR on Vista only.

[amitava]

Thanks aaronstatic (https://extjs.com/forum/member.php?u=19276)!!

Here's a method for adding resize and state persistence, by using Ext.state.Manager and making the (invisible) NativeWindow really really big.

It starts with a simplified version of Ext.air.Window:

It works fine except one problem. The transparent main window prevents accessing anything on the desktop while the application window is active.

[alsawban]

What happened to Ext.air.MainWindow, which was how the custom ext-native chrome was explained in this original blog post: http://extjs.com/blog/2007/06/29/building-a-desktop-application-with-ext-air-aptana-and-red-bull/
This seemed to be one of the major selling points of ext-air, and then it just silently dissapeared...

:((:((:((:((This is good question:-?:-?:-?:-?

[alsawban]

>:)>:)>:)Sorry! I don't know>:)>:)>:)>:)

[netski]

Anyone else have troubles with scroll bars appearing on first load that disappear when you minimize and restore with a transparent chrome? See screenshot below I've added extra padding to my Ext.air.NativeWindow height and width.



initComponent: function() {
this.nativeWindow = new Ext.air.NativeWindow( {
id: 'mainWindow',
instance: window.nativeWindow,
minimizeToTray: true,
trayIcon: 'icons/icon16.png',
trayTip: 'Example',
width: this.width + 10,
height: this.height + 10
} ).show();
Ext.air.Window.superclass.initComponent.call(this);
},


Any suggestions?

Cheers,
Timothy

[xevin]

try this in ur CSS:



body, html {
overflow: hidden
}

[SnakeMedia]

Hello

I have a lot of problem with Aptana Studio 1.5x

Why does it not work with Ext js 2.2.0? I want to try to Extjs Native Window.

Please help me about currect code. But my Aptana says:
ReferenceError: Can't find variable: Ext

What is that. I have been coded at HTML:


<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/air/ext-air.js"></script>


I want to build sample with Adobe Air 1.5.2.x :(

I have been tried. I am sad and do not understand. Why does it not work with Ext.air.MainWindow ????


Thanks for answer! Regards, SnakeMedia