Sencha Touch is used to create HTML5 based mobile apps that work on Android, iOS and Blackberry devices.
– To develope Sencha Touch Applications, two things are needed:
1. Sencha Touch 2SDK
2. SDK Tools
-There is a command to develop Sencha Touch Application:
E:wampwwwsencha-touch-2.0.1>sencha generate app <Application Name >../<Application Name>
-It will create a Directory-
FirstApp
-app
-controller
-model
-view
-profile
-store
-resource
-sdk
-app.js
-app.json
-index.html
-packager.json
We are editing in app.js file. it will create sencha tab-tools and button
Code-
Ext.application({
name: ‘app’,
launch:function(){
var container = Ext.create(‘Ext.Container’, {
fullscreen: true,
layout: {
type: ‘vbox’,
// align: ‘start’,
//pack: ‘start’
},
items: [
{
docked: ‘top’,
xtype: ‘titlebar’,
title: ‘VBox Layout’
},
{
docked: ‘bottom’,
xtype: ‘toolbar’,
items: [
{
xtype: ‘container’,
html: ‘Pack: ‘,
style: ‘color: #fff; padding: 0 10px; width: 85px;’
},
{
xtype: ‘segmentedbutton’,
allowDepress: false,
items: [
{ text: ‘Start’, handler: function() { layout.setPack(‘start’) }, pressed: true },
{ text: ‘Center’, handler: function() { layout.setPack(‘center’) } },
{ text: ‘End’, handler: function() { layout.setPack(‘end’) } }
]
}
]
},
{
docked: ‘top’,
xtype: ‘toolbar’,
items: [
{
xtype: ‘container’,
html: ‘Align: ‘,
style: ‘color: #fff; padding: 0 10px; width: 85px;’
},
{
xtype: ‘segmentedbutton’,
allowDepress: false,
items: [
{ text: ‘Start’, handler: function() { layout.setAlign(‘start’); }, pressed: true },
{ text: ‘Center’, handler: function() { layout.setAlign(‘center’); } },
{ text: ‘End’, handler: function() { layout.setAlign(‘end’); } },
{ text: ‘Stretch’, handler: function() { layout.setAlign(‘stretch’); } }
]
}
]
},
{ xtype: ‘button’, text: ‘Btn 1’, margin: 2 },
{ xtype: ‘button’, text: ‘Btn 2’, margin: 2 },
{ xtype: ‘button’, text: ‘Btn 3’, margin: 2 }
]
});
var layout = container.getLayout();
}
});
And Last Run index.html file
