Sencha Touch basic concepts, pros and cons

Sencha Touch
concepts, pros and cons
EPAM Ukraine, 2013, oleg_gomozov@epam.com

Simple overview
- rich single page application
- touch-oriented UI
- touch events(inc. drag&drop)
- HTML5, CSS3
- device API, audio, video
- responsive design, customizable

Features List UIContro
ls
DataTransport
Other
StructureUtils

Basics
Ext.ns(‘Namespace’);
Ext.define('Namespace.NewClass', {
extend: ‘Ext.Base’,
alias: ‘newclass’,
alternateClassName: ‘SomeClass’,
mixins: [],
requires: ['Ext.Panel’],
config: {},
statics: {},
inheritableStatics: {},
constructor: function(config) {
this.initConfig(config);
this.callParent(arguments);
},
});

Single page application - MVC
<!DOCTYPE html>
<html>
<head>
<title>MvcTouch</title>
<link rel="stylesheet" type="text/css" href="lib/sencha-touch-2.3.0/sencha-touch.css" />
<script type="text/javascript" src="lib/sencha-touch-2.3.0/sencha-touch.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body></body>
</html>

Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name: 'MyApp',
profiles: ['Tablet'],
views: [
],
models: [
],
controllers: [
'Main'
],
launch:function(){
Ext.Viewport.setActiveItem(Ext.create('MyApp.view.Main'));
}
});

View and Controller
Ext.define('MyApp.view.Main', {
extend: 'Ext.navigation.View',
config: {
fullscreen : true,
items: [
{
title: 'My Great App'
},
{
xtype: ‘button’,
id: ‘#coolBtn’
}
]
}
});
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
coolButton: '#coolBtn'
},
control: {
coolButton: {
tap: 'onCoolButtonTap'
}
}
},
launch: function () {},
onCoolButtonTap: function(button) {
}
});

Model, Store and Proxy
Ext.define("MyApp.model.SampleModel", {
extend: "Ext.data.Model",
config: {
idProperty: "id",
fields: [
{ name: "id", type: "integer" },
{ name: "content" , type: "string"
}
]
}
});
Ext.define("MyApp.data.Proxy", {
extend: "Ext.data.proxy.Proxy"
readerwriter: SomeReaderOrWriter
});
Ext.define("MyApp.store.SampleStore", {
extend: "Ext.data.Store",
requires:
["MyApp.model.SampleModel"],
config: {
model: "MyApp.model.SampleModel",
proxy: {
type: "ajax",
api: {
create: "createURL",
read: "readURL",
update: "updateURL",
destroy: "destroyURL"
},
data: [ { id: 1, content: "Text1"}]
});

Component and Container
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'fit',
items: [
{
xtype: 'panel',
html: ‘panel is created by
xtype'
},
{
xtype: 'toolbar',
title: 'So is the toolbar',
docked: 'top'
}
]
});
Ext.define('MyApp.UI.CoolButton, {
extend: ‘Ext.Button’,
config: {
xtype: ‘coolbutton’,
cls: 'cls',
listeners: {
tap: ‘onTapFunc’,
scope: someScope
}
},
initialize: function () {}
onTapFunc: function () {}
});

LHBayout
o
x
VBox
Card
Fit
Docking

Pros
- solid OOP,
- all-in-one(MVC,UI,Data,device API etc.)
- HTML5 API
- good documentation, community and suppot
- nativePhoneGAP easy-to-build hybrid apps
- plugins
- Sencha Architect, Animator , etc.

Cons
- webkit-only
- proprietary license
- “heavy” DOM-elements

Links
http://www.sencha.com/
http://docs.sencha.com/touch/2.3.0/
Q&A

Sencha Touch basic concepts, pros and cons

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (17)

Ähnlich wie Sencha Touch basic concepts, pros and cons

Ähnlich wie Sencha Touch basic concepts, pros and cons (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Sencha Touch basic concepts, pros and cons