Sencha Touch 2 Outline (10/26/12)

sprocketexponentialΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

160 εμφανίσεις

Sencha Touch 2 Outline (
10/26/12)


By Jim Soper


The following is a list of many of the most important pieces in Sencha Touch 2.

The page numbers mostly refer to the pages in the FastTrack to Sencha Touch 2 course manual dating
from May, 2012. They may be
slightly inaccurate.


Docs :

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/



DIRECTORY STRUCTURE // p. 2
-
27



AppName/

index.html

app.js

app/

controller/

model/

profile/

store/

view/

resources/

css/

images/



LAUNCHING



index.html

// p. 2
-
28

<link hre
f="../touch2/resources/css/
sencha
-
touch.css
" rel="stylesheet" type="text/css">

<script src="../touch2/
sencha
-
touch
-
debug.js
" type="text/javascript"></script>

<script src="
app.js
" type="text/javascript"></script>




app.js

// p. 2
-
27++

Ext.application
({
appConfig
}) // p. 2
-
29++

extend
: Ext.app.Controller;

{
appConfig
} :=



name: 'AppName' , // 'AppName' is AlphaNumericCamelCased



controllers
: ['MainController'] // Ext.app.Controller.getController()



models: []



stores: []



views: []



requir
es
: ['ProjectName.path.ClassName'] // or use Ext.
require
()



profiles: ['Phone', 'Tablet'] // p. 7
-
39++

// there may be iOS startup and icon images to specify here



init()
: <function> // called before .launch()



launch()
: <function> // Called when the applicat
ion is ready.

Ext.
Viewport
.
add
({items...})
// p. 2
-
31


For the order of execution in Ext.
application
(), see p. 2
-
29

'Launch Process' in
http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
guide
/
apps
_
intro

Controller#init functions called. An Application is a Controller.

Profile#launch funct
ion called

Application#launch function called

Controller#launch functions called


Ext.Loader.
setPath
('path', 'alias') // can let you define an alias for files and directories



DEFINING CLASSES


http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
guide
/
class
_
sys
tem


Ext.define
('ProjectName.path.NewClassName', {
classConfig
},
afterClassCreatedCallbackFn
)




// ProjectName and NewClassName should be AlphaNumericCamelCased



{
classConfig
} := // p.2
-
29



extend
: 'ProjectName.path.SuperClassName'



requires
: ['ProjectName
.path.ClassName'] // or use Ext.
require
()



config
: {
xyz
: defaultValue , ...} // defines get
Xyz
() and set
Xyz
() // p.2
-
43



apply
Xyz
: function (value) {...} // p. 2
-
44, called before the value is set in
xyz
:



update
Xyz
: function (value) {...} // p. 2
-
44, called
after the value is set in
xyz



constructor
: function({config}) {

this.
callParent
(arguments) ;

this.
initConfig
({config}) ; // required to generate get
Xyz
() & set
Xyz
()

// Ext.Component calls initConfig()

}



statics: {
staticConfig
}


this.
statics
() // returns th
e class of 'this'

In
afterClassCreatedCallbackFn
, 'this' is the newly created class itself



CREATING INSTANCES


http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
api
/
Ext
.
ClassManager
-
method
-
instantiate



var anObject = Ext.
create
('ProjectName.path.ClassName', {
config
})



COMPONENT


Ext.Base
---

Ext.Component
---

Ext.Container
---

Ext.Panel


http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
guid
e
/
components


Ext.
Component

xtype: 'component’

{
componentConfig
} :=



itemId
: ‘id’



html
: 'HTML code' | <element>



contentEl
:

<element> | ‘id’



data
: {} // works in conjunction with tpl



tpl
:



flex
: <number>



ui
: ‘dark’ | ‘light’



centered: <boolean>



docked: 'left' | 'top' | 'right' | 'bottom'


aComponent.
destroy
() // p.3
-
41

aComponent.
show
(<animation>) // p.3
-
42



events := painted
, show



Ext.
Container

xtype: ‘container’


http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
guide
/
layouts

http
://
www
.
sencha
.
com
/
learn
/
working
-
with
-
layouts
-
in
-
ext
-
designer
/


<
layoutType
> := 'hbox' | 'vbox' | 'card' | 'fit' | 'default' //
pg. 3
-
10

<
packType
> := 'start' | 'left' | 'center' | 'end' | 'right' | 'justify’ // for the primary axis

<
alignType
> := 'start' | 'top' | 'center' | 'middle ' | 'end' | 'bottom' | 'stretch' | 'stretchmax'

// pg. 3
-
12 // for the secondary axis

<
animType
> :
= 'cube' | 'fade' | 'fadeout' | 'flip' | 'pop' | 'popout' | 'slide' | 'slideout' // pg. 3
-
15

<
directionType
> := 'left' | 'right' // for cube, flip, slide

<
outType
> := <boolean> // for fade, pop, slide



{
containerConfig
} := {
componentConfig
} +



layout
: <
lay
outType
> | { type: <
layoutType
> |

{ type: 'vbox' , pack: <
packType
> } |

{ type: 'hbox' , align: <
alignType
> } |

{ type: 'card' , animation: { type: <
animType
> , direction : <
directionType
> ,
out : <outType> } }



flex
: <integer>



items
: [ { <
componentConfig
>
} , ... ]



defaults
: { ... } , // these become the default config properties in the items



defaultType
: <xtype string>



activeItem: {object} // only useful in a card layout



scrollable: false | true | 'horizontal' | 'vertical' | 'both' | {scrollerObject}

// E
xt.scroll.Scroller



control: { as for controllers }





data
: [<objects...>]



tpl
: See p. 3
-
47++

Ext.Template (used as value for a container's tpl: config property)

see also:

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
ap
i
/
Ext
.
DomHelper


'<
tpl

for=".">',

'<div>
{#}{
fieldName
}
</div>','</tpl>'] // p. 3
-
47

'{fieldName:
formatMethodName
(args)}' // p. 3
-
49, Ext.util.Format

'{fieldname:customMethod}' // p. 3
-
50

'<tpl
if
=<condition>>' | '<tpl elseif=<condition>> '

// p. 3
-
51

'<tpl
switch
="fieldName">', <tpl case="value">', '<tpl default>' // p. 3
-
51

'fieldName
+|
-
|*|/
value' // p. 3
-
52

'{[
javascript
]}' // p. 3
-
52


