getting started with air, and extjs-air

**Ekambos** · 22 May 2011 9:21 AM

There you go

http://code.google.com/p/gwt4air/wiki/AirPlugin

hope that will help you.
Feel free to ask if you have any questions.

Alain

**Mycoding** · 22 May 2011 9:46 AM

Thanks a lot.
I mention that you are well at flex also.

I want to pay your attention at some very interesting thing.
Actionscript 3d engine Altertaniva3d
Please look at this
http://vreshenie.ru/work/alternativa3d/1.swf
I hope you will like it.

I also want to ask.
Did you try in Air Raphael(not ExtJS 4.0 just framework Raphael)
Is is possible to convert this in Air ?
http://vreshenie.ru/work/svg/map/16.html

**Ekambos** · 22 May 2011 10:12 AM

You are welcome
Whoa that demo looks pretty awesome !
I ll have a look at the library. Maybe i can add a Java API around that for gwt4air

I really dont know the Raphael library. But if it uses a lot of eval you wont be able to use it inside the AIR application sandbox. You will have to setup a bridge.

Maybe Makana can tell you more about this ?

**Mycoding** · 22 May 2011 10:48 PM

I did simple window on ExtAir )))

May I ask you.
I try add in window chart but it is not shown, also I tryed add grid but failed.
It seems to me that in Ext.Air xtype is not fully suppored all ExtJS xtype.
Is it true?
Here is code

HTML Code:

<html>
<head>
    <title>Клиент для сайта Врешение.ru</title>
    <link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="lib/extair/resources/css/ext-air.css" />
	<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/xtheme-gray.css" />
	<link rel="stylesheet" type="text/css" href="resources/css/main.css" />
    <script type="text/javascript" src="lib/air/AIRAliases.js"></script>
    <script type="text/javascript" src="lib/air/AIRIntrospector.js"></script>	
    
    <!-- Debug Versions
    <script type="text/javascript" src="/lib/extjs/adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="/lib/extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="/lib/extair/ext-air-wo-xlayer-debug.js"></script>
    -->
    
    <script type="text/javascript" src="lib/extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="lib/extjs/ext-all.js"></script>
    <script type="text/javascript" src="lib/extair/ext-air-wo-xlayer.js"></script>
    <script>
        console = { log: air.Introspector ? air.Introspector.Console.log : function(){}};
        Ext.onReady(function(){
			Ext.chart.Chart.CHART_URL = 'lib/extjs/resources/charts.swf';
			 var store = new Ext.data.JsonStore({
		        fields: ['season', 'total'],
		        data: [{
		            season: 'Summer',
		            total: 150
		        },{
		            season: 'Fall',
		            total: 245
		        },{
		            season: 'Winter',
		            total: 117
		        },{
		            season: 'Spring',
		            total: 184
		        }]
		    });			
            var win =new Ext.air.Window({
				layout:'fit',
            	win: window.nativeWindow, // use root window's context
            	collapsible:true,
				animCollapse:true,
				minimizable:true,								
				title:'Клиент для сайта Врешение.ru',
            	icon: '/resources/images/onebit_19_16.png',
				minimizeToTray: true,
				trayIcon: '/resources/images/onebit_19_16.png',
				trayTip:'Клиент для сайта Врешение.ru',
            	tbar:[{
					text:'Меню',
					icon: '/resources/images/onebit_19_16.png',
					menu: [{
						icon: '/resources/images/onebit_19_16.png',
						text: 'Menu Item 1'
					},{
						text:'Сдвинуть',
						handler:function(){
							//console.log("HI");
							//win.setPosition(300,300);
						}
					}]				
				},'->',{
					text:'Прочее',
					icon: '/resources/images/cog.png',
					menu: [{
						text: 'Выход',
						icon: '/resources/images/door_out.png',
						handler:function(){
							win.close();
						}						
					}]
				}],
				items: {
		            store: store,
					height:300,
					width:300,
		            xtype: 'piechart',
		            dataField: 'total',
		            categoryField: 'season',		            
		            extraStyle:
		            {
		                legend:
		                {
		                    display: 'bottom',
		                    padding: 5,
		                    font:
		                    {
		                        family: 'Tahoma',
		                        size: 13
		                    }
		                }
		            }
		        }
            });
        });
    </script>
</head>
<body>
    <!-- Insert your content here -->
</body>
</html>

**Mycoding** · 23 May 2011 12:09 AM

Sorry for so many questions.

I try to use gray theme for Ext.Air.
All works but new window is being shown with blue(default) theme
Here is video

I get new Window code from sample of simpletasks

Code:

/*!
 * Enhanced ExtJS Adapter for Adobe(r) AIR(r)
 * Copyright(c) 2006-2010 Sencha Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 * 
 * @version 3.2.2
 * [For Use with ExtJS 3.1.0 to ExtJS 3.2.2]
 */
Ext.air.NativeWindowManager.getAboutWindow = function(){
	var win,
		winId = 'aboutSite';
	if (win = this.get(winId)) {
		win.setActive(true);
	} else {
		win = new Ext.air.Window({
			id: winId,			
			title: 'Рћ РїСЂРѕРµРєС‚Рµ Р’СЂРµС€РЅРёРµ.ru',
			html: [
				'<div style="float:left;width:128px;padding:20px;">',
					'<img src="/lib/extair/resources/icons/extlogo128.png"/>',
				'</div>',
				'<div style="float:left;width:160px;padding-top:40px;">',
					'<span style="font-size:16px;">Simple Tasks v3.3+</span><br/><br/>',
					'Copyright &copy; 2010 - Sencha Inc.<br/>',
					'<a href="http://www.sencha.com/" target="_blank">http://www.sencha.com/</a><br/><br/>',
				'</div>',
				'<div style="clear:left;padding:0 20px 20px;">',
					'Simple Tasks and associated source code is licensed under the GNU General Public License version 3 (GPL v3).<br/>',
					'<a href="http://www.gnu.org/copyleft/gpl.html" target="_blank">http://www.gnu.org/copyleft/gpl.html</a>',
				'</div>'
			].join(''),
			buttonAlign: 'center',
			buttons: [{
				text: 'OK',
				width: 70,
				handler: function() {
					win.hide();
				}
			}],
			width: 350,
			height: 350,
			resizable: false,
			type: 'utility',
			closeAction: 'hide',
			alwaysInFront: true
		});
	}
	return win;
};

**Mycoding** · 23 May 2011 1:56 AM

I did it

for gray theme I change code in ext-all.css(the part of blue I replace with xtheme-gray.css)

About xtype and chart.
After I did air aplication and installed it chart become work.
I think the matter is in
Ext.chart.Chart.CHART_URL = '/lib/extjs/resources/charts.swf';
It is ignored in debug version or it takes charts.swf from wrong way.

Now I am trying add image in traymenu.
Like this but it is not showen.

Code:

icon: '/resources/images/save.gif',

**Ekambos** · 23 May 2011 12:27 PM

To keep it honest with you i have no idea on how to use Ext-Air. If Makana is reading this maybe he can help ?

Best,

Alain

**makana** · 24 May 2011 8:11 AM

Adobe AIR NativeMenus don't support icons. So the tray menu doesn't.

getting started with air, and extjs-air

Thread Tools

Search Thread

Display

Similar Threads

Need to get started with GWT

Getting Started to Ext GWT

getting started with ExtJS 3

Getting started with ExtJS and having issues with Async Tree

I mean "really" getting started - add Extjs to website?