Executive Strategy 2007

spanflockInternet και Εφαρμογές Web

24 Ιουν 2012 (πριν από 4 χρόνια και 11 μήνες)

280 εμφανίσεις

Ext JS

Overview for:

Austin Flex User Group


July 2010

-

Founder @ Ecor Systems, LLC

-

Chief Consultant @ Ecor Group Consulting


> Web Systems


> Data Warehousing & Business Intelligence

-

B.S. Business Computer Systems

-

15yrs+ Web Experience


Ext JS Apps I’ve Developed:

-

AssetTracker
TM

-

PostIt!

-

Sales & Staffing

-

E
-
Napkin
TM

About Me:

Corey Butler

Sencha makes application frameworks that equip developers to create, deploy and optimize compelling application experiences
using web
-
standard technologies such as HTML5. The company’s flagship product, Sencha Touch, produces cross
-
platform rich
internet applications for modern mobile devices. The product includes a comprehensive mobile UI widget
-
set, a well
-
architected,
extensible component model, and an intuitive, easy
-
to
-
use API. More than one million developers worldwide


representing more
than 150,000 companies


use the Sencha product family to build amazing application experiences.



Sencha develops standardized application frameworks


Sencha Products:



Sencha Touch

(HTML5 Android/iOS devices)



Ext JS

for RAD RIA



Ext GWT

for Java developers/Google Web Toolkit



Ext Designer
, the drag ‘n’ drop IDE



LABS:




Connect, an event
-
driven application server for
Ext JS



jQTouch, the JQuery version of Sencha Touch



Raphael, a rich SVG vector graphic library


Ext JS became Sencha in June, 2010.



Originally backed by Radar Partners (VBulletin) in 2007



$14M investment led by Sequoia Capital in 2010



1M+ Developers, Vibrant Community


Cross
-
browser
client
-
side JavaScript

library for RIAs

What is Ext JS?

Originally built as a YUI extension.

Standalone or YUI/JQuery/Prototype Extension



Customizable/Extensible UI Widgets




Available via Google/CacheFly

Comparable to Flex/AIR

More UI Examples

Layouts, Editors, Forms, Trees, Tabs & Much More!

Why Use Ext JS?


Flexible


Growing Company


Established Technology (JS)


Easy Startup


LGPL 3.0 License


Low Cost Commercial License


When to Use Ext JS


Prototyping


Full RIA





Single Need Widget


Really Basic Content



When
NOT

to Use Ext JS

Flex vs Ext JS

*JS Minification/Obfuscation Available

**CF uses ExtJS Core

Flex

Ext JS

Native Binding

AMF/Binary Sockets

Compiled

Requires Flash Player

Single Native Framework

Constructed Binding

TCP/IP (AJAX)

Interpreted*

No Plug
-
ins Required

Modular Native Framework

ECMA
-
Script base

Themes/Skins

Native inclusion in Adobe ColdFusion**

Eclipse IDE Available

OSS & Commercial Licensing


How it Works

Container

Container





Container

How it Works

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>


<title>
My RIA
</title>



<link href=
"
http://extjs.cachefly.net/ext
-
3.2.1/resources/css/ext
-
all.css
"
/>



<script src=
"
http://extjs.cachefly.net/ext
-
3.2.1/adapter/ext/ext
-
base.js
"/></script>


<script src=
"
http://extjs.cachefly.net/ext
-
3.2.1/ext
-
all.js
"
></script>



</head>



<body>


<script src=
"
myextjsapp.js
"
></script>


</body>


</html>


Ext.onReady(
function
(){




var

header =
new

Ext.Panel({region:
'north'
,html:
'North'
,title:
'Header'
});


var

main =
new

Ext.Panel({



region:
'center'
,



autoLoad:
'mypage.cfm'
,



title:
'Main‘



});


var

left =
new

Ext.Panel({



region:
'west'
,



html:
'Left'
,



width:
300
,



title:
'Left'
,



collapsible:
true



});



new

Ext.Viewport({


layout:
'border'
,


border:
false
,


defaults: {split:
true
,layout:
'fit'
,border:
true
},


items: [header,left,main],


});

});

Basic Layout






Basic Functionality

Basic Skin Example

Async Example

Async Connectivity

var

storeLocales =
new

Ext.data.SimpleStore({



fields: [
'locale'
,
'language'
],



data: []



});


var

locrec =
new

Ext.data.Record.create([



{name:
'locale'
,mapping:
'locale'
},



{name:
'language'
,mapping:
'language'
}



]);