// p.3
-
41

aContainer.
add
([components])

aContainer.insert(index, <component>)

aContainer.
remove
(<compo
nent>, <destroyBoolean>)

aContainer.removeAt(index)

aContainer.
setActiveItem
(index | <component>) // p.3
-
42



Ext.
Panel

Panels are most useful as Overlays
-

containers that float over your application.

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
example
/
overlays

subclasses are forms.Panel, MessageBox, and Picker



BUTTON


Ext.Component

---

Ext.Button

---

Ext.Spacer


Ext.
Button

xtype: 'button'

{
buttonConfig
} := {
co
mponentConfig
} + // pg. 3
-
18

text: <string>

handler: function( button, event ) { ... } // runs when button is tapped

ui: 'normal' | 'back' | 'forward' | 'round' | 'action' | 'confirm' | 'decline' // pg. 3
-
20

badgeText: <string>

icon: 'url'

iconAlign: 'left
' | 'top' | 'right' | 'bottom' // default is 'left'

iconCls: 'cssClass' | <
iconClassName
s>

iconMask: <boolean> // Generally must be
true

for <
iconClassName
s> to work


<
iconClassName
> := ‘action' | 'add' | 'arrow_down' | 'arrow_left' | 'arrow_right' |

'arro
w_up' | 'compose' | 'delete' | 'organize' | 'refresh' | 'reply' | 'search' |
'settings' | 'star' | 'trash' | 'maps' | 'locate' | 'home'

// pg. 3
-
19, touch2/resources/themes/images/default/pictos




Ext.Container

---

Ext.ToolBar

---

Ext.SegmentedButton


Ex
t.
ToolBar

// pg. 3
-
16

xtype: 'toolbar'

{
toolBarConfig
} := {
containerConfig
} +



docked: 'left' | 'top' | 'right' | 'bottom'



title: <string>




Ext.
SegmentedButton

// pg. 3
-
21

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
ap
i
/
Ext
.
SegmentedButton

xtype: 'segmentedButton'

{
segmentedButtonConfig
} := {
containerConfig
} +



allowMultiple: <boolean>



items: {text: 'button1', pressed: <boolean>} // the items are buttons



TAB PANEL


Ext.Component

---

Ext.Button
---

Ext.
Tab

---

Ext.Container

---

Ext.Toolbar
---

Ext.
TabBar

---

Ext.
TabPanel


