Submit Search
Upload
Workshop on Sencha Touch - Part 4 - Views in sencha touch
•
0 likes
•
517 views
N
Nithya Sivakumar
Follow
Views in sencha touch
Read less
Read more
Mobile
Report
Share
Report
Share
1 of 12
Download now
Download to read offline
Recommended
Workshop on Sencha Touch - Part 2 - First application in sencha touch
Workshop on Sencha Touch - Part 2 - First application in sencha touch
Nithya Sivakumar
Workshop on Sencha Touch - Part 3 - MVC in sencha touch
Workshop on Sencha Touch - Part 3 - MVC in sencha touch
Nithya Sivakumar
Microservices session 1
Microservices session 1
Shouri Varanasi
Workshop on Sencha Touch - Part 5 - UI components in sencha touch
Workshop on Sencha Touch - Part 5 - UI components in sencha touch
Nithya Sivakumar
A step-by-step guide to mobile application development strategy
A step-by-step guide to mobile application development strategy
Nithya Sivakumar
10 Million In 10 Weeks -- What Stanford Learned Building Facebook Apps
10 Million In 10 Weeks -- What Stanford Learned Building Facebook Apps
BJ Fogg
BJ Fogg - The New Rules of Persuasion - Brussels 2009
BJ Fogg - The New Rules of Persuasion - Brussels 2009
BJ Fogg
What Is BuildContext In Flutter And It's Importance
What Is BuildContext In Flutter And It's Importance
Andolasoft Inc
Recommended
Workshop on Sencha Touch - Part 2 - First application in sencha touch
Workshop on Sencha Touch - Part 2 - First application in sencha touch
Nithya Sivakumar
Workshop on Sencha Touch - Part 3 - MVC in sencha touch
Workshop on Sencha Touch - Part 3 - MVC in sencha touch
Nithya Sivakumar
Microservices session 1
Microservices session 1
Shouri Varanasi
Workshop on Sencha Touch - Part 5 - UI components in sencha touch
Workshop on Sencha Touch - Part 5 - UI components in sencha touch
Nithya Sivakumar
A step-by-step guide to mobile application development strategy
A step-by-step guide to mobile application development strategy
Nithya Sivakumar
10 Million In 10 Weeks -- What Stanford Learned Building Facebook Apps
10 Million In 10 Weeks -- What Stanford Learned Building Facebook Apps
BJ Fogg
BJ Fogg - The New Rules of Persuasion - Brussels 2009
BJ Fogg - The New Rules of Persuasion - Brussels 2009
BJ Fogg
What Is BuildContext In Flutter And It's Importance
What Is BuildContext In Flutter And It's Importance
Andolasoft Inc
Meetup - Widget System for Mobile.pptx
Meetup - Widget System for Mobile.pptx
AlexSludnikov
Twitter trends
Twitter trends
Рустам Розумбетов
Beautiful UI in react native By - nativebase.io
Beautiful UI in react native By - nativebase.io
Geekyants
Study project on knuckle joint
Study project on knuckle joint
SRI HARSHA VARDHAN
SAP BI Dashboards (Xcelsius) - Tutorial1
SAP BI Dashboards (Xcelsius) - Tutorial1
Obily W
What’s New in iOS 8 SDK ?
What’s New in iOS 8 SDK ?
E2LOGY
Unlock the Power of Mui Breakpoints and Make Great Projects.pdf
Unlock the Power of Mui Breakpoints and Make Great Projects.pdf
RonDosh
Android Study Jam 2
Android Study Jam 2
DSC GVP
XCode8.0
XCode8.0
Toan Nguyen Cong
Understanding the flex layout
Understanding the flex layout
Barak Drechsler
Jil individual widget upload process
Jil individual widget upload process
Vodafone developer
Enacting Emergent Configurations in the IoT through Domain Objects
Enacting Emergent Configurations in the IoT through Domain Objects
antbucc
Sda 8
Sda 8
AmberMughal5
Editing rich-text artifacts
Editing rich-text artifacts
IBM Rational software
2007 Max Presentation - Creating Custom Flex Components
2007 Max Presentation - Creating Custom Flex Components
michael.labriola
1.static int HORIZONTAL_WRAP2. Container view controllers are most.pdf
1.static int HORIZONTAL_WRAP2. Container view controllers are most.pdf
anonaeon
Auto cad 2004_new_overview
Auto cad 2004_new_overview
mohdfadil112279
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
Paris Android User Group
en_GettingStartedInMicroStation.pdf
en_GettingStartedInMicroStation.pdf
ArielAlejandroLander
Build UI of the Future with React 360
Build UI of the Future with React 360
RapidValue
More Related Content
Similar to Workshop on Sencha Touch - Part 4 - Views in sencha touch
Meetup - Widget System for Mobile.pptx
Meetup - Widget System for Mobile.pptx
AlexSludnikov
Twitter trends
Twitter trends
Рустам Розумбетов
Beautiful UI in react native By - nativebase.io
Beautiful UI in react native By - nativebase.io
Geekyants
Study project on knuckle joint
Study project on knuckle joint
SRI HARSHA VARDHAN
SAP BI Dashboards (Xcelsius) - Tutorial1
SAP BI Dashboards (Xcelsius) - Tutorial1
Obily W
What’s New in iOS 8 SDK ?
What’s New in iOS 8 SDK ?
E2LOGY
Unlock the Power of Mui Breakpoints and Make Great Projects.pdf
Unlock the Power of Mui Breakpoints and Make Great Projects.pdf
RonDosh
Android Study Jam 2
Android Study Jam 2
DSC GVP
XCode8.0
XCode8.0
Toan Nguyen Cong
Understanding the flex layout
Understanding the flex layout
Barak Drechsler
Jil individual widget upload process
Jil individual widget upload process
Vodafone developer
Enacting Emergent Configurations in the IoT through Domain Objects
Enacting Emergent Configurations in the IoT through Domain Objects
antbucc
Sda 8
Sda 8
AmberMughal5
Editing rich-text artifacts
Editing rich-text artifacts
IBM Rational software
2007 Max Presentation - Creating Custom Flex Components
2007 Max Presentation - Creating Custom Flex Components
michael.labriola
1.static int HORIZONTAL_WRAP2. Container view controllers are most.pdf
1.static int HORIZONTAL_WRAP2. Container view controllers are most.pdf
anonaeon
Auto cad 2004_new_overview
Auto cad 2004_new_overview
mohdfadil112279
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
Paris Android User Group
en_GettingStartedInMicroStation.pdf
en_GettingStartedInMicroStation.pdf
ArielAlejandroLander
Build UI of the Future with React 360
Build UI of the Future with React 360
RapidValue
Similar to Workshop on Sencha Touch - Part 4 - Views in sencha touch
(20)
Meetup - Widget System for Mobile.pptx
Meetup - Widget System for Mobile.pptx
Twitter trends
Twitter trends
Beautiful UI in react native By - nativebase.io
Beautiful UI in react native By - nativebase.io
Study project on knuckle joint
Study project on knuckle joint
SAP BI Dashboards (Xcelsius) - Tutorial1
SAP BI Dashboards (Xcelsius) - Tutorial1
What’s New in iOS 8 SDK ?
What’s New in iOS 8 SDK ?
Unlock the Power of Mui Breakpoints and Make Great Projects.pdf
Unlock the Power of Mui Breakpoints and Make Great Projects.pdf
Android Study Jam 2
Android Study Jam 2
XCode8.0
XCode8.0
Understanding the flex layout
Understanding the flex layout
Jil individual widget upload process
Jil individual widget upload process
Enacting Emergent Configurations in the IoT through Domain Objects
Enacting Emergent Configurations in the IoT through Domain Objects
Sda 8
Sda 8
Editing rich-text artifacts
Editing rich-text artifacts
2007 Max Presentation - Creating Custom Flex Components
2007 Max Presentation - Creating Custom Flex Components
1.static int HORIZONTAL_WRAP2. Container view controllers are most.pdf
1.static int HORIZONTAL_WRAP2. Container view controllers are most.pdf
Auto cad 2004_new_overview
Auto cad 2004_new_overview
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
en_GettingStartedInMicroStation.pdf
en_GettingStartedInMicroStation.pdf
Build UI of the Future with React 360
Build UI of the Future with React 360
Workshop on Sencha Touch - Part 4 - Views in sencha touch
1.
VIEWS IN SENCHA
TOUCH APPLICATION - NITHYA 1
2.
View from Existing
Components The easiest way to create a view is to just use Ext.create with an existing Component. © 2010, Cognizant Technology Solutions. Confidential 2
3.
Best Practice to
create views We can create any of our built-in components simply using Ext.Create way. But best practice is to create a subclass with your specializations and then create that. Create a subclass of an existing component then create an instance of it later. We have a brand new component that we can create any number of times © 2010, Cognizant Technology Solutions. Confidential 3
4.
Create Vs Define ©
2010, Cognizant Technology Solutions. Confidential 4 Define – Used to define a new class or create a sub class from an existing class. Any of the config options available on a view can now be specified in our new class's config block Create – Create new objects • Instantiate an existing class Config options can be directly passed in an object.
5.
Layouts in Views
Layouts describe the sizing and positioning on Components in your app. Flex - Flexing means we divide the available area up based on the flex of each child component © 2010, Cognizant Technology Solutions. Confidential 5
6.
Hbox © 2010, Cognizant
Technology Solutions. Confidential 6 Horizontal Arrangement of child items Their relative flex configs of 1 and 2 means that the message list will take up one third of the available width, with the preview taking the remaining two thirds. If our Container was 300px wide, the first item (flex: 1) will be 100px wide and the second (flex: 2) will be 200px wide.
7.
VBox © 2010, Cognizant
Technology Solutions. Confidential 7 Vertical Arrangement of child items
8.
Card Card Layout
takes the size of the Container it is applied to and sizes the currently active item to fill the Container completely. It then hides the rest of the items, allowing you to change which one is currently visible but only showing one at once © 2010, Cognizant Technology Solutions. Confidential 8
9.
Fit Make a
child component fit to the full size of its parent Container. If we add more than one item into a container with a fit layout, only the first item will be visible. If we want to switch between multiple items use the Card layout instead. © 2010, Cognizant Technology Solutions. Confidential 9
10.
Docking Every layout
is capable of docking items inside it. Docking enables one to place additional Components at the top, right, bottom or left edges of the parent Container, resizing the other items as necessary. © 2010, Cognizant Technology Solutions. Confidential 10
11.
Docking - Cont ©
2010, Cognizant Technology Solutions. Confidential 11
12.
Pack and Align
Pack and Align control how your child elements are aligned in your layout. 'Pack' refers to the axis of your current layout, while 'Align' is the opposite. » So in an HBox layout, Pack refers to the horizontal axis, and Align the vertical axis. © 2010, Cognizant Technology Solutions. Confidential 12
Download now