function

loadLanguages() {


Ext.Ajax.request({



url:
'http://mydomain.com/formprocessor'
,



params:{get:
'locales'
},



success:
function
(rsp,obj){




l = Ext.decode(rsp.responseText).locales;




for
(
var

i=0;i<l.length;i++)





storeLocales.add(
new

locrec({






locale:l[i].LOCALE,






language:l[i].LANGUAGE





}));




}




storeLocales.sort('language');




}


});

}


loadLanguages();
//Load the data

({


"locales":[{


"LOCALE":"ja_jp",


"LANGUAGE":"Japanese (Japan)“


},{


"LOCALE":"es_pe",


"LANGUAGE":"Spanish (Peru)“


},{


"LOCALE":"en",


"LANGUAGE":"English“


}]

})

Async Breakdown

var

storeLocales =
new

Ext.data.SimpleStore({



fields: [
'locale'
,
'language'
],



data: []



});


var

locrec

=
new

Ext.data.Record.create([



{name:
'locale'
,mapping:
'locale'
},



{name:
'language'
,mapping:
'language'
}



]);


function

loadLanguages() {


Ext.Ajax.request({



url:
'http://mydomain.com/formprocessor'
,



params:{get:
'locales'
},



success:
function
(rsp,obj){




l = Ext.decode(rsp.responseText).locales;




for
(
var

i=0;i<l.length;i++)





storeLocales.add(
new

locrec
({






locale:l[i].LOCALE,






language:l[i].LANGUAGE





}));




}




storeLocales.sort('language');




}


});

}


loadLanguages();
//Load the data

({


"locales":[{


"LOCALE":"ja_jp",


"LANGUAGE":"Japanese (Japan)“


},{


"LOCALE":"es_pe",


"LANGUAGE":"Spanish (Peru)“


},{


"LOCALE":"en",


"LANGUAGE":"English“


}]

})

Data stores are bound to
components like grids
and combo boxes.

Examples

Questions

1.
Extensibility

2.
Compatibility with other JS Libraries

3.
Licensing

4.
Common Resources

5.
Enterprise Use

6.
Please Ask!!!

Extensibility

Custom Object
-

MyPanel


MyApp.MyPanel =
function
(config) {


MyApp.MyPanel.superclass.constructor.call(
this
,


Ext.applyIf(config, {


title:
’MyApp Default Title’
,


collapsible:
true
,


closable:
false
,


bodyStyle:
’padding:15px; font
-
weight: bold;’
,





})


);

};


Ext.extend(MyApp.MyPanel, Ext.Panel, {


// custom methods go here

});


Ext.reg(‘mypanel’, MyApp.MyPanel);

Using Custom Object



var

obj = {


xtype:
’mypanel’


title:
‘My Title’


};


OR




var

obj =
new

MyApp.MyPanel({


title:
‘My Title’


});







Compatibility

JQuery Extension


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>


<title>
My RIA
</title>



<script src="
jquery.js
"/></script>


<script src=
"
ext
-
3.2.1/adapter/jquery/jquery
-
plugins.js
"/></script>


<script src=
"
ext
-
3.2.1/adapter/jquery/ext
-
jquery
-
adapter.js
"
></script>





<script src=
"
ext
-
3.2.1/ext
-
all.js
"
></script>



<link href=
"
ext
-
3.2.1/resources/css/ext
-
all.css
"
/>



</head>



<body>


<script src=
"
myextjsapp.js
"
></script>


</body>


</html>


Usage


$(document).ready(
function
(){


$('#wheelink').bind('click',
function
() {


Ext.Msg.alert(
'Whee alert!'
,
'Thanks for clicking me, WHEE!'
);


});

});

Resources

http://www.
sencha
.com/deploy/dev/docs/

Icons from http://www.
famfamfam
.com (Silk)

http://www.
sencha
.com/
forum

http://www.
sencha
.com/
blog

JSLint
.com

(JSON)

SPKET

(Eclipse Plugin)

Firebug

for Firefox

More Info @
http://www.sencha.com

Send questions to

corey.butler@ecorgroup.com




@goldglovecb, @ecorgroup




http://www.linkedin.com/in/ecorsystems




http://www.facebook.com/goldglovecb



http://www.facebook.com/ecorgroup




Open Source Example Apps (Require ColdFusion):




http://
open.ecorgroup.com
/surveymanager





http://
open.ecorgroup.com
/assettracker