Ext.
tab.Bar

aka Ext.
TabBar

/ pg. 3
-
34

xtype: 'tabbar'

{
tabBarConfig
} := {
tabConfig
} +



activeTab: <integer> | '<id>' // see parseActiveTab



Ext.tab.
Tab

aka Ext
.
Tab

extend: Ext.Button

xtype: 'tab'

{
tabConfig
} := {
buttonConfig
} +



title: <string>


Ext.
tab.Panel

aka Ext.
TabPanel

// pg. 3
-
30,33

xtype: 'tabpanel'

{
tabPanelConfig
} := {
containerConfig
} +



tabBar: {
tabBarConfig
} // optional



tabBarPosition: 'top' | 'botto
m'



activeItem: <integer> | '<id>'



items: [ {
tabConfig
} ]





COMPLEX CONTAINERS


Ext.Container

---

Ext.
DataView


---

Ext.
List

---

Ext.
NestedList

---

Ext.
NavigationView


---

Ext.Panel
---

Ext.
Carousel


Ext.carousel.
Carousel

aka Ext.
Carousel

// pg. 3
-
29

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
example
/
carousel

xtype: 'carousel'

{
carouselConfig
} := {
panelConfig
} +



direction: 'horizontal' | 'vertical'



indicator: <
boolean>


aCarousel.next() // moves to the next card

aCarousel.previous() // moves to the previous card

aCarousel.setActiveItem(<component>) // moves to the passed card/component


Ext.dataview.
DataView

aka Ext.
DataView

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
guide
/
dataview

xtype: dataview

{
dataViewConfig
}:= // p. 4
-
25



store
: Ext.getStore('storeName') || {storeConfig}



itemTpl
: 'itemTemplate'



mode: 'SINGLE' | 'SIMPLE' | 'MULTI'



itemConf
ig
: {config} // only used when useComponents is true.



tapEvents := itemtap, itemsingletap, itemdoubletap, itemtaphold, itemswipe


Set the containing panel's layout attribute to 'fit' in order to constrain the entire contents of a
DataView.



Ext.dataview
.
List

aka Ext.
List

// p. 4
-
31

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
example
/
list

xtype: 'list'

extend: Ext.dataview.DataView


{
listConfig
} += {
dataViewConfig
} // p. 4
-
32



grouped
: <boolean>



indexBar
: <boolean
>



pinHeaders: <boolean>



ui: 'normal' | 'round'



onItemDisclosure
: <boolean> | function(record, node, index){p. 4
-
33,34} | {object}

True to display a disclosure icon on each list item. The list will still fire the disclose event,
and the event can be stopped

before itemtap. By setting this config to a function, the
function passed will be called when the disclosure is tapped. Finally you can specify an
object with a 'scope' and 'handler' property defined. This will also be bound to the tap
event listener and
is useful when you want to change the scope of the handler.



disclosureProperty
: String

A property to check on each record to display the disclosure on a per record basis. This
property must be false to prevent the disclosure from being displayed on the it
em.


events := disclose + dataView.events



Ext.dataview.
NestedList

aka Ext.
NestedList

// p. 4
-
54++

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
example
/
nested
-
list

xtype: 'nestedlist'


{
nestedListConfig
} := // p. 4
-
58,59



store
: Ext.getSt
ore('treeStoreName')



title: 'toolBarTitle'



backButton : {buttonConfig}



displayField : 'text'

Display field to use when setting item text and title. Ignored when overriding
getItemTextTpl or getTitleTextTpl for the item text or title.



data
: {object} // The
initial set of data



detailCard
: <component>



listConfig
: config object which is merged with the default configuration used to create
each nested list.



onItemDisclosure
: <boolean> | <function>


tapEvents = itemtap, itemdoubletap, leafitemtap


Ext.
navigation.
View

aka Ext.NavigationView // p. 4
-
35

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
example
/
navigation
-
view

xtype: ‘navigationview’

{
navigationViewConfig
} :=



autoDestroy
: <boolea
n>


aNavView.
push
(<component>)

aNavView.
pop
() // p.4
-
36

aComponent.
destroy
()



PLUGINS
// p. 4
-
48,49

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
example
/
pull
-
to
-
refresh
-
and
-
load
-
more


Ext.plugin.PullRefresh

Ext.plugin.ListPaging



MESSAGE


Ext.Panel
---

Ext.Sheet
---

Ext.MessageBox


Ext.
Msg

