The Sencha Touch UI provides mixture of interactive widgets that can be displayed on screen. Below image shows the class diagram of Sencha Touch container sub classes.
Ext.Container
is the base class that may contain and manage other Components. It handles the basic behavior of containing items, namely adding, inserting and removing items. Child components can be added to Container, by specifying the layout configuration property. We can either specifying child items of a Container using items configuration property or dynamically adding Components to a Container.
By default, Containers use the AutoContainerLayout
scheme which only renders child components, appending them one after the other inside the Container. An example of these types of widgets is the Toolbar. Valid layout type values are, auto
, (default), card
, fit
, hbox
and vbox
.
Sencha provides a number of visual components out-of-the-box. Creating instances of these components can be done either by making calls to their constructors or declarative by "xtype"
. The xtype is a key used for specifying the component class to be constructed. I’ve organized the following table to help us grasp the groups of UI components.
Basic User Interface Components
[table tablesorter=”0″ class=”table table-bordered” style=”width: 50%;”] xtype, UI Component Classesbutton, Ext.Button
component, Ext.Component
panel, Ext.Panel
toolbar, Ext.Toolbar
spacer, Ext.Spacer
tabpanel, Ext.TabPanel
[/table]
Sencha Touch Form Components
[table tablesorter=”0″ style=”width: 50%;” class=”table table-bordered”] xtype,UI Form Component Classesform,Ext.form.FormPanel
checkbox,Ext.form.Checkbox
select,Ext.form.Select
fieldset,Ext.form.FieldSet
numberfield,Ext.form.NumberField
radio,Ext.form.Radio
textarea,Ext.form.TextArea
textfield,Ext.form.TextField
[/table]
The scope of this tutorial includes the basic UI components and form components but not all of them. To determine the “xtype”
to use for a particular class of component, refer the Sencha Touch API Documentation for that class.
http://docs.sencha.com/touch/2.0.2/
Sencha Touch UI Design tutorials
1. Sencha Touch Button Example
2. Sencha Touch ToolBar example
5. Sencha Touch Basic Form Control Example
7. Simple and Grouped List Example