SALESFORCE ADMINISTRATION
|SENCHA TOUCH |
| |
CONTENT
1 Introduction 5
1.1 Basic syntax 7
1.1.1 Classes 7
1.1.2 Creating Objects 10
1.1.3 Application Example 11
1.1.4 JSON 12
2 Setup 13
2.1 Sencha Touch SDK 13
2.1.1 Install Sencha Touch 2 SDK - Free Commercial Version 14
2.1.2 Install Sencha Touch 2 SDK - Open Source Version 16
2.1.3 Use Sencha Touch SDK to Create Application with single JS File 18
2.1.4 Use Sencha Touch SDK to Create Application with multiple JS Files 20
2.2 Sencha Touch Cmd 22
2.2.1 Install Sencha Touch Cmd 23
2.2.2 Use Sencha Cmd to Create Application Skeleton 25
2.2.3 Use Sencha Cmd to Deploy Application 29
2.3 Ruby 31
3 Objects 32
3.1 Containers 34
3.1.1 Container 35
3.1.2 Panel 36
3.1.3 Tabbed Panel 37
3.1.4 Carousel 38
3.1.5 Navigation View 39
3.2 Layouts 41
3.2.1 Auto Layout 42
3.2.2 Fit Layout 43
3.2.3 Card Layout 44
3.2.4 vbox Layout 46
3.2.5 hbox Layout 48
3.3 GUI Components 50
3.3.1 Label 52
3.3.2 Field Set 54
3.3.3 Text Field 56
3.3.4 Number Field 58
3.3.5 Radio Field 60
3.3.6 Select Field 62
3.3.7 Toggle Field 64
3.3.8 Checkbox Field 66
3.3.9 Text Area Field 68
3.3.10 List 70
3.3.11 Button 74
3.3.12 Toolbar 77
3.3.13 Titlebar 79
3.3.14 Alert 81
3.3.15 Prompt 82
3.3.16 Confirm 83
3.4 Listeners 84
3.4.1 Add Listeners 84
3.4.2 Add Listener Dynamically 86
3.4.3 Remove Listener 87
3.4.4 Remove Listener with delay 88
3.4.5 Use Listener only once 89
3.4.6 Create and fire custom Event 90
3.4.7 Get Event Data 91
3.5 Data 92
3.5.1 Data Store 93
3.5.1.1 ArrayStore 94
3.5.1.2 Store 96
3.5.1.2.1 Inline data 97
3.5.1.2.2 Data from file 98
3.5.1.2.3 Data from PHP 100
3.5.2 Data Model 102
3.5.3 Data Proxy 104
4 Miscellaneous 105
4.1 Themes 105
4.1.1 Apply Theme 106
4.1.2 Customize Theme 108
4.1.3 Optimize Theme 110
4.2 CSS 112
4.2.1 Text Field CSS 113
4.3 Debug 115
4.3.1 console.log 115
4.3.2 Alert 117
4.4 HTTP 118
4.4.1 Ext.Ajax.request 118
5 Examples 119
5.1 General Examples 119
5.1.1 Panel with List 120
5.1.2 Reload store using different URL 121
5.1.3 Manually load store data into GUI component 124
6 Related Technologies 127
6.1 Eclipse 127
6.1.1 Create Project 128
6.1.2 Create Sencha Touch App Using Eclipse 129
6.1.3 Setup New Sencha Touch Version in Eclipse 131
6.2 IIS Web Server 133
6.2.1 Start IIS Manager 133
6.2.2 Setup JSON MIME type on IIS 135
6.2.3 Add Virtual Directory to IIS 137
6.2.4 Allow access to IIS from mobile device 140
6.2.5 Access IIS from mobile device 141
6.3 iOS 144
6.3.1 Add Home Screen icon for Web Site 145
6.3.2 Define Home Screen icon for Web Site 146
6.3.3 Define Splash Screen 147
6.3.4 Adjust Status Bar Style 149
7 Errors 150
7.1 Setup 150
7.1.1 org.mozilla.javascript.EvaluatorException 150
7.2 Common 150
7.2.1 No Java virtual machine was found 150
7.2.2 Word Style changes code highlighting 152
7.2.3 App displays only one component 153
7.2.4 Screen jumps vertically as you type 154
7.2.5 tabBarPosition : 'bottom' not shown 154
7.2.6 ReferenceError: Can't find variable: Ext 155
7.2.7 Resource interpreted as Script but transferred with MIME type text/html 155
7.2.8 Uncaught TypeError: Object # has no method 'onWindowUnload' 156
7.2.9 Empty screen if launched from home screen 156
7.2.10 Address bar is not hidden 156
7.2.11 List is not scrolling 157
7.2.12 Uncaught TypeError: Cannot read property 'dom' of null 157
7.2.13 Store is not reloaded after changing URL 157
7.3 Data 158
7.3.1 Store is not loaded 158
Introduction
Info
• Sencha Touch is Mobile Web Framework for creating web pages for mobile devices that look like native applications.
• Sencha Touch home page is at .
• Following info is based on
•
How it works
• Sencha Touch 2 is bunch of JavaScript and CSS files used to create complex HTML structures.
• For instance instead of directly using bunch of HTML elements to create drop down list you can use specific Sencha Touch JavaScript class to create the same thing with just few parameters.
• Downside is that you have to learn complete new set of JavaScript classes which use quite complex logic.
• Sencha Touch runs inside a browser just like other mobile web frameworks like jQueryMobile or JQTouch.
Access to native functionality
• Sencha Touch is based on HTML5, CSS3 and JavaScript and therefore it doesn't have access to any device native API’s.
• You can use PhoneGap or Titanium which wrap a browser around your app allowing your application
● to run locally on mobile device
● to have access to some of the device functionalities not accessible through built in Web Browser
Web Application
• Web app runs in your browser.
• Web app is built using web standards like HTML5, CSS3 and JavaScript.
• Web app has limited access to device resources and functionality.
Native Application
• Native app runs locally on your device.
• Native app is built using platform and language specific API’s native to that device.
• Native app has full access to device resources and functionality.
Links for Sencha Touch
Official Documentation
• Documentation
• API Documentation
• Guides
• Videos
• Examples
Official Forums
• Forums List
• Q&A
• Discussions
End Results
• If viewing Sencha Touch Web Page using Mobile Web Browser the end result will look a lot like real native iOS application.
• Mobile Safari will remove address and search bar from the top (which might reappear briefly while changing orientation) leaving only bottom status bar.
• Wrapping Sencha Touch App in a wrapper like Phone Gap, which acts like full screen Web Browser, result will look completely like a native application.
• Additionally Phone Gap will give you access to phone functions not accessible through normal Mobile Web Browser.
Mobile Safari Web Browser Google Chrome Web Browser
|[pic] | |
| |[pic] |
1 Basic syntax
Info
• This chapter describes some of the basic Sencha Touch concepts.
1 Classes
Info
• This tutorial is based on .
• Another way of creating a class is by using var peopleStore = new Ext.data.Store({
Define Prototype/Class
• Since Java Script doesn't have classes, just Objects, Sencha uses a trick to create a class equivalent.
• This trick is in the form of function Ext.define(className, members, onClassCreated);
• Object that is logically used as a template to create other Objects, instead of using a Class, is called Prototype.
• Here is how you define prototype Object in Sencha Touch.
Define Prototype Object
Ext.define('Animal', {
config: {
name: null
},
constructor: function(config) {
this.initConfig(config);
},
speak: function() {
alert('grunt');
}
});
Create Object from Prototype
• We can now use previously defined Prototype to create specific animal called Bob and make her speak.
Create specific Animal
var bob = Ext.create('Animal', {
name: 'Bob'
});
bob.speak(); //alerts 'grunt'
Inheritance
• We can create new Prototype by inheriting from an existing one.
• Here we create Human Prototype which inherits everything from Animal Prototype.
• We also override speak() function so that it displays name.
Create Human Prototype which inherits from Animal Prototype
Ext.define('Human', {
extend: 'Animal',
speak: function() {
alert(this.getName());
}
});
Create specific Human
var bob = Ext.create('Human', {
name: 'Bob'
});
bob.speak(); //alerts 'Bob'
config
• Main reason for placing variable under config is for Sencha to automaticaly create following functions for such variable
● getter function getName() that returns the current value of variable
● setter function setName() that sets a new value to variable and calls applier and updater functions
● applier function applyName() called at the beginning of the setter function BEFORE the value is changed.
. Redefining applier function allows you to run specific functionality before the value is changed
. Setter function will save value returned by applier function.
. If applier function returns false value will not be changed.
● updater function updateName() called at the end of the setter function AFTER the value has been changed.
. It is called ONLY if the value has been changed; if new value is the same as last one it is not called.
• You are advised to
● access variable through getter and setter methods
● to redefine applier and updater functions which are called by setter function
• Update and apply methods get called on component instantiation too while using Ext.define() or Ext.create().
• Config parameter will do its magic only while using Ext.define() or Ext.create().
• If you use basic JSON syntax to create an Object with config parameter these variables will not get above functionality.
Use applyName() to confirm Name change
Ext.define('Human', {
extend: 'Animal',
applyName: function(newName, oldName) {
return confirm('Are you sure you want to change name to ' + newName + '?')? newName : oldName;
}
});
var bob = Ext.create('Human', {
name: 'Bob'
});
bob.setName('Fred'); //opens a confirm box, but we click No
bob.speak(); //still alerts 'Bob'
Use applyName() to edit Name change by adding "Mr." prefix
Ext.define('Human', {
extend: 'Animal',
applyName: function(newName, oldName) {
return 'Mr. ' + newName;
}
});
var bob = Ext.create('Human', {
name: 'Bob'
});
bob.setName('Fred'); //opens a confirm box, but we click No
Use updateName() to inform about changed Name.
Ext.define('Human', {
extend: 'Animal',
updateName: function(newName, oldName) {
alert('Name changed. New name is: ' + newName);
}
});
//creating this will cause the name config to update, therefor causing the alert
var bob = Ext.create('Human', {
name: 'Bob'
});
// changing it will cause the alert to show again
bob.setName('Ed');
2 Creating Objects
Info
• This tutorial is based on .
Info
• When creating Objects you can use
● pure JSON syntax or
● function Ext.create('Ext.Button') which is preferred way in order to register the object to be able to add Listeners later
Pure JSON
• Sencha Touch uses JSON syntax for representing Objects which means that each Object
● is defined with curly brackets {}
● contains simple key-value pairs where key is a simple string and value can be
○ string
○ array designated using square brackets []
○ function designated using function() {...}
○ other object designated using curly brackets {} as mentioned before
Button Object
//CREATE BUTTON.
var button = {
xtype : 'button',
text : 'Button',
listeners : {
tap : function() {
alert("Button was pressed");
}
}
};
Ext.create()
• Another way of creating an Object is to use function Ext.create() as shown below where
● first parameter defines type of Object
● second parameter is Object in JSON syntax defining aditional properties
//CREATE BUTTON USING FUNCTION.
var button2 = Ext.create('Ext.Button', {
text : 'Button',
listeners : {
tap : function() {
alert("Button was pressed");
}
}
});
3 Application Example
Info
• Here is an example of a very simple Sencha Touch application with two buttons which display message when taped.
• Application has only two files
● Custom made Button.html which referenced two files from Sencha Touch and our custom made Button.js
● Button.js which contains the actual application written in Java Script
• Button.js shows two different ways of creating an object, in this case a button
● first way is to use a JSON syntax
● second way is to use Ext.create() function
• Example also shows how to assign an event to a handler function by specifying list of listener objects.
• And at the end example shows hoe to reference created buttons in order to include them in a Panel container.
Example
• Create Sencha Touch Application using Button.html and Button.js.
• DLC on Button.html
Button.html
|Button.js | |
|Ext.setup({ |[pic] |
| | |
|onReady : function() { |[pic] |
| | |
|//CREATE BUTTON 1 TAP LISTENER. | |
|var button1_Listener_Tap = function() { | |
|alert("Button 1 was pressed"); | |
|} | |
| | |
|//CREATE BUTTON 1 USING JSON SYNTAX. | |
|var button1 = { | |
|xtype : 'button', | |
|text : 'Button 1', | |
|listeners : { | |
|tap : button1_Listener_Tap | |
|} | |
|}; | |
| | |
|//CREATE BUTTON 2 USING FUNCTION. | |
|var button2 = Ext.create('Ext.Button', { | |
|text : 'Button 2', | |
|listeners : { | |
|tap : function() { | |
|alert("Button 2 was pressed"); | |
|} | |
|} | |
|}); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [button1, button2], | |
|}); | |
| | |
|} | |
| | |
|}); | |
4 JSON
Info
• JSON stands for JavaScript Object Notation.
• JSON is human-readable text format used to transmit data objects consisting of name-value pairs.
• It was originally derived for JavaScript scripting language, but now it has become language-independent data format.
• This tutorial is based on .
Syntax
• Attribute name is defined as string, with double, single or no quotes.
• Attribute value can be in following formats
● string, double or single quoted (Examples: firstName, lastName)
● number without quotes (Examples: age, postalCode)
● array defined with square brackets [] contains list of values without names (Examples: phoneNumbers)
● object defined with curly brackets {} contains list of name-value pairs (Examples: address)
● function defined with function() {...}
• Values in the same Object or Array can be in different formats.
• But in the same Object or Array you can't mix elements that are name-value pairs with those that only contain values.
Example
{
"firstName" : "John",
"lastName" : "Smith",
"age" : 25,
"address" : {
"streetAddress": "21 2nd Street",
"city" : "New York",
"state" : "NY",
"postalCode" : 10021
},
"phoneNumbers" : [
{
"type" : "home",
"number" : "212 555-1234"
},
{
"type" : "fax",
"number" : "646 555-4567"
}
]
}
Setup
Info
• Following chapters show how to setup environment for developing with Sencha Touch.
Minimal Setup
• For minimal setup you are required to simply download and extract Sencha Touch SDK either by
● Installing Sencha Touch 2 SDK - Free Commercial Version or
● Installing Sencha Touch 2 SDK - Open Source Version
• After that you can immediately start creating Sencha Touch applications by using either of the following procedures
● Use Sencha Touch SDK to Create Application with single JS File
● Use Sencha Touch SDK to Create Application with multiple JS Files
• Using this approach you simply need to create two files
● Test.html
● Test.js
• and use Test.html to reference two needed files from Sencha Touch SDK
● D:\Downloads\sencha-touch-2.1.0-commercial\sencha-touch-all.js
● D:\Downloads\sencha-touch-2.1.0-commercial\resources\css\sencha-touch.css
• You can then run created application either from
● file system
● web server
MVC Setup
• Sencha Touch has built in MVC framework which must be used through Sencha Touch Cmd command line interface which
● creates Application skeleton
● creates deployment files
• This requires you to install and configure
● Sencha Touch SDK as described in Minimal Setup above
● Sencha Touch Cmd
● Ruby
● IIS Web Server or some other Web Server since MVC Applications can't run from file system
• Unlike Minimal Setup, where you work with only 4 files, MVC Setup creates elaborate directory structure with all sorts of exotic files.
1 Sencha Touch SDK
Info
• Following chapters show how to setup Sencha Touch, create application, test it and deploy it to mobile phone.
1 Install Sencha Touch 2 SDK - Free Commercial Version
Info
• This procedure shows how to install Free Commercial Version of Sencha Touch 2 SDK.
• You should Install Sencha Touch 2 SDK - Open Source Version since this one doesn't work with Sencha CMD.
• Installation is done by simply downloading and extracting ZIP file containing JavaScript and CSS files.
• In order to use them you just need to link to them from your HTML file, you don't even need a Web Server.
Download
Open Download Page
•
• Products
• Sencha Touch
Send Email with Download Link
• Download
• ivoronline@
• Download
Download Installation from Email Link
• Check E-Mail
• Download Sencha Touch
• Save as: D:\Downloads\sencha-touch-2.1.0-commercial.zip
[pic]
Extract
• Extract D:\Downloads\sencha-touch-2.1.0-commercial.zip
D:\Downloads\sencha-touch-2.1.0-commercial
[pic]
2 Install Sencha Touch 2 SDK - Open Source Version
Info
• This procedure shows how to install Open Source Version of Sencha Touch 2 SDK.
• It is recommended to use this version because commercial version doesn't work with Sencha CMD.
• Installation is done by simply downloading and extracting ZIP file containing JavaScript and CSS files.
• In order to use them you just need to link to them from your HTML file, you don't even need a Web Server.
Download
•
• Products
• Sencha Touch
• Download
• Save as: D:\Downloads\sencha-touch-2.3.1a-gpl.zip
[pic]
Extract
• Extract D:\Downloads\sencha-touch-2.3.1a-gpl.zip to D:\Installed\Programming
D:\Installed\Programming\sencha-touch-2.3.1a-gpl\touch-2.3.1
[pic]
3 Use Sencha Touch SDK to Create Application with single JS File
Info
• This tutorial shows how to use Sencha Touch 2 to create simple Hello World application.
• Application will have single Panel with two toolbars and HTML displaying "Hello World".
• Everything is done on a file system, without using Web Server, to make things as simple as possible.
• You can also Create Sencha Touch App Using Eclipse.
• If you put this code on Web Server and access Test.html from iPhone it will look like real app since browser address and search bar will get automatically hidden, showing briefly only while changing orientation.
• Bottom navigation bar will still be visible.
• This tutorial is based on .
Procedure
Create Application Files
• Create directory D:\SenchaTouch20
• In created directory create files
– Test.html
– Test.js
Copy Sencha Touch Files
• In created directory copy files
– D:\Downloads\sencha-touch-2.1.0-commercial\sencha-touch-all.js
– D:\Downloads\sencha-touch-2.1.0-commercial\resources\css\sencha-touch.css
Test.html
|Test.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|var toolbar = Ext.create('Ext.Toolbar', { | |
|dock : 'top', | |
|title : 'Standard Titlebar' | |
|}); | |
| | |
|var green = { | |
|style : "background-color: Green", | |
|html : "Green" | |
|}; | |
| | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|layout : 'auto', | |
|items : [toolbar, green] | |
|}); | |
| | |
|} | |
|}); | |
Test
• DLC on Test.html to open it in your Web Browser ()
Mobile Safari Web Browser Google Chrome Web Browser
|[pic] | |
| |[pic] |
4 Use Sencha Touch SDK to Create Application with multiple JS Files
Info
• This tutorial is the same as previous Create Sencha Touch Application except that code is spread over multiple files.
• This simply means that multiple tags must be included in Test.html in order to include code from all files.
Procedure
Create Application Files
• Create directory D:\SenchaTouch20
• In created directory create files
– Test.html
– Toolbar.js
– Green.js
– Test.js
Copy Sencha Touch Files
• In created directory copy files
– D:\Downloads\sencha-touch-2.1.0-commercial\sencha-touch-all.js
– D:\Downloads\sencha-touch-2.1.0-commercial\resources\css\sencha-touch.css
Test.html
|Toolbar.js | |
|var toolbar = Ext.create('Ext.Toolbar', { |[pic] |
|dock : 'top', | |
|title : 'Standard Titlebar' | |
|}); | |
| | |
| | |
|Green.js | |
|var green = { | |
|style : "background-color: Green", | |
|html : "Green" | |
|}; | |
| | |
|Test.js | |
|Ext.setup({ | |
|onReady : function() { | |
| | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|layout : 'auto', | |
|items : [toolbar, green] | |
|}); | |
| | |
|} | |
|}); | |
Test
• DLC on Test.html to open it in your Web Browser ()
2 Sencha Touch Cmd
Info
• Sencha Touch Cmd is Command Line Tool used to create MVC based Sencha Touch Applications.
Basic usage
Create Application Skeleton
• cd D:\Installed\Programming\sencha-touch-2.3.1a-gpl\touch-2.3.1
• sencha generate app GS apps/GS
•
Created Deployment Files
• cd apps\GS
• sencha app build production
•
1 Install Sencha Touch Cmd
Info
• This procedure shows how to install Sencha Touch Cmd.
• This procedure is based on .
Download
•
• Download Now
• Save as: G:\Downloads\SenchaCmd-4.0.2.67-windows.exe.zip
[pic]
Extract
• Extract G:\Downloads\SenchaCmd-4.0.2.67-windows.exe.zip to G:\Downloads
Install
• Execute G:\Downloads\SenchaCmd-4.0.2.67-windows.exe\SenchaCmd-4.0.2.67-windows.exe
• Install in: F:\Users\vori\bin (Default directory)
Test
• Open Command Prompt
• sencha (Execute from any directory)
Test installation by executing sencha command
[pic]
2 Use Sencha Cmd to Create Application Skeleton
Info
• This tutorial shows how to use Sencha CMD to Create Sencha Touch Application with basic skeleton.
• You must use it from directory that belongs to installed Sencha Touch SDK.
• Created directory contains all you needed to run application and can therefore be moved to any other location.
• In this example we use directory which is accessible through IIS as shown in Add Virtual Directory to IIS.
Procedure
• Start Command Prompt
• cd D:\Installed\Programming\sencha-touch-2.3.1a-gpl\touch-2.3.1\
• sencha generate app GS apps/GS (GS stands for Getting Started)
Command output
[pic]
Crated Application Directory
[pic]
Test
• Created application can be tested by accessing it through IIS Web Server.
• Unfortunately you cannot execute simply through a file system by executing HTML page like we could with example Manually Create Sencha Touch Application with single JS File.
[pic]
Created Files
• Sencha CMD will
– create basic directory structure
– copy all needed files from Sencha Touch SDK
• Sencha CMD will also crate demo Application creating files
– app.js which initializes Application
– app\view\Main.js contains Application logic
...\GS\app.js
/*
This file is generated and updated by Sencha Cmd. You can edit this file as
needed for your application, but these edits will have to be merged by
Sencha Cmd when it performs code generation tasks such as generating new
models, controllers or views and when running "sencha app upgrade".
Ideally changes to this file would be limited and most work would be done
in other places (such as Controllers). If Sencha Cmd cannot merge your
changes and its generated code, it will produce a "merge conflict" that you
will need to resolve manually.
*/
Ext.application({
name: 'GS',
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon@2x.png',
'144': 'resources/icons/Icon~ipad@2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('GS.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
...\GS\app\view\Main.js
Ext.define('GS.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2'
},
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of app/view/Main.js - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: '',
posterUrl: ''
}
]
}
]
}
});
3 Use Sencha Cmd to Deploy Application
Info
• This tutorial shows how to use Sencha CMD to Deploy Sencha Touch Application by
● using Sencha CMD to create directory with deployment files
● deploying created directory to Web Server
Create Deployment Files
• Start Command Prompt
• cd D:\Installed\Programming\sencha-touch-2.3.1a-gpl\touch-2.3.1\apps\GS
• sencha app build production
Created D:\Installed\Programming\sencha-touch-2.3.1a-gpl\touch-2.3.1\build\production\GS
[pic]
[pic]
Deploy Files
• Copy D:\Installed\Programming\sencha-touch-2.3.1a-gpl\touch-2.3.1\apps\GS to
• []:/public_html/sencha
[pic]
3 Ruby
Info
• This procedure shows how to install Ruby which is needed to run Sencha Cmd.
Download
•
• Ruby 2.0.0-p353 (x64)
• Save as D:\Downloads\rubyinstaller-2.0.0-p353-x64.exe
Install
• Execute D:\Downloads\rubyinstaller-2.0.0-p353-x64.exe
• Directory: D:\Installed\Programming\Ruby200-x64
Objects
Info
• In SenchaTouch Container & Components form the basic building blocks for creating an interface.
• Components are placed inside a Container and used by user to interact with your application.
• Additionally Containers can be nested inside each other to create even more complex GUI structures.
• Each Container is assigned a layout which handles positioning of its components either
– by arranging the components on the available space or
– by showing only one component at the time and providing some way of changing the focus between them
List of xtypes
xtype Class
----------------- ---------------------
actionsheet Ext.ActionSheet
audio Ext.Audio
button Ext.Button
component ponent
container Ext.Container
image Ext.Img
label Ext.Label
loadmask Ext.LoadMask
map Ext.Map
mask Ext.Mask
media Ext.Media
panel Ext.Panel
segmentedbutton Ext.SegmentedButton
sheet Ext.Sheet
spacer Ext.Spacer
title Ext.Title
titlebar Ext.TitleBar
toolbar Ext.Toolbar
video Ext.Video
carousel Ext.carousel.Carousel
carouselindicator Ext.carousel.Indicator
navigationview Ext.navigation.View
datepicker Ext.picker.Date
picker Ext.picker.Picker
pickerslot Ext.picker.Slot
slider Ext.slider.Slider
thumb Ext.slider.Thumb
tabbar Ext.tab.Bar
tabpanel Ext.tab.Panel
tab Ext.tab.Tab
viewport Ext.viewport.Default
DataView Components
---------------------------------------------
dataview Ext.dataview.DataView
list Ext.dataview.List
listitemheader Ext.dataview.ListItemHeader
nestedlist Ext.dataview.NestedList
dataitem Ext.ponent.DataItem
Form Components
---------------------------------------------
checkboxfield Ext.field.Checkbox
datepickerfield Ext.field.DatePicker
emailfield Ext.field.Email
field Ext.field.Field
hiddenfield Ext.field.Hidden
input Ext.field.Input
numberfield Ext.field.Number
passwordfield Ext.field.Password
radiofield Ext.field.Radio
searchfield Ext.field.Search
selectfield Ext.field.Select
sliderfield Ext.field.Slider
spinnerfield Ext.field.Spinner
textfield Ext.field.Text
textareafield Ext.field.TextArea
textareainput Ext.field.TextAreaInput
togglefield Ext.field.Toggle
urlfield Ext.field.Url
fieldset Ext.form.FieldSet
formpanel Ext.form.Panel
1 Containers
Info
• Following chapters show how to use different Containers supported by Sencha Touch.
• You can find basic info on Containers and how they relate to other Components in chapter Components.
Panel Tabbed Panel Carousel
[pic] [pic] [pic]
Navigation View
[pic]
1 Container
Info
• Ext.Container is basic Container.
• This tutorial is based on .
Example
• This example shows how to use Auto Layout with a basic Container containing 3 simple HTML components.
Procedure
• Create Sencha Touch Application using Container.html & Container.js.
• DLC on Container.html
Container.html
|Container.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|var red = { | |
|style : "background-color: Red", | |
|html : "Red Second line" | |
|}; | |
| | |
|var green = { | |
|style : "background-color: Green", | |
|html : "Green" | |
|}; | |
| | |
|var blue = { | |
|style : "background-color: Blue", | |
|html : "Blue" | |
|}; | |
| | |
|Ext.create('Ext.Container', { | |
|fullscreen : true, | |
|layout : 'auto', | |
|items : [red, green, blue] | |
|}); | |
| | |
|} | |
|}); | |
2 Panel
Info
• Ext.Panel seems to have the same functionality as Ext.Container.
• This tutorial is based on .
Example
• This example shows how to use Panel Container containing Toolbar and HTML components.
Procedure
• Create Sencha Touch Application using ContainerPanel.html & ContainerPanel.js.
• DLC on ContainerPanel.html
ContainerPanel.html
|ContainerPanel.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|var toolbar = Ext.create('Ext.Toolbar', { | |
|dock : 'top', | |
|title : 'Standard Titlebar' | |
|}); | |
| | |
|var green = { | |
|style : "background-color: Green", | |
|html : "Green" | |
|}; | |
| | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|layout : 'auto', | |
|scrollable : true, | |
|items : [toolbar, green] | |
|}); | |
| | |
|} | |
|}); | |
Parameters
|Name |Values |Description |
|xtype |'panel' |Panel keyword |
|title |'My Title' |Optional title at the top. |
|height |[100, 40%] |Panel height. |
|width |[100, 40%] |Panel width. |
|fullscreen |[true, false] |Controls full screen display of the Panel. |
|scroll |['vertical'] |Allow vertical scrolling. |
|defaults |{xtype:'textfield'} |Optional set of default configurations for items. |
3 Tabbed Panel
Info
• Ext.tab.Panel Container uses card layout by default.
• It contains toolbar with buttons to switch between items.
• Each button is presented with item's title or iconCls.
• Items can still be switched programmatically using "myContainer.setActiveItem(0); ".
• Transition between items can be controlled via layout animation types: 'slide', 'fade', 'flip', 'cube' & 'wipe'.
• This tutorial is based on
●
●
Example
• Create Sencha Touch Application using ContainerTabPanel.html & ContainerTabPanel.js.
• DLC on ContainerTabPanel.html
ContainerTabPanel.html
|ContainerTabPanel.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|var red = { | |
|style : "background-color: Red", | |
|html : "Red Second line", | |
|title : "Red" | |
|}; | |
| | |
|var green = { | |
|style : "background-color: Green", | |
|html : "Green", | |
|title : "Green" | |
|}; | |
| | |
|var blue = { | |
|style : "background-color: Blue", | |
|html : "Blue", | |
|title : "Blue" | |
|}; | |
| | |
|Ext.create('Ext.TabPanel', { | |
|fullscreen : true, | |
|layout : { animation: { type:'fade', duration:500 } }, | |
|items : [ red, green, blue ] | |
|}).setActiveItem(1); | |
| | |
|} | |
|}); | |
4 Carousel
Info
• Ext.carousel.Carousel container uses card layout by default.
• You can switch between items by swiping with your finger horizontally (default) or vertically using direction parameter.
● direction : 'horizontal'
● direction : 'vertical'
• Indicator at the bottom shows how many items there are and on which item we are on.
• This tutorial is based on .
Example
• Create Sencha Touch Application using ContainerCarousel.html & ContainerCarousel.js.
• DLC on ContainerCarousel.html
ContainerCarousel.html
|ContainerCarousel.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|var red = { | |
|style : "background-color: Red", | |
|html : "Red Second line", | |
|title : "Red" | |
|}; | |
| | |
|var green = { | |
|style : "background-color: Green", | |
|html : "Green", | |
|title : "Green" | |
|}; | |
| | |
|var blue = { | |
|style : "background-color: Blue", | |
|html : "Blue", | |
|title : "Blue" | |
|}; | |
| | |
|Ext.create('Ext.TabPanel', { | |
|fullscreen : true, | |
|direction : 'horizontal', | |
|items : [ red, green, blue ] | |
|}).setActiveItem(1); | |
| | |
|} | |
|}); | |
5 Navigation View
Info
• Ext.navigation.View container uses card layout by default.
• IUt has toolbar at the top which displays title of current component.
• By using push() function you can add new card which automatically comes into view.
• Back button is also automatically added to get you back to the previous screen.
• You can add multiple items in a row and then use back buttons to get back to the initial item.
• This tutorial is based on .
Example
• Create Sencha Touch Application using ContainerNavigationView.html & ContainerNavigationView.js.
• DLC on ContainerNavigationView.html
ContainerNavigationView.html
|ContainerNavigationView.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|var red = { | |
|style : "background-color: Red", | |
|html : "Red Second line", | |
|title : "Red", | |
|items : [{ | |
|xtype : 'button', | |
|text : 'Go to Green', | |
|handler : function() { view.push(green); } | |
|}] | |
|}; | |
| | |
|var green = { | |
|style : "background-color: Green", | |
|html : "Green", | |
|title : "Green", | |
|items : [{ | |
|xtype : 'button', | |
|text : 'Go to Blue', | |
|handler : function() { view.push(blue); } | |
|}] | |
|}; | |
| | |
|var blue = { | |
|style : "background-color: Blue", | |
|html : "Blue", | |
|title : "Blue", | |
|iconCls : 'user', | |
|items : [{ | |
|xtype : 'button', | |
|text : 'Go to Red', | |
|handler : function() { view.push(red); } | |
|}] | |
|}; | |
| | |
|var view = Ext.create('Ext.NavigationView', { | |
|fullscreen : true, | |
|items : [red] | |
|}); | |
| | |
|} | |
|}); | |
2 Layouts
Info
• Following chapters show how to use different Layouts supported by Sencha Touch.
• You can find basic info on Layouts and how they relate to other Components in chapter Components.
Auto Layout Fit Layout Card Layout
[pic] [pic] [pic]
vbox Layout hbox Layout
[pic] [pic]
1 Auto Layout
Info
• Auto Layout displays multiple items.
• Each item fills the entire available width but it only occupies as much height as required to show the content.
• This tutorial is based on .
Example
• This example shows how to use Auto Layout with a basic Container containing 3 simple HTML components.
Procedure
• Create Sencha Touch Application using LayoutAuto.html & LayoutAuto.js.
• DLC on LayoutAuto.html
LayoutAuto.html
|LayoutAuto.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|var red = { | |
|style : "background-color: Red", | |
|html : "Red Second line" | |
|}; | |
| | |
|var green = { | |
|style : "background-color: Green", | |
|html : "Green" | |
|}; | |
| | |
|var blue = { | |
|style : "background-color: Blue", | |
|html : "Blue" | |
|}; | |
| | |
|Ext.create('Ext.Container', { | |
|fullscreen : true, | |
|layout : 'auto', | |
|items : [red, green, blue] | |
|}); | |
| | |
|} | |
|}); | |
2 Fit Layout
Info
• Fit Layout displays single item at the time.
• Shown item fills the entire available space, both horizontally and vertically.
• If you define multiple items, only the last one will be shown.
• There is no way of changing which item is active since it always displays the last one.
• This tutorial is based on .
Example
• This example shows how to use Fit Layout with a basic Container containing 3 simple HTML components.
• Only the last component is shown.
Procedure
• Create Sencha Touch Application using LayoutFit.html & LayoutFit.js.
• DLC on LayoutFit.html
LayoutFit.html
|LayoutFit.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|var red = { | |
|style : "background-color: Red", | |
|html : "Red Second line" | |
|}; | |
| | |
|var green = { | |
|style : "background-color: Green", | |
|html : "Green" | |
|}; | |
| | |
|var blue = { | |
|style : "background-color: Blue", | |
|html : "Blue" | |
|}; | |
| | |
|Ext.create('Ext.Container', { | |
|fullscreen : true, | |
|layout : 'auto', | |
|items : [red, green, blue] | |
|}); | |
| | |
|} | |
|}); | |
3 Card Layout
Info
• Card Layout displays single item at the time, just like the fit layout.
• Shown item fills the entire available space, both horizontally and vertically.
• If you define multiple items you can change which item is shown, unlike with fit layout.
• Card layout provides programmatic interface for switching between items by using "myContainer.setActiveItem(0); ".
• But it doesn't provide user interface or switching between items.
• There are two specialised Containers that provide user interface for card layout
● Ext.carousel.Carousel
● Ext.tabPanel
• This tutorial is based on .
Example
• This example shows how to use Card Layout with a basic Container containing 3 simple HTML components.
• programmatic interface ".setActiveItem(1)" is used to define that second green card should be displayed.
Procedure
• Create Sencha Touch Application using LayoutCard.html & LayoutCard.js.
• DLC on LayoutCard.html
LayoutCard.html
|LayoutCard.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|var red = { | |
|style : "background-color: Red", | |
|html : "Red Second line" | |
|}; | |
| | |
|var green = { | |
|style : "background-color: Green", | |
|html : "Green" | |
|}; | |
| | |
|var blue = { | |
|style : "background-color: Blue", | |
|html : "Blue" | |
|}; | |
| | |
|Ext.create('Ext.Container', { | |
|fullscreen : true, | |
|layout : 'auto', | |
|items : [red, green, blue] | |
|}).setActiveItem(1); | |
| | |
|} | |
|}); | |
Additional Parameters
Animation
• Animation parameter defines transition type when switching cards programmatically or with Tabbed Panel.
layout: { animation: { type:'slide', duration:500 } } //default
layout: { animation: { type:'fade' , duration:500 } }
layout: { animation: { type:'flip' , duration:500 } }
layout: { animation: { type:'cube' , duration:500 } }
layout: { animation: { type:'wipe' , duration:500 } }
4 vbox Layout
Info
• vbox Layout arranges items vertically.
• Displays all items each taking full width but only as much height as required by the content.
• Additional Parameters
● pack parameter controls vertical positioning of the items
. it works only if components don't have 'flex' parameter defined
● align parameter controls horizontal positioning of the items
. without this parameter components take full width
● flex parameter on each item defines proportion of vertical space that each item will occupy.
. So "flex:1" on each item means that each will take the same vertical amount.
. If there are 3 components each will take 1/3 of the vertical space.
. If flex values for items are 4,2 & then second item will take 2/(1+2+4) parts of the vertical space.
• This tutorial is based on .
Example
• This example shows how to use vbox Layout with a basic Container containing 3 simple HTML components.
• Images show results when using different values for 'pack' & 'flex' parameters.
Procedure
• Create Sencha Touch Application using LayoutVbox.html & LayoutVbox.js.
• DLC on LayoutVbox.html
LayoutVbox.html
|LayoutVbox.js |without align parameter |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|var red = { | |
|style : "background-color: Red", | |
|html : "Red Second line", | |
|flex : 4 | |
|}; | |
| | |
|var green = { | |
|style : "background-color: Green", | |
|html : "Green", | |
|flex : 2 | |
|}; | |
| | |
|var blue = { | |
|style : "background-color: Blue", | |
|html : "Blue", | |
|flex : 1 | |
|}; | |
| | |
|Ext.create('Ext.Container', { | |
|fullscreen : true, | |
|layout : { | |
|type : 'vbox', | |
|pack : 'center', | |
|align : 'right' | |
|}, | |
|pack : 'end', | |
|items : [red, green, blue] | |
|}); | |
| | |
|} | |
|}); | |
pack : 'start' pack : 'start' pack : 'end'
[pic] [pic] [pic]
align : 'left' align : 'center' align : 'right'
[pic] [pic] [pic]
5 hbox Layout
Info
• hbox Layout arranges items horizontally.
• Displays all items each taking full height but only as much width as required by the content.
• Additional Parameters
● pack parameter controls horizontal positioning of the items
. it works only if components don't have 'flex' parameter defined
● align parameter controls vertical positioning of the items
. without this parameter components take full width
● flex parameter on each item defines proportion of horizontal space that each item will occupy.
. So "flex:1" on each item means that each will take the same horizontal amount.
. If there are 3 components each will take 1/3 of the horizontal space.
. If flex values for items are 4,2 & then second item will take 2/(1+2+4) parts of the horizontal space.
• This tutorial is based on .
Example
• This example shows how to use hbox Layout with a basic Container containing 3 simple HTML components.
Images show results when using different values for 'pack' & 'flex' parameters.
Procedure
• Create Sencha Touch Application using Layouthbox.html & Layouthbox.js.
• DLC on hbox.html
Layouthbox.html
|Layouthbox.js |without align parameter |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|var red = { | |
|style : "background-color: Red", | |
|html : "Red Second line", | |
|flex : 4 | |
|}; | |
| | |
|var green = { | |
|style : "background-color: Green", | |
|html : "Green", | |
|flex : 2 | |
|}; | |
| | |
|var blue = { | |
|style : "background-color: Blue", | |
|html : "Blue", | |
|flex : 1 | |
|}; | |
| | |
|Ext.create('Ext.Container', { | |
|fullscreen : true, | |
|layout : { | |
|type : 'hbox', | |
|pack : 'start', | |
|align : 'bottom' | |
|}, | |
|pack : 'end', | |
|items : [red, green, blue] | |
|}); | |
| | |
|} | |
|}); | |
pack : 'start' pack : 'center' pack : 'end'
[pic] [pic] [pic]
align : 'top' pack : 'center' pack : 'bottom'
[pic] [pic] [pic]
3 GUI Components
Info
• Following chapters present different GUI components which can be used to present data to the user.
Field Set Text Field Checkbox Field
[pic] [pic] [pic]
Radio Field Number Field Toggle Field
[pic] [pic] [pic]
Select Field List Button
[pic] [pic] [pic]
Text Area Field Label
[pic] [pic]
Toolbar Titlebar
[pic] [pic]
Alert Prompt Confirm
[pic][pic] [pic]
1 Label
Info
• Ext.Label is used to write some text.
• This tutorial is based on
Example
• Create Sencha Touch Application using Label.html and Label.js.
• DLC on Label.html
Label.html
|Label.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|//CREATE PANEL. | |
|var view = Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [ | |
|{ | |
|xtype : 'label', | |
|html : 'Document Title' | |
|} | |
|] | |
|}); | |
| | |
|} | |
|}); | |
Example 2
• Create Sencha Touch Application using Label2.html and Label2.js.
• DLC on Label2.html
Label2.html
|Label2.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|//CREATE LABEL. | |
|var labelTitle = Ext.create('Ext.Label', { | |
|html : 'Document Title' | |
|}); | |
| | |
|//CREATE PANEL. | |
|var view = Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [labelTitle] | |
|}); | |
| | |
|} | |
|}); | |
2 Field Set
Info
• Ext.form.FieldSet is used to visually separate elements of a form by dividing them into group
• Field Set can optionally have a title at the top and instructions at the bottom.
• This tutorial is based on .
Example
• Create Sencha Touch Application using FieldSet.html and FieldSet.js.
• DLC on FieldSet.html
FieldSet.html
|FieldSet.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|Ext.create('Ext.form.Panel', { | |
| | |
|fullscreen : true, | |
| | |
|items : [ | |
|{ | |
|xtype : 'fieldset', | |
|title : 'About You', | |
|instructions : 'Enter you name', | |
|items : [ | |
|{ | |
|xtype : 'textfield', | |
|name : 'name', | |
|label : 'Name' | |
|}, | |
|{ | |
|xtype : 'textfield', | |
|name : 'surname', | |
|label : 'Surname' | |
|} | |
|] | |
|} | |
| | |
|] | |
| | |
|}); | |
| | |
|} | |
|}); | |
Example 2
• This example differs from previous only by the way components are created using Ext.create() instead of xtype.
Procedure
• Create Sencha Touch Application using FieldSet2.html and FieldSet2.js.
• DLC on FieldSet2.html
FieldSet2.html
|FieldSet2.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|//CREATE TEXT FIELD: NAME | |
|var textFieldName = Ext.create('Ext.field.Text', { | |
|name : 'name', | |
|label : 'Name' | |
|}); | |
| | |
|//CREATE TEXT FIELD: SURNAME | |
|var textFieldSurname = Ext.create('Ext.field.Text', { | |
|name : 'surname', | |
|label : 'Surname' | |
|}); | |
| | |
|//CREATE FIELD SET. | |
|var fieldSet = Ext.create('Ext.form.FieldSet', { | |
|title : 'About You', | |
|instructions : 'Enter you name', | |
|items : [ textFieldName, textFieldSurname ] | |
|}); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
|items : [ fieldSet ] | |
|}); | |
| | |
|} | |
|}); | |
Parameters
|Name |Values |Description |
|xtype |'fieldset' |Field Set keyword |
|title | |Optional title at the top of field set. |
|instructions | |Optional instructions at the bottom of field set. |
|defaults | |Optional default configurations for child Components. |
3 Text Field
Info
• Ext.field.Text is the basis for most of the input fields in Sencha Touch.
• It provides shared functionality such as: input validation, standard events, state management and look and feel.
• This tutorial is based on
Example
• Create Sencha Touch Application using TextField.html and TextField.js.
• DLC on TextField.html
TextField.html
|TextField.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|Ext.create('Ext.form.Panel', { | |
| | |
|fullscreen : true, | |
| | |
|items : [ | |
|{ | |
|xtype : 'textfield', | |
|name : 'name', | |
|label : 'Name' | |
|}, | |
|{ | |
|xtype : 'textfield', | |
|name : 'surname', | |
|label : 'Surname' | |
|} | |
|] | |
| | |
|}); | |
| | |
|} | |
|}); | |
Example 2
• Create Sencha Touch Application using TextField2.html and TextField2.js.
• DLC on TextField2.html
TextField2.html
|TextField2.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|//CREATE TEXT FIELD: NAME. | |
|var textFieldName = Ext.create('Ext.field.Text', { | |
|name : 'name', | |
|label : 'Name' | |
|}); | |
| | |
|//CREATE TEXT FIELD: SURNAME. | |
|var textFieldSurname = Ext.create('Ext.field.Text', { | |
|name : 'surname', | |
|label : 'Surname' | |
|}); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
|items : [textFieldName, textFieldSurname] | |
|}); | |
| | |
|} | |
|}); | |
Parameters
|Name |Values |Description |
|xtype |'textfield' |Text Field keyword. |
|label |'Name' |Text which is displayed left from text field. |
|placeHolder |'Enter name' |Text that disappears when the field is focused. |
|maxLength |10 |Maximum number of characters. |
|autoComplete |true |[true, false] |
|autoCorrect |false |[true, false] |
4 Number Field
Info
• Ext.field.Number field is used to input numbers.
• It provides shared functionality such as: input validation, standard events, state management and look and feel.
• This tutorial is based on .
Example
• Create Sencha Touch Application using NumberField.html and NumberField.js.
• DLC on NumberField.html
NumberField.html
|NumberField.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
| | |
|items : [ | |
|{ | |
|xtype : 'numberfield', | |
|label : 'Age', | |
|minValue : 10, | |
|maxValue : 150, | |
|stepValue : 10, //Mouse wheel on hover. Default 1. | |
|name : 'age' | |
|} | |
|] | |
| | |
|}); | |
| | |
|} | |
|}); | |
Example 2
• Create Sencha Touch Application using NumberField2.html and NumberField2.js.
• DLC on NumberField2.html
NumberField2.html
|NumberField2.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|//CREATE NUMBER FIELD: AGE. | |
|var numberFieldAge = Ext.create('Ext.field.Number', { | |
|label : 'Age', | |
|minValue : 10, | |
|maxValue : 150, | |
|stepValue : 10, //Mouse wheel on hover. Default 1. | |
|name : 'age' | |
|}); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
|items : [numberFieldAge] | |
|}); | |
| | |
|} | |
|}); | |
5 Radio Field
Info
• Ext.field.Radio field allows user to choose one option.
• This tutorial is based on .
Example
• Create Sencha Touch Application using RadioField.html and RadioField.js.
• DLC on RadioField.html
RadioField.html
|RadioField.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
| | |
|items : [ | |
|{ | |
|xtype : 'radiofield', | |
|name : 'color', | |
|value : 'red', | |
|label : 'Red', | |
|checked: true | |
|}, | |
|{ | |
|xtype : 'radiofield', | |
|name : 'color', | |
|value : 'green', | |
|label : 'Green' | |
|}, | |
|{ | |
|xtype : 'radiofield', | |
|name : 'color', | |
|value : 'blue', | |
|label : 'Blue' | |
|} | |
|] | |
| | |
|}); | |
| | |
|} | |
|}); | |
Example 2
• Create Sencha Touch Application using RadioField2.html and RadioField2.js.
• DLC on RadioField2.html
RadioField2.html
|RadioField2.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|//CREATE RADIO FIELD: RED. | |
|var radioFieldRed = Ext.create('Ext.field.Radio', { | |
|name : 'color', | |
|value : 'red', | |
|label : 'Red', | |
|checked : true | |
|}); | |
| | |
|//CREATE RADIO FIELD: GREEN. | |
|var radioFieldGreen = Ext.create('Ext.field.Radio', { | |
|name : 'color', | |
|value : 'green', | |
|label : 'Green' | |
|}); | |
| | |
|//CREATE RADIO FIELD: BLUE. | |
|var radioFieldBlue = Ext.create('Ext.field.Radio', { | |
|name : 'color', | |
|value : 'blue', | |
|label : 'Blue' | |
|}); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
|items : [radioFieldRed,radioFieldGreen,radioFieldBlue] | |
|}); | |
| | |
|} | |
|}); | |
6 Select Field
Info
• Ext.field.Select field allows user to choose one or more items from a drop down menu.
• This tutorial is based on .
Example
• Create Sencha Touch Application using SelectField.html and SelectField.js.
• DLC on SelectField.html
SelectField.html
|SelectField.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
| | |
|items : [ | |
|{ | |
|xtype : 'selectfield', | |
|options: [ | |
|{text: 'First Option' , value: 'first' }, | |
|{text: 'Second Option', value: 'second'}, | |
|{text: 'Third Option' , value: 'third' } | |
|] | |
|} | |
|] | |
| | |
|}); | |
|} | |
|}); | |
Example 2
• Create Sencha Touch Application using SelectField2.html and SelectField2.js.
• DLC on SelectField2.html
SelectField2.html
|SelectField2.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|//CREATE SELECT FIELD. | |
|var selectField = Ext.create('Ext.field.Select', { | |
|options : [ | |
|{text: 'First Option' , value: 'first' }, | |
|{text: 'Second Option', value: 'second'}, | |
|{text: 'Third Option' , value: 'third' } | |
|] | |
|}); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
|items : [selectField] | |
|}); | |
| | |
|} | |
|}); | |
7 Toggle Field
Info
• Ext.field.Toggle is field with ON/OFF position.
• By default the toggle component can be switched between the values of 0 and 1.
• This tutorial is based on
Example
• Create Sencha Touch Application using ToggleField.html and ToggleField.js.
• DLC on ToggleField.html
ToggleField.html
|ToggleField.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
| | |
|items : [ | |
|{ | |
|xtype : 'togglefield', | |
|name : 'enableSnd', | |
|label : 'Sound', | |
|value : 1 | |
|} | |
|] | |
| | |
|}); | |
|} | |
|}); | |
Example 2
• Create Sencha Touch Application using ToggleField2.html and ToggleField2.js.
• DLC on ToggleField2.html
ToggleField2.html
|ToggleField2.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|//CREATE TOGGLE FIELD. | |
|var toggleFieldSound = Ext.create('Ext.field.Toggle', { | |
|name : 'enableSnd', | |
|label : 'Sound', | |
|value : 1 | |
|}); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
|items : [toggleFieldSound] | |
|}); | |
| | |
|} | |
|}); | |
8 Checkbox Field
Info
• Ext.field.Checkbox field allows user to choose multiple options.
• This tutorial is based on .
Example
• Create Sencha Touch Application using CheckboxField.html and CheckboxField.js.
• DLC on CheckboxField.html
CheckboxField.html
|CheckboxField.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
| | |
|items : [ | |
|{ | |
|xtype : 'checkboxfield', | |
|name : 'color', | |
|value : 'red', | |
|label : 'Red', | |
|checked: true | |
|}, | |
|{ | |
|xtype : 'checkboxfield', | |
|name : 'color', | |
|value : 'green', | |
|label : 'Green' | |
|}, | |
|{ | |
|xtype : 'checkboxfield', | |
|name : 'color', | |
|value : 'blue', | |
|label : 'Blue' | |
|} | |
|] | |
| | |
|}); | |
|} | |
|}); | |
Example 2
• Create Sencha Touch Application using CheckboxField2.html and CheckboxField2.js.
• DLC on CheckboxField2.html
CheckboxField2.html
|CheckboxField2.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|//CREATE CHECKBOX FIELD: RED. | |
|var checkBoxFieldRed = Ext.create('Ext.field.Checkbox',{ | |
|name : 'color', | |
|value : 'red', | |
|label : 'Red', | |
|checked: true | |
|}); | |
| | |
|//CREATE CHECKBOX FIELD: GREEN. | |
|var checkBoxFieldGreen = Ext.create('Ext.field.Checkbox',{ | |
|name : 'color', | |
|value : 'green', | |
|label : 'Green' | |
|}); | |
| | |
|//CREATE CHECKBOX FIELD: BLUE. | |
|var checkBoxFieldBlue = Ext.create('Ext.field.Checkbox',{ | |
|name : 'color', | |
|value : 'blue', | |
|label : 'Blue' | |
|}); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
|items : [ checkBoxFieldRed, | |
|checkBoxFieldGreen, | |
|checkBoxFieldBlue | |
|] | |
|}); | |
| | |
|} | |
|}); | |
9 Text Area Field
Info
• Ext.field.TextArea creates an HTML Text Area Field on the page useful for entering large amounts of text.
• This tutorial is based on .
Example
• Create Sencha Touch Application using TextAreaField.html and TextAreaField.js.
• DLC on TextAreaField.html
TextAreaField.html
|TextAreaField.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
| | |
|items : [ | |
|{ | |
|xtype : 'textfield', | |
|label : 'Name', | |
|name : 'name' | |
|}, | |
|{ | |
|xtype : 'textareafield', | |
|label : 'Bio', | |
|maxRows : 4, | |
|name : 'bio', | |
|value : 'Enter data' | |
|} | |
|] | |
| | |
|}); | |
|} | |
|}); | |
| | |
|TextAreaField.js | |
|Ext.setup({ |[pic] |
|onReady:function() { | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
|items : [ | |
|{ | |
|xtype : 'fieldset', | |
|title : 'About You', | |
|instructions: 'Tell us all about you', | |
|items : [ | |
|{ | |
|xtype : 'textfield', | |
|label : 'Name', | |
|name : 'name' | |
|}, | |
|{ | |
|xtype : 'textareafield', | |
|label : 'Bio', | |
|maxRows : 4, | |
|name : 'bio' | |
|} | |
|] | |
|} | |
|], | |
|}); | |
|} | |
|}); | |
Example 2
• Create Sencha Touch Application using TextAreaField2.html and TextAreaField2.js.
• DLC on TextAreaField2.html
TextAreaField.html
|TextAreaField2.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|//CREATE TEXT AREA: BIO. | |
|var textAreaBio = Ext.create('Ext.field.TextArea', { | |
|label : 'Bio', | |
|maxRows : 4, | |
|name : 'bio', | |
|value : 'Enter data' | |
|}); | |
| | |
|//CREATE PANEL | |
|Ext.create('Ext.form.Panel', { | |
|fullscreen : true, | |
|items : [textAreaBio] | |
|}); | |
| | |
|} | |
|}); | |
Parameters
|Name |Values |Description |
|xtype |'textareafield' |Text Area Field keyword. |
|label |'Name' |Text which is displayed left from text area field. |
|maxRows |4 |Vertical size of text area. |
10 List
Info
• Displays list of items.
• store contains data which should be listed.
• itemTpl specifies which data from the store will be presented and in what format.
• onItemDisclosure defines function which should be called when user presses arrow on the right.
• record.getId() gets value of 'id' field from the data store for the selected record/item.
• This tutorial is based on
Example
• Create Sencha Touch Application using ComponentList.html and ComponentList.js.
• DLC on ComponentList.html
ComponentList.html
|ComponentList.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| |[pic] |
|//CREATE DATA STORE WITH 4 RECORDS------------------------- | |
|var peopleStore = new Ext.data.Store({ | |
|fields : ['id', 'name', 'age', 'city'],//Instead Model | |
|data : [ {name:'John' , age:'35', id:'1' }, //Pairs | |
|{name:'Jill1', age:'50', id:'4' }, | |
|{name:'Susan', age:'40', id:'2' }, | |
|{name:'Alex' , age:'50', id:'3' } | |
|] | |
|}); | |
| | |
|//CREATE LIST FROM DATA STORE------------------------------ | |
|var peopleList = Ext.create('Ext.dataview.List', { | |
| | |
|//PROPERTIES | |
|id : 'peopleList', | |
|fullscreen : true, | |
|scroll : 'vertical', | |
|itemTpl : '{name} is {age}', | |
|store : peopleStore, | |
|flex : 1, | |
| | |
|//EVENTS (ON ARROW) | |
|onItemDisclosure : function(record) { //Displays arrows | |
|var result = 'id = '+record.getId() +'\n'; | |
|result += 'name = '+record.data.name+'\n'; | |
|result += 'age = '+record.data.age +'\n'; | |
|result += 'id = '+record.data.id +'\n'; | |
|alert(result); | |
|console.log(record); | |
|}, | |
| | |
|//LISTENERS (ON TAP) | |
|listeners : { | |
|select : function (list, index, item, record) { | |
|var result = 'id = '+index.internalId+'\n'; | |
|result += 'name = '+index.data.name +'\n'; | |
|result += 'age = '+index.data.age +'\n'; | |
|result += 'id = '+index.data.id +'\n'; | |
|alert(result); | |
|console.log(index); | |
|} | |
|} | |
| | |
|}); | |
| | |
|} | |
|}); | |
Example
• This example expands previous example by
● grouping items by their first name using data store grouper function and list grouped parameter
● adding index bar for faster navigation through the groups
● adding data store sorter to sort items by age (with grouping it sorts items inside a group)
Procedure
• Create Sencha Touch Application using ComponentList2.html and ComponentList2.js.
• DLC on ComponentList2.html
ComponentList2.html
|ComponentList2.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|//CREATE DATA STORE WITH 4 RECORDS------------------------- | |
|var peopleStore = new Ext.data.Store({ | |
|fields : ['id', 'name', 'age', 'city'],//Instead Model | |
|sorters : 'age', | |
|grouper : function(record) { | |
|return record.get('name')[0];//First letter | |
|}, | |
|data : [ {name:'John' , age:'35', id:'1' },//Pairs | |
|{name:'Susan' , age:'40', id:'2' }, | |
|{name:'Alex' , age:'50', id:'3' }, | |
|{name:'Bon' , age:'40', id:'4' }, | |
|{name:'Jim' , age:'26', id:'5' }, | |
|{name:'Sally' , age:'54', id:'6' }, | |
|{name:'Jumad' , age:'82', id:'7' }, | |
|{name:'Sasa' , age:'94', id:'8' }, | |
|{name:'Kristy', age:'31', id:'9' }, | |
|{name:'Jack' , age:'76', id:'10' }, | |
|{name:'Felix' , age:'36', id:'11' } | |
|] | |
|}); | |
| | |
|//CREATE LIST FROM DATA STORE------------------------------ | |
|var peopleList = Ext.create('Ext.dataview.List', { | |
| | |
|//PROPERTIES | |
|id : 'peopleList', | |
|fullscreen : true, | |
|scroll : 'vertical', | |
|grouped : true, | |
|indexBar : true, | |
|itemTpl : '{name} is {age}', | |
|store : peopleStore, | |
|flex : 1, | |
| | |
|//EVENTS (ON ARROW) | |
|onItemDisclosure : function(record) { //Displays arrows | |
|alert ('Row '+record.getId()+' selected'); //From 1 | |
|console.log('Row '+record.getId()+' selected'); | |
|}, | |
| | |
|//LISTENERS (ON TAP) | |
|listeners : { | |
|select : function (list, index, item, record) { | |
|alert (index.internalId); //From 1 | |
|console.log(index.internalId); //From 1 | |
|} | |
|} | |
| | |
|}); | |
| | |
|} | |
|}); | |
11 Button
Info
• Ext.Button creates a button.
• This tutorial is based on .
Example
• Create Sencha Touch Application using Button.html and Button.js.
• DLC on Button.html
Button.html
|Button.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [ | |
|{ xtype:'button', text:'Reply' }, | |
|{ xtype:'button', iconCls:'reply', iconMask:true }, | |
|{ xtype:'button', text:'Reply', iconCls:'reply', iconMask:true }, | |
|{ xtype:'button', text:'Badge', badgeText: '5' }, | |
|], | |
|}); | |
|} | |
|}); | |
|Button.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|layout : { | |
|type : 'vbox', | |
|align : 'center' | |
|}, | |
|defaults : { | |
|xtype : 'button', | |
|margin : 2, | |
|}, | |
|items : [ | |
|{ text : 'normal' , ui:'normal' }, | |
|{ text : 'round' , ui:'round' }, | |
|{ text : 'back' , ui:'back' }, | |
|{ text : 'forward', ui:'forward'}, | |
|{ text : 'action' , ui:'action' }, | |
|{ text : 'decline', ui:'decline'}, | |
|{ text : 'confirm', ui:'confirm'}, | |
|], | |
|}); | |
|} | |
|}); | |
|Button.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|defaults : { | |
|xtype : 'button', | |
|iconMask : true, | |
|ui : 'action' | |
|}, | |
|items : [ | |
|{text :'action ', iconCls:'action '}, | |
|{text :'action ', iconCls:'action '}, | |
|{text :'add ', iconCls:'add '}, | |
|{text :'arrow_down ', iconCls:'arrow_down '}, | |
|{text :'arrow_left ', iconCls:'arrow_left '}, | |
|{text :'arrow_right', iconCls:'arrow_right'}, | |
|{text :'arrow_up ', iconCls:'arrow_up '}, | |
|{text :'compose ', iconCls:'compose '}, | |
|{text :'delete ', iconCls:'delete '}, | |
|{text :'organize ', iconCls:'organize '}, | |
|{text :'refresh ', iconCls:'refresh '}, | |
|{text :'reply ', iconCls:'reply '}, | |
|{text :'search ', iconCls:'search '}, | |
|{text :'settings ', iconCls:'settings '}, | |
|{text :'star ', iconCls:'star '}, | |
|{text :'trash ', iconCls:'trash '}, | |
|{text :'maps ', iconCls:'maps '}, | |
|{text :'locate ', iconCls:'locate '}, | |
|{text :'home ', iconCls:'home '}, | |
|], | |
|}); | |
|} | |
|}); | |
Example
• Create Sencha Touch Application using Button.html and Button.js.
• DLC on Button.html
Button.html
|Button.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|//CREATE BUTTON 1 USING JSON SYNTAX. | |
|var button1 = { | |
|xtype :'button', | |
|text :'Button 1', | |
|listeners : { | |
|tap : function() { | |
|alert("Button 1 was pressed"); | |
|} | |
|} | |
|}; | |
| | |
|//CREATE BUTTON 2 USING FUNCTION. | |
|var button2 = Ext.create('Ext.Button', { | |
|text :'Button 2', | |
|listeners : { | |
|tap : function() { | |
|alert("Button 2 was pressed"); | |
|} | |
|} | |
|}); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [button1, button2], | |
|}); | |
| | |
|} | |
|}); | |
12 Toolbar
Info
• Ext.Toolbar creates toolbar with title and buttons.
• If title is too long it will overlap with button which can be avoided by using Titlebar.
• This tutorial is based on .
Example
• Create Sencha Touch Application using Toolbar.html and Toolbar.js.
• DLC on Toolbar.html
Toolbar.html
|Toolbar.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|var view = Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [ | |
|{ | |
|xtype : 'toolbar', | |
|title : 'Toolbar Title', | |
|items : [ | |
|{ | |
|xtype : 'button', | |
|text : 'Back' | |
|} | |
|] | |
|} | |
|] | |
|}); | |
| | |
|} | |
|}); | |
Example 2
• Create Sencha Touch Application using Toolbar1.html and Toolbar1.js.
• DLC on Toolbar1.html
Toolbar1.html
|Toolbar1.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|//CREATE BUTTON. | |
|var buttonReply = Ext.create('Ext.Button', { | |
|text : 'Back', | |
|listeners : { | |
|tap : function() { | |
|alert("I was pressed"); | |
|} | |
|} | |
|}); | |
| | |
|//CREATE TOOLBAR. | |
|var myToolbar = Ext.create('Ext.Toolbar', { | |
|title : 'Toolbar Title', | |
|items : [buttonReply] | |
|}); | |
| | |
|//CREATE PANEL. | |
|var view = Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [myToolbar] | |
|}); | |
| | |
|} | |
|}); | |
13 Titlebar
Info
• Ext.TitleBar creates toolbar with title and buttons where title will not overlap button if it is too long.
• This tutorial is based on .
Example
• Create Sencha Touch Application using Titlebar.html and Titlebar.js.
• DLC on Titlebar.html
Titlebar.html
|Titlebar.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|var view = Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [ | |
|{ | |
|xtype : 'toolbar', | |
|title : 'Toolbar Title', | |
|items : [ | |
|{ | |
|xtype : 'button', | |
|text : 'Back' | |
|} | |
|] | |
|} | |
|] | |
|}); | |
| | |
|} | |
|}); | |
Example 2
• Create Sencha Touch Application using Titlebar1.html and Titlebar1.js.
• DLC on Titlebar1.html
Titlebar1.html
|Titlebar1.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| | |
|//CREATE BUTTON. | |
|var buttonReply = Ext.create('Ext.Button', { | |
|text : 'Back' | |
|}); | |
| | |
|//CREATE TOOLBAR. | |
|var myToolbar = Ext.create('Ext.TitleBar', { | |
|title : 'Toolbar Title', | |
|items : [buttonReply] | |
|}); | |
| | |
|//CREATE PANEL. | |
|var view = Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [myToolbar] | |
|}); | |
| | |
|} | |
|}); | |
14 Alert
Info
• Displays popup window.
• This tutorial is based on .
Example
• Create Sencha Touch Application using MsgAlert.html and MsgAlert.js.
• DLC on MsgAlert.html
MsgAlert.html
|MsgAlert.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
|Ext.Msg.alert('ALERT','Application is Ready.'); | |
|} | |
|}); | |
| | |
|MsgAlert.js | |
|Ext.setup({ | |
|onReady : function() { | |
|Ext.Msg.alert('ALERT','Application is Ready.',Ext.emptyFn); | |
|} | |
|}); | |
15 Prompt
Info
• Displays popup window with text field and two buttons.
• This tutorial is based on .
Example
• Create Sencha Touch Application using MsgPrompt.html and MsgPrompt.js.
• DLC on MsgPrompt.html
MsgPrompt.html
|MsgPrompt.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
|Ext.Msg.prompt( | |
|'PROMPT', | |
|'Please enter your name:', | |
|function(btn, text) { | |
|alert("btn=" +btn); //btn=ok | |
|alert("text="+text); //BUGED text=null | |
|} | |
|); | |
|} | |
|}); | |
16 Confirm
Info
• Displays popup window with title, text and two buttons.
• This tutorial is based on .
Example
• Create Sencha Touch Application using MsgConfirm.html and MsgConfirm.js.
• DLC on MsgConfirm.html
MsgConfirm.html
|MsgConfirm.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
|Ext.Msg.confirm( | |
|'CONFIRM', | |
|'Do you want to continue?', | |
|function(btn) { | |
|alert("btn=" +btn); | |
|} | |
|); | |
|} | |
|}); | |
4 Listeners
Info
• Listener is Object which maps specific event to a handler function so that when this event occurs, function is executed.
• Each GUI component can react to different events like taping on the list item or swiping over the Panel.
1 Add Listeners
Info
• This chapter shows how to add two listeners to a button to react on events when
● button is displayed
● button is taped
• This tutorial is based on .
Example
• Create Sencha Touch Application using Button.html and Button.js.
• DLC on Button.html
Button.html
|Button.js | |
|Ext.setup({ |[pic] |
| | |
|onReady : function() { |[pic] |
| | |
|//CREATE BUTTON 1 TAP LISTENER. | |
|var button1_Listener_Tap = function() { | |
|alert("Button 1 was pressed"); | |
|} | |
| | |
|//CREATE BUTTON 1 USING JSON SYNTAX. | |
|var button1 = { | |
|xtype : 'button', | |
|text : 'Button 1', | |
|listeners : { | |
|tap : button1_Listener_Tap | |
|} | |
|}; | |
| | |
|//CREATE BUTTON 2 USING FUNCTION. | |
|var button2 = Ext.create('Ext.Button', { | |
|text : 'Button 2', | |
|listeners : { | |
|tap : function() { | |
|alert("Button 2 was pressed"); | |
|} | |
|} | |
|}); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [button1, button2], | |
|}); | |
| | |
|} | |
| | |
|}); | |
3 Add Listener Dynamically
Info
• This chapter shows how to add listeners AFTER the class was already instantiated.
• For this to work button needs to be created using Ext.create('Ext.Button') in order to register the button.
• This tutorial is based on .
Example
• Create Sencha Touch Application using Button.html and Button.js.
• DLC on Button.html
Button.html
|Button.js | |
|Ext.setup({ |[pic] |
| | |
|onReady : function() { |[pic] |
| | |
|//CREATE BUTTON TAP LISTENER. |[pic] |
|var button1_Listener_Tap = function() { | |
|alert("Button was pressed"); | |
|} | |
| | |
|//CREATE BUTTON PAINTED LISTENER. | |
|var button1_Listener_Painted = function() { | |
|alert("Button was painted"); | |
|} | |
| | |
|//CREATE BUTTON. | |
|var button = Ext.create('Ext.Button', { | |
|text : 'Button', | |
|listeners : { | |
|painted : button1_Listener_Painted | |
|} | |
|}); | |
| | |
|//ADD LISTENER LATER. | |
|button.on('tap', button1_Listener_Tap); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [button], | |
|}); | |
| | |
|} | |
| | |
|}); | |
4 Remove Listener
Info
• This chapter shows how to remove listener by using function un().
• For this to work event handler needs to be created on its so that you can reference it.
• This tutorial is based on .
Example
• Create Sencha Touch Application using Button.html and Button.js.
• DLC on Button.html
Button.html
|Button.js | |
|Ext.setup({ |[pic] |
| | |
|onReady : function() { |[pic] |
| | |
|//CREATE BUTTON TAP LISTENER. |[pic] |
|var button1_Listener_Tap = function() { | |
|alert("Button was pressed"); |[pic] |
|button.un('tap', button1_Listener_Tap); | |
|alert("Tap event was removed"); | |
|} | |
| | |
|//CREATE BUTTON PAINTED LISTENER. | |
|var button1_Listener_Painted = function() { | |
|alert("Button was painted"); | |
|} | |
| | |
|//CREATE BUTTON. | |
|var button = Ext.create('Ext.Button', { | |
|text : 'Button', | |
|listeners : { | |
|painted : button1_Listener_Painted, | |
|tap : button1_Listener_Tap | |
|} | |
|}); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [button], | |
|}); | |
| | |
|} | |
| | |
|}); | |
5 Remove Listener with delay
Info
• This chapter shows how to remove listener with delay by using function defer().
• Listener for Tap event will be removed 10 seconds after the button is painted showing alert window.
• For this to work event handler needs to be created on its so that you can reference it.
• This tutorial is based on .
Example
• Create Sencha Touch Application using Button.html and Button.js.
• DLC on Button.html
Button.html
|Button.js | |
|Ext.setup({ |[pic] |
| | |
|onReady : function() { |[pic] |
| | |
|//CREATE BUTTON TAP LISTENER. |[pic] |
|var button1_Listener_Tap = function() { | |
|alert("Button was pressed"); |[pic] |
|} | |
| | |
|//CREATE BUTTON PAINTED LISTENER. | |
|var button1_Listener_Painted = function() { | |
|alert("Button was painted"); | |
|Ext.defer(function() { | |
|button.un('tap', button1_Listener_Tap); | |
|alert("Tap event was removed"); | |
|}, 10000); | |
|} | |
| | |
|//CREATE BUTTON. | |
|var button = Ext.create('Ext.Button', { | |
|text : 'Button', | |
|listeners : { | |
|painted : button1_Listener_Painted, | |
|tap : button1_Listener_Tap | |
|} | |
|}); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [button], | |
|}); | |
| | |
|} | |
| | |
|}); | |
6 Use Listener only once
Info
• This chapter shows how to use Listener only once by defining additional "single" property.
• This tutorial is based on .
Example
• Create Sencha Touch Application using Button.html and Button.js.
• DLC on Button.html
Button.html
|Button.js | |
|Ext.setup({ |[pic] |
| | |
|onReady : function() { |[pic] |
| | |
|//CREATE BUTTON TAP LISTENER. | |
|var button_Listener_Tap = function() { | |
|alert("Button was pressed"); | |
|} | |
| | |
|//CREATE BUTTON. | |
|var button = Ext.create('Ext.Button', { | |
|text : 'Button', | |
|listeners : { | |
|tap : { | |
|single : true, | |
|fn : button_Listener_Tap | |
|} | |
|} | |
|}); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [button], | |
|}); | |
| | |
|} | |
| | |
|}); | |
7 Create and fire custom Event
Info
• This chapter shows how to create and call custom Event.
• This tutorial is based on .
Example
• Create Sencha Touch Application using Button.html and Button.js.
• DLC on Button.html
Button.html
|Button.js | |
|Ext.setup({ |[pic] |
| | |
|onReady : function() { |[pic] |
| | |
|//CREATE HANDLER FUNCTION FOR BUTTON ON TAP. | |
|var button_Handler_Tap = function() { | |
|button.fireEvent('MyEvent', button, 'Hello'); | |
|}; | |
| | |
|//CREATE HANDLER FUNCTION FOR BUTTON ON PAINTED. | |
|var button_Handler_MyEvent = function(button, text) { | |
|alert(text); | |
|}; | |
| | |
|//CREATE BUTTON. | |
|var button = Ext.create('Ext.Button', { | |
|text : 'Button', | |
|listeners : { | |
|tap : button_Handler_Tap, | |
|MyEvent : button_Handler_MyEvent | |
|} | |
|}); | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [button], | |
|}); | |
| | |
|} | |
| | |
|}); | |
8 Get Event Data
Info
• This chapter shows how to get event data like on which Object event was fired.
• This tutorial is based on .
Example
• Create Sencha Touch Application using Button.html and Button.js.
• DLC on Button.html
Button.html
|Button.js | |
|Ext.setup({ |[pic] |
| | |
|onReady : function() { |[pic] |
| | |
|//CREATE BUTTON TAP LISTENER. | |
|var button1_Listener_Tap = function(object) { | |
|console.log(object); | |
|alert(object.config.xtype + '-' + object.config.text); | |
|} | |
| | |
|//CREATE BUTTON. | |
|var button = { | |
|xtype : 'button', | |
|text : 'Button', | |
|listeners : { | |
|tap : button1_Listener_Tap | |
|} | |
|}; | |
| | |
|//CREATE PANEL. | |
|Ext.create('Ext.Panel', { | |
|fullscreen : true, | |
|items : [button], | |
|}); | |
| | |
|} | |
| | |
|}); | |
5 Data
Info
• SenchaTouch handles data storage using following types of objects
● Data Store object is used to store raw data and is equivalent to DB Table but without column names and types
● Data Model object is used to define/describe Data Store like names and types of the fields/columns
● Data Proxy object is used to define from where and how to take data which will be stored in Data Store
• Data Store object can then be connected to a GUI widget in a way that every change in Data Store is automatically reflected to what widget is showing to the user.
1 Data Store
Info
• Data Store is object which holds data which will be used to populate presentation components like list or table.
• In most simple form it looks like table with columns/fields and rows/records which can be inserted as
● as array where position of the value defines in which column it goes
● as hash with key-value pairs where key defines in which column the value goes
• When populating components, like list, data from each record will be used for single list item.
• You can then freely combine column values to get resulting text for each list item.
MVC
• Such separation of data and presentation is crucial component of MVC Design Pattern.
• MVC stands for Model View Controller.
• If you want to change how your data is displayed simply connect it to another presentation component.
• Or if you want to your presentation component to display different set of data simply connect it to different data store.
• This makes maintaining presentation components much easier since they are not cluttered with actual data.
• And your data isn't cluttered with code which defines how this data should be presented to user.
• Sencha Touch gives you few different classes which can be used as Data Stores.
Types
• Sencha Touch 2 gives few different classes which can be used as Data Stores
● array is simplest alternative since it uses array instead of hash for entering new records
● store is more complex since data is entered with key-value pairs where key defines to which column value belongs
1 ArrayStore
Info
• Small helper class to make creating Ext.data.Store easier by
● using array instead of hash for entering new records
● allowing you to omitted data when Sencha will use ',' to determine correct column for remaining data like in CSV file
• This tutorial is based on
Example
• This example shows how to use ArrayStore to populate List.
• Data Model is defined through "fields" array rather than defining it as separate Object.
• Data Proxy is not used since data is entered directly into the Store.
• itemTpl specifies which data from the store will be presented and in what format.
Procedure
• Create Sencha Touch Application using DataArrayStore.html and DataArrayStore.js.
• DLC on DataArrayStore.html
DataArrayStore.html
|DataArrayStore.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| |[pic] |
|//CREATE DATA STORE------------------------------------- | |
|var peopleStore = new Ext.data.ArrayStore({ | |
|fields : [ 'id', 'name', 'age' ], //Names | |
|data : [ ['1' , 'John', '35' ], //Values | |
|['2' , , '40' ], //Missing name. | |
|] | |
|}); | |
| | |
|//ADD RECORDS TO STORE. | |
|peopleStore.add( {name:'Jill' , age:'40', id:'3' }, | |
|{name:'Peter', age:'35', id:'4' }, | |
|{name:'Mary' , age:'25', id:'5' } | |
|); | |
| | |
|//DELETE RECORD FROM STORE. | |
|var index = peopleStore.indexOfId(3); //Jill | |
|peopleStore.removeAt(index); | |
| | |
|//POPULATE LIST WITH DATA STORE------------------------- | |
|var infoList = Ext.create('Ext.dataview.List', { | |
| | |
|//PROPERTIES | |
|id : 'peopleList', | |
|fullscreen : true, | |
|scroll : 'vertical', | |
|itemTpl : '{name} is {age}', | |
|store : peopleStore, | |
| | |
|//EVENTS | |
|onItemDisclosure : function(record) {//Displays arrows | |
|alert('Row '+record.getId()+' selected'); | |
|console.log('dd'); | |
|} | |
| | |
|}); | |
|} | |
|}); | |
Methods
add
• Add one or more records to the data store.
people.add(
{ name : 'Peter', age : '27', id : '8' },
{ name : 'Monik', age : '19', id : '9' },
{
name : 'Jill',
age : '40',
id : '3'
}
);
removeAt
• Removes record at given index which is internal number given to each record which can be retrieved using record id.
var index = people.indexOfId(3);
people.removeAt(index);
2 Store
Info
• This class is used for storing data which will be used to populate components like list or table.
• Store behaves like table where fields define column names while data[] hash defines rows/records.
• When entering new data in data[] you have to give key-value pairs which define to which column/field value belongs.
• array gives much simpler alternative of creating data store since it uses array instead of hash for entering new records.
• itemTpl specifies which data from the store will be presented and in what format.
• This tutorial is based on .
1 Inline data
Info
• This chapter shows how to load Store with inline data.
Example
• This example shows how to use Store to populate List.
• Data Store Model is implicitly created using "fields" array rather than defining it as separate Object.
• Data Proxy is not used since data is entered directly into the Store.
• itemTpl specifies which data from the store will be presented and in what format.
Procedure
• Create Sencha Touch Application using DataStoreInline.html and DataStoreInline.js.
• DLC on DataStoreInline.html
DataStoreInline.html
|DataStoreInline.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| |[pic] |
|//CREATE DATA STORE WITH TWO RECORDS---------------------- | |
|var peopleStore = new Ext.data.Store({ | |
|fields : ['id', 'name', 'age', 'city'],//Instead Model | |
|data : [ {name:'John', age:'35', id:'1' }, //Pairs | |
|{name:'' , age:'40', id:'2' }, | |
|] | |
|}); | |
| | |
|//ADD RECORDS TO STORE. | |
|peopleStore.add( {name:'Jill' , age:'40', id:'3' }, | |
|{name:'Peter', age:'35', id:'4' }, | |
|{name:'Mary' , age:'25', id:'5' } | |
|); | |
| | |
|//DELETE RECORD FROM STORE. | |
|var index = peopleStore.indexOfId(3); //Jill | |
|peopleStore.removeAt(index); | |
| | |
|//POPULATE LIST WITH DATA STORE--------------------------- | |
|var infoList = Ext.create('Ext.dataview.List', { | |
| | |
|//PROPERTIES | |
|id : 'peopleList', | |
|fullscreen : true, | |
|scroll : 'vertical', | |
|itemTpl : '{name} is {age}', | |
|store : peopleStore, | |
| | |
|//EVENTS | |
|onItemDisclosure : function(record) { //Displays arrows | |
|alert('Row '+record.getId()+' selected'); | |
|console.log('dd'); | |
|} | |
| | |
|}); | |
| | |
|} | |
|}); | |
2 Data from file
Info
• This chapter shows how to load Store from a file containing data in JSON Object.
Example
• Create Sencha Touch Application using DataStoreFromFile.html and DataStoreFromFile.js.
• Create users.json.
• DLC on DataStoreFromFile.html
DataStoreFromFile.html
DataStoreFromFile.js
Ext.setup({
onReady : function() {
//CREATE STORE MODEL.
Ext.regModel( 'people',
{ fields : ['id', 'name', 'age', 'city'] }
);
//CREATE STORE WITH ONE ELEMENT.
var infoStore = Ext.create("Ext.data.Store", {
model : "people",
proxy : {
type : "ajax",
url : "",
reader : {
type : "json",
rootProperty : "users"
}
},
autoLoad : true
});
//CREATE LIST.
Ext.create("Ext.List", {
fullscreen : true,
store : infoStore ,
itemTpl : "{name} is {age}"
});
}
});
|users.json | |
|{ |[pic] |
|"success" : true, | |
|"users" : [ | |
|{ "name":"Jill" , "age":"40", "id":"2" }, | |
|{ "name":"Susan", "age":"65", "id":"3" }, | |
|{ "name":"Pete" , "age":"36", "id":"4" } | |
|] | |
|} | |
Errors
• Store is not loaded
3 Data from PHP
Info
• This chapter shows how to load Store by calling PHP file which returns data in JSON format.
Example
• Create Sencha Touch Application using DataStoreFromPHP.html and DataStoreFromPHP.js.
• Create data.php.
• DLC on DataStoreFromPHP.html
DataStoreFromPHP.html
DataStoreFromPHP.js
Ext.setup({
onReady : function() {
//CREATE STORE MODEL.
Ext.regModel( 'people',
{ fields : ['id', 'name', 'age', 'city'] }
);
//CREATE STORE WITH ONE ELEMENT.
var infoStore = Ext.create("Ext.data.Store", {
model : "people",
proxy : {
type : "ajax",
url : "",
reader : {
type : "json",
rootProperty : "users"
}
},
autoLoad : true
});
//CREATE LIST.
Ext.create("Ext.List", {
fullscreen : true,
store : infoStore ,
itemTpl : "{name} is {age}"
});
}
});
| | |
|data.php | |
| | |
data.php (variation)
Errors
• Store is not loaded
2 Data Model
Info
• Data Model is object used to define/describe Data Store
● by defining only names of the columns or
● by defining both names and data types of the columns
• It can be implicitly created if you define column names through fields array inside Data Store.
• Data Model is important since it gives names to Data Store columns.
• These names can then be used by Widgets to define how data from Data Store should be displayed for instance
• itemTpl : '{id}. {name} is {age} years old'
Example
• This example shows how to use Model and Store to populate List.
• Example shows three different ways of creating Data Model (highlighted in yellow)
● by defining only column names
● by defining both names and data types of the columns
● by specifying fields array with column names inside Data Store
● The actual Data Model that is being used is 'peopleModel1' since it is referenced from Data Store.
• Data Proxy is not used since data is entered directly into the Store.
• itemTpl specifies which data from the store will be presented and in what format in a List component.
• Ext.regModel('ModelName', fieldsObject) is used to register model with the engine.
• This way model can be later accessed from Store by using model name model : 'ModelName',
Example
• Create Sencha Touch Application using DataModel.html and DataModel.js.
• DLC on DataModel.html
DataModel.html
|DataModel.js | |
|Ext.setup({ |[pic] |
|onReady : function() { | |
| |[pic] |
|//CREATE STORE MODEL--------------------------------------- | |
| | |
|//SPECIFYING ONLY COLUMN NAMES | |
|Ext.regModel( | |
|'peopleModel1', | |
|{ fields : ['id', 'name', 'age', 'member'] } | |
|); | |
| | |
|//SPECIFYING BOTH COLUMN NAMES AND TYPES | |
|Ext.regModel( | |
|'peopleModel2', | |
|{ fields : [ { name: 'id' , type: 'int' }, | |
|{ name: 'name' , type: 'string' }, | |
|{ name: 'age' , type: 'float' }, | |
|{ name: 'member', type: 'boolean' } | |
|] | |
|} | |
|); | |
| | |
|//CREATE DATA STORE WITH TWO RECORDS----------------------- | |
|var peopleStore = new Ext.data.Store({ | |
|//fields : ['id', 'name', 'age', 'city'],//Instead Model | |
|model : 'peopleModel1', | |
|data : [ {id:'1',name:'John',age:'35.5',member:'1'}, | |
|{id:'2',name:'Mary',age:'25.7',member:'0'}, | |
|] | |
|}); | |
| | |
|//POPULATE LIST WITH DATA STORE---------------------------- | |
|var infoList = Ext.create('Ext.dataview.List', { | |
| | |
|//PROPERTIES | |
|id : 'peopleList', | |
|fullscreen : true, | |
|scroll : 'vertical', | |
|itemTpl : '{id}. {name} is {age} years old', | |
|store : peopleStore, | |
| | |
|//EVENTS | |
|onItemDisclosure : function(record) { //Displays arrows | |
|alert('Row '+record.getId()+' selected'); | |
|console.log('dd'); | |
|} | |
| | |
|}); | |
| | |
|} | |
|}); | |
3 Data Proxy
Info
• Data Proxy is object used to define from where and how to take data which will be stored in Data Store.
Miscellaneous
Info
• Following chapters describe additional tools that can be used with Sencha Touch.
1 Themes
Info
• Themes are used to change the appearance of your application by using different CSS file.
• This way you can change base colour, shape of buttons and so on without changing application logic.
• Unfortunately customizing CSS is difficult since it doesn't support: variables, functions, conditional statements and so on
• This is why Sencha Touch uses SCSS.
• This tutorial is based on .
SCSS
• SCSS stands for Sassy CSS.
• SCSS is programming language for creating CSS and supports: variables, functions, conditional statements and so on
• So you create SCSS file, called Theme, and then use Compass to convert it into CSS.
• Then you simply include resulting CSS file in your application instead of sencha-touch.css.
• Core Sencha Touch SCSS files define all of the components and are located in:
• ...\sencha-touch-2.0.0-pr3\resources\themes\stylesheets\sencha-touch\default.
• Control Sencha Touch SCSS files are used to set certain SCSS parameters to alter the appearance and are located in:
• ...\sencha-touch-2.0.0-pr3\resources\sass
Apply Theme
• To apply different theme to your Android application specify SCSS variables in:
• ....\sencha-touch-2.0.0-pr3\resources\sass\android.scss
• like these:
• $base-color: #080;
• $button-gradient: 'bevel';
• Then start Compass from the same directory: compass compile
• This will generate new CSS file: ...\sencha-touch-2.0.0-pr3\resources\css\android.css
• Include it into your application, instead of sencha-touch.css, to change the overall appearance:
•
• To get multiple versions of android.css simply make additional copies of android.scss.
SCSS variables
• Sencha Touch allows you to use certain SCSS variables to customize the theme.
• As already said these can be used in Control SCSS files in ...\sencha-touch-2.0.0-pr3\resources\sass.
Compass
• Compass is Ruby application which generates CSS from SCSS.
• To use Compass you need to install Ruby programming language.
• Then you need to install RubyGems, package manager for the Ruby, which is used to install Compass.
1 Apply Theme
Info
• This tutorial shows how to apply specific theme to your application in order to change appearance.
• Theme is just a different CSS which you will include in your application instead of sencha-touch.css.
• Sencha Touch includes predefined themes in ...\sencha-touch-2.0.0-pr3\resources\css:
● android.css
● apple.css
● bb6.ss
● sencha-touch.css
● touch-charts.css
Example
• Create Sencha Touch Application using ThemeApply.html & ThemeApply.js.
• DLC on ThemeApply.html
ThemeApply.html
ThemeApply.js
Ext.setup({
onReady : function() {
Ext.create('Ext.Panel', {
fullscreen : true,
html : 'href="sencha-touch.css"',
items : [
{
xtype : 'toolbar',
dock : 'top',
title : 'Standard Titlebar'
},
{
xtype : 'toolbar',
dock : 'top',
ui : 'light',
items : [ { text : 'Test Button' } ]
}
],
});
}
});
[pic] [pic]
2 Customize Theme
Info
• This tutorial shows how to customize theme in order to further change the appearance.
• This is done by defining SCSS variables in predefined themes, for instance in apple.scss.
Create Theme
• Copy D:\Installed\Programming\sencha-touch-2.0.0-pr3\resources\sass\apple.scss as apple_ivor.scss.
• Edit apple_ivor.scss by changing $base-color: #800; .
• Start MSDOS
• cd D:\Installed\Programming\sencha-touch-2.0.0-pr3\resources\sass
• compass compile
output
overwrite ../css/android.css
overwrite ../css/apple.css
create ../css/apple_ivor.css
overwrite ../css/bb6.css
overwrite ../css/sencha-touch.css
apple_ivor.scss
// Let's start with the basics
$base-color: #800;
$base-gradient: 'glossy';
// Lists
$list-active-gradient: 'bevel';
$list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
$list-header-gradient: 'matte';
// Tabs
$tabs-dark: #111;
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-list-paging;
@include sencha-list-pullrefresh;
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;
Use Theme
• Create Sencha Touch Application using ThemeCustomize.html & ThemeCustomize.js.
• Copy D:\Installed\Programming\sencha-touch-2.0.0-pr3\resources\css\apple_ivor.css to D:\SenchaTouch20.
• DLC on ThemeCustomize.html
ThemeCustomize.html
ThemeCustomize.js
Ext.setup({
onReady : function() {
Ext.create('Ext.Panel', {
fullscreen : true,
html : 'Testing',
items : [
{
xtype : 'toolbar',
dock : 'top',
title : 'Standard Titlebar'
},
{
xtype : 'toolbar',
dock : 'top',
ui : 'light',
items : [ { text : 'Test Button' } ]
}
],
});
}
});
3 Optimize Theme
Info
• This tutorial shows how to optimize resulting CSS by including only CSS for used components.
• This is done by including only necessary components in SCSS file.
• In the following example resulting apple_optimized.scss will have 90KB compared to original 150KB of apple.css.
Create Theme
• Copy D:\Installed\Programming\sencha-touch-2.0.0-pr3\resources\sass\apple.scss as apple_optimized.scss.
• Edit apple_optimized.scss by leaving only needed @include statements.
• Start MSDOS
• cd D:\Installed\Programming\sencha-touch-2.0.0-pr3\resources\sass
• ocompass compile
output
overwrite ../css/android.css
overwrite ../css/apple.css
create ../css/apple_optimized.css
overwrite ../css/bb6.css
overwrite ../css/sencha-touch.css
apple_optimized.scss
// Let's start with the basics
$base-color: #880;
$base-gradient: 'glossy';
// Lists
$list-active-gradient: 'bevel';
$list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
$list-header-gradient: 'matte';
// Tabs
$tabs-dark: #111;
@import 'sencha-touch/default/all';
// Let's start with the basics
$base-color: #880;
$base-gradient: 'glossy';
// Lists
$list-active-gradient: 'bevel';
$list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
$list-header-gradient: 'matte';
// Tabs
$tabs-dark: #111;
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-layout;
Use Theme
• Create Sencha Touch Application using ThemePanelOptimized.html & ThemePanelOptimized.js.
• Copy D:\Installed\Programming\sencha-touch-2.0.0-pr3\resources\css\apple_ivor.css to D:\SenchaTouch20.
• DLC on ThemePanelOptimized.html
ThemeCustomize.html
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.