aka Ext.
MessageBox



Ext.Msg.
alert
('title', 'message', ...) // p. 5
-
30

Ext.Msg.
confirm
('title', 'message', ...) // p. 5
-
31

Ext.Msg.
prompt
('title', 'message', ...) // p. 5
-
31



Ext.Viewport.
setMasked
(<boolean>) // p. 4
-
56




MEDIA


Ext.
Media

{mediaConfi
g} := // p. 7
-
2



url
: 'url'


Ext.
Audio

// p. 7
-
4

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
example
/
audio

xtype: 'audio'

// On Android devices, the audio tags controls do not show.

// You must use th
e play, pause and toggle methods to control the audio.


Ext.
Video

// p. 7
-
5

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
example
/
video

xtype: 'video'

// On Android 2+, the video will appear and play on

first attempt, but any attempt afterwards will
not work.



Ext.
Img

// p. 7
-
3++

xtype: 'image'

{
imageConfig
} :=

src
: 'path'



height: <pixels>



width: <pixels>



MAP


Ext.
Map

// p. 7
-
9++

http
://
docs
.
se
ncha
.
com
/
touch
/2
-
0/#!/
example
/
maps



FORM


Ext.Container

---

Ext.Panel

---

Ext.form.Panel

---

Ext,Sheet
---

Ext.picker.Picker
---

Ext.picker.Date

---

Ext.form.FieldSet


Ext.form.
Panel

(Unit 5)

http
://
docs
.
sench
a
.
com
/
to
uch
/2
-
0/#!/
guide
/
forms



xtype: formpanel



aForm.
setRecord
(
aModelRecord
)

// Loads matching fields from a model instance into this form, p. 5
-
30

aForm.
setValues
({
config
})

aForm.
getValues
()

aForm.
submit
({
url
:'url',
method
: submitMethodName | 'POST', ... ) // p. 5
-
35,36


Ext.form.
FieldSet

// p. 5
-
12

xtype: 'fieldset'



title : <string>



FORM FIELD


Ext.Component

---

Ext.field.Field

---

Ext.field.Checkbox
---

Ext.field.Radio

---

Ext.field.Slider

---

Ext.field.Toggle

---

Ext.field.Text

---

Ext.field.DatePicker

---

Ext
.field.Email

---

Ext.field.Hidden

---

Ext.field.Password

---

Ext.field.Search

---

Ext.field.Select

---

Ext.field.TextArea

---

Ext.field.Url

---

Ext.field.Number
---

Ext.field.Spinner



Ext.field.
Field

aka Ext.form.Field // p. 5
-
2++


xtype: ‘field’

{
fieldCo
nfig
}:=



label: <string>



labelAlign: 'left' | 'top' | 'right' | 'bottom'



name: 'htmlName'



placeholder: 'defaultString'



required: <boolean>



value: <value>


methods := getValue(), setValue(), hide(), show(), reset(), focus() // p. 5
-
25



Ext.field.
Text

// p.5
-
3

xtype: 'textfield'


component: {type: 'tel'} // inner component for this field

defaults to: {xtype: 'input', type: 'text'}


events := blur, change, focus, keyup // p 5
-
24


Ext.field.
Checkbox
, xtype: 'checkboxfield' // p. 5
-
13

Ext.field.
DatePicker
, xtype
: 'datepickerfield' // p.5
-
11

Ext.field.
Email
, xtype: 'emailfield' // p. 5
-
7

Ext.field.
Hidden
, xtype: hiddenfield' // p. 5
-
18

Ext.field.
Number
, xtype: 'numberfield' // p. 5
-
10

Ext.field.
Radio
, xtype: radiofield' // p. 5
-
14

Ext.field.
Password
, xtype: 'passw
ordfield' // p. 5
-
5

Ext.field.
Search
, xtype: 'searchfield' // p. 5
-
6

Ext.field.
Select
, xtype: 'selectfield' // p. 5
-
15 works sort of like a combo box

Ext.field.
Slider
, xtype: 'sliderfield' // p. 5
-
16

Ext.field.
Spinner
, xtype: 'spinnerfield' // p. 5
-
17

Ext.
field.
TextArea
, xtype: 'textareafield' // p. 5
-
9

Ext.field.
Toggle
, xtype: 'togglefield' // p. 5
-
18

Ext.field.
Url
, xtype: 'urlfield' // p. 5
-
8



MODEL


Ext.data.
Model


http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
guide
/
models

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
api
/
Ext
.
data
.
Model



{
modelConfig
} :=



idProperty: 'fieldName
' // default is 'id'



fields
: ['fieldName' | {
fieldConfig
}]



validations
: [{
validationConfig
}]



proxy
: 'proxyType' | {type : 'proxytype', url: 'url'}



associations
: [{model: 'modelName', type: 'belongsTo' | 'hasOne' | 'hasMany'}]

// see Ext.data.association.
Association



belongsTo: 'modelName' // Ext.data.association.BelongsTo



hasMany: ['modelName' | {model: 'modelName', name: 'functionName'}]

// Ext.data.association.HasMany



hasOne: 'modelName' // Ext.data.association.HasOne



{
fieldConfig
} := // Ext.data.
Fie
ld



name
: <string>



type
: <
fieldType
> // optional



defaultValue
: <value>



convert
: function(value, record) {return newValue} // p.4
-
4



dateFormat : <string> // Ext.data.Field.dateFormat, p.4
-
4



sortType : A function which converts a field's value to a compar
able value in order. See
Ext.data.SortTypes



sortDir : 'ASC' | 'DESC'


<
fieldType
> := 'auto' | <string> | 'int' | 'float' | 'boolean' | 'date'

// 'auto' means no type conversion, p.4
-
3

// You can create your own field types in the Ext.data.Types class. p.
4
-
3



{
validationConfig
} := // p. 4
-
6



field : 'fieldName'



type : <
validationType
>



message : <string>



list : [<included or excluded values>]



matcher : <regex for format validation>



min | max : <int for numeric validation>


<
validationType
> := 'presence' | '
length' | 'format' | 'inclusion' | 'exclusion' | // p.4
-
6, 5
-
32

<Ext.data.Validations.
customMethodName
> // p. 4
-
7



var aRecord = Ext.
create
('AppName.model...ModelName', {
fieldConfig
}) // p.4
-
5

aRecord.
get
('fieldName')

aRecord.
set
('fieldName', value) // p.
4
-
5

aRecord.
save
(success:<callback>, failure:<callback>)

// model must have a proxy, p. 5
-
37


errorsCollection = aRecord.
validate
() // (p. 4
-
8)

// Ext.data.Errors is a collection of Ext.data.Error objects


if (! errorsCollection.
isValid
()) {// p.4
-
8

err
orsCollection.
each
(function (errorObject) {

errorObject.getField() ...

errorObject.getMessage() ...

}}

errorsCollectionForAGivenField = errorsCollection.
getByField
('fieldName')



STORE


Ext.data.
Store

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
guide
/
stores

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#
!/
api
/
Ext
.
data
.
Store



<stor
etype> := 'store' | 'tree' | 'direct' (Ext.data.DirectStore) | 'array' (Ext.data.ArrayStore)


{
storeConfig
} := // p.4
-
18



data
: [objects | modelRecords] // optional, p.4
-
20



model
: 'modelName'



proxy
: 'proxyName' | proxyObject





autoLoad: <boolean> | {object
} // default is null



autoSync: <boolean> // default is false



clearOnPageLoad: <boolean> // default is true



pageSize: <number> // default is 25, p. 4
-
22,46





filters
: [{property: 'fieldName', value: 'value'} | {filterFn: function (item) {return
<boolean>}}]

// p.4
-
21





groupField: 'fieldName' // field by which to group data, p. 4
-
23



groupDir: 'ASC" | 'DESC' // p. 4
-
23



grouper
: {groupFn: function(record) {return 'groupName'}}





sorters
: [{property: 'fieldName', direction: 'ASC' | 'DESC'}] // p. 4
-
21



// Hand
ling large & remote datasets, p. 4
-
19,22,46
-
47



remoteGroup: <boolean>



remoteFilter: <boolean>



remoteSort: <boolean>



Ext.
getStore
('storeName')


aStore.
load
({callback: <function>}, scope: {object}) // p.4
-
16, 8
-
3

aStore.
sync
() // batch synchronizes the sto
re with its proxy // p.4
-
13, p. 8
-
3

Ext.data.StoreManager.
unregister
(aStore) // destroys the store // p. 4
-
26



aStore.
add
(records) // p. 8
-
3

aStore.
remove
(records) // p. 8
-
3

aStore.removeAt(index) // p. 8
-
3



aStore.
find
('fieldName', <value>, ...)

aStore.
getAt(index) // p. 8
-
3

aStore.getById(<id>)

aStore.
each
(<function>, ...) // p. 8
-
3



aStore.
sort
('fieldName' | [sorterObjects], 'ASC' | 'DESC', 'prepend' | 'append') // p. 4
-
21

// default is to clear sorters

aStore.
filter
('fieldName' | [filterObjects], 'va
lue', ...) // p. 4
-
21

aStore.filterBy(<function>)

aStore.
getGroups
() // An array of {name: 'groupName', children: [records]}. p. 4
-
23



aStore.
getCount
() // The number of cached records, p. 8
-
3

aStore.
getTotalCount
() // The total number of records in the f
ull dataset





Ext.data.
TreeStore

// p. 4
-
54,55

extend: Ext.data.AbstractStore

store: 'tree'

{
treeStoreConfig
} :=



root: {object}



defaultRootId: <string> // default is 'root'



defaultRootProperty: <string> // default is 'children'



Text???????



PROXY


Ext.d
ata.proxy.
Proxy

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
guide
/
proxies

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
api
/
Ext
.
data
.
proxy
.
Proxy



{
proxyConfig
} :=



type: 'ajax' | 'jsonp' | 'memory' | 'localstorage' | 'sessionstorage' | 'rest'



model: 'modelName'

Ext.data.proxy.Client

Ext.data.proxy.LocalStorage // p. 8
-
2
++

window.localStorage.clear() // p. 8
-
4

window.localStorage.removeItem() // p. 8
-
4


Ext.data.proxy.
MemoryProxy


Ext.data.proxy.
Server

// p.4
-
14

{
serverProxyConfig
} +=



url
: ‘url’



reader
: {type: 'json' | 'xml' | {custom}}



writer
: {type: 'json' | 'xml' | {cu
stom}}



api
: {create:'url', read:'url', update:'url', destroy: 'url'}



nocache: defaults to true



timeout: <milliseconds> // default is 30000


Ext.data.proxy.
Ajax

// p. 4
-
15,16, 5
-
37

{
ajaxProxyConfig
} +=

headers: {headerName: headerValue}} // Add headers to a
dd to the Ajax
request

Must use the same domain

able to Create Read Update Destroy


Ext.
Ajax.request
(url:'url',success:<callback >,failure:<callback>}) // p. 4
-
56


http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
guide
/
ajax

Ext.data.proxy.
Rest

extend: Ext.data.proxy.Ajax


Ext.data.proxy.
JsonP

// p. 4
-
16,17,18, 5
-
38

aka 'scripttag'

can get data from other domains

The content passed back from a server resource requested by a JSON proxy must be
executable JavaScript source code because it is used a
s the src attribute of a <script>
tag.

In order for the browser to process the returned data, the server must wrap the data
object with a call to a callback function, the name of which is passed as a parameter by
the JSONP Proxy.


Ext.data.
JsonP.request
(ur
l:'url',success:<function>, failure:<function>}) // p. 4
-
57


Ext.data.proxy.
Direct

// p. 4
-
13

Uses Ext.direct.Manager to send requests.

{
directProxyConfig
} += {directFn: <function>}





CONTROLLER


Ext.app.
Controller

// p. 3
-
34,39++

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
guide
/
controllers



{
controllerConfig
}:=



refs
: [{'
refName
':'selector', ...}]

// creates a thisController.get
RefName
() method /
/ p. 3
-
35,39



control
: {
refName

|| 'selector':{eventName:'
anEventHandlerName'
} , ...} // p. 3
-
40



routes
: {'urlAnchor': 'methodName', ...}



init
: <function>



anEventHandlerName'
: function(component, event) {...}



SELECTORS


http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
api
/
Ext
.
DomQuery


'selector'
:= // p. 3
-
37,

'type' | '.xtype'

'#id'

'[property]' | '[property="value"]'

'cssSelector'

'xpath'

'{method()}'

'field:
pseudoName



Ext.ComponentQuery.pseudos.
pseudoName
=function(items){...; return validItems} // p. 3
-
38



Ext.ComponentQuery.
quer
y
(
'selector'
)

aComponent.
up
(
'selector'
) // p. 3
-
38

aContainer.
down
(
'selector'
) // p. 3
-
38

aContainer.
query
(
'selector'
)



Ext.
getCmp
('id') // p. 3
-
36

Ext.
get
('id' | <Ext.Element> | <DomNode> ) // p. 2
-
32 Returns and Ext.dom.Element



Ext.
DomQuery

.
select
(
's
elector'
,...) // returns an array of DOM elements which match the selector

.selectNode(
'selector'
,...) // Selects a single element.

.is('id' | <HTMLElement> | [array], 'selector') // returns <boolean>



EVENTS


http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
guide
/
events



Note: all components are Ext.mixin.Observable

config: {listeners: {eventName:<function>} || {eventName:{scope:{object}, fn:<function>,
buffer:<milliseconds>}}} // p. 5
-
24



anObservable.addListener('
eventName', <function> ...)

anObservable.on('eventName', <function> ...) || anObservable.on({eventName:<function>}, ...)

anObservable.removeListener('eventName', <function>, ...)

anObservable.un('eventName', <function>,...)



Ext.Button has a config proper
ty: {handler: <function>}



BUILDING


There is a new version of Sencha Command announced 9/12

http
://
www
.
sencha
.
com
/
blog
/
all
-
new
-
sencha
-
cmd
/


See also

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
guide
/
command

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
guide
/
building

http
://
www
.
sencha
.
com
/
blog
/
behind
-
sencha
-
command
-
and
-
the
-
build
-
process

video :

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
guide
/
getting
_
started



On Windows, the Sencha command file is in touch2/command/sencha.js



See also
http
://
www
.
sencha
.
com
/
learn
/
getting
-
started
-
with
-
sencha
-
touch
-
2/

they use
sencha generate app
APPNAME APPFOLDER




CSS THEMING (SASS)


Unit 6

http
://
docs
.
sencha
.
com
/
touch
/2
-
0/#!/
video
/
theming

http
://
sass
-
lang
.
com
/

and
http
://
sass
-
lang
.
com
/
docs
.
html



CHARTS

(Under construction)



SENCHA.IO // p. 4
-
65++

Can adjust sizing, file formats, and more.

<img src='http://src.sencha.io/http://aDomain.com/fileName.jpg'>




UTILITY OBJECTS



Ext.A
rray // pg. 2
-
50

Ext.Array.erase(array, startIndex, removeCount) : Array

Equivalent to the Array.splice().

Ext.Array.filter(array, function, scopeObject) : Array

Returns a new array with all of the elements for which function returns 'true'.

Ext.Array.pluc
k(array, 'propertyName') : Array

Aggregates the value of a property from each item in the array.

Ext.Array.remove(array, item) : Array

Removes the specified item from the array if it exists.



Ext.Date // pg. 2
-
51

Ext.Date.
now
() : Date // returns the curre
nt date/time.

Ext.Date.parseFunctions // see API doc



Ext.Function // pg. 2
-
52

Ext.Function.
bind
(function, [scopeObject], [args], [appendArgs]) : Function

Ext.bind is alias for Ext.Function.bind

Creates a new function based on the provided function and wi
ll change the scope from 'this' to
whatever is provided as an object scope. You can optionally append an array of arguments

Ext.Function.
defer
(function, milliseconds, [scopeObject], [args], [appendArgs]) : Number

Calls function after the number of millisec
onds specified.

Ext.defer is alias for Ext.Function.defer.

Ext.Function.
flexSetter
(function(name, value) {...}) : Function // pg. 2
-
53

Acts as a wrapper around another function which accepts 2 arguments for name & value.Allows
for setting multiple name
-
val
ue pairs.



Ext.Number

Ext.Number.constrain()

Ext.Number.from()

Ext.Number.snap()

Ext.Number.toFixed()



Ext.Object // pg. 2
-
56

Ext.Object.
each
({object},<function>)

Ext.Object.
fromQueryString
(<string>)

Ext.Object.
toQueryString
({object})

Ext.Object.
toQueryO
bject
(name,{object})

Ext.Object.getValues({object})



Ext.String // pg. 2
-
58

Ext.String.
urlAppend
()



Ext.util.
Format

// p. 3
-
48,49

Ext.util.Format.
date
(value)



both Ext.
String

& Ext.util.
Format

.ellipsis(value,length)

.escape(<string>)

.escapeRegex<strin
g>)

.
format
('formatString', args)

.
htmlEncode
(<string>)

.
htmlDecode
(<string>)

.leftPad(<string>, size)

.repeat('patternString', count, 'separatorString')

.trim(<string>)

.toggle(<string>,'value','other')