The Various Components in Sencha Touch

Exclusive offer: get 80% off this eBook here
Sencha Touch Mobile JavaScript Framework

Sencha Touch Mobile JavaScript Framework — Save 80%

Build web applications for Apple iOS and Google Android touchscreen devices with this first HTML5 mobile framework book and ebook

₨831.00    ₨166.20
by Bryan P. Johnson John Earl Clark | February 2012 | Open Source

In this article by John E. Clark and Bryan P. Johnson, authors of Sencha Touch Mobile JavaScript Framework, we will take a look at the individual components available in Sencha Touch. we will use the simple base components as a starting point for learning about the more complex components. We'll also talk a bit about how to access our components after they have been created.

This article will cover the following topics:

  • The TabPanel and Carousel components
  • The FormPanel components
  • MessageBox and Sheet
  • The map component
  • The List and NestedList components

 

(For more resources on this topic, see here.)

The reader can benefit from the previous article on Sencha Touch: Layouts Revisited.

The TabPanel and Carousel components

In our last application, we used buttons and a card layout to create an application that switched between different child items. While it is often desirable for your application to do this programmatically (with your own buttons and code), you can also choose to have Sencha Touch set this up automatically, using TabPanel or Carousel.

TabPanel

TabPanel is useful when you have a number of views the user needs to switch between, such as, contacts, tasks, and settings. The TabPanel component autogenerates the navigation for the layout, which makes it very useful as the main container for an application.

The following is a code example:

new Ext.Application({
name: 'TouchStart',
launch: function() {
this.viewport = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
tabBar:{
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [{
xtype: 'container',
title: 'Item 1',
fullscreen: false,
html: 'TouchStart container 1',
iconCls: 'info'
}, {
xtype: 'container',
html: 'TouchStart container 2',
iconCls: 'home',
title: 'Item 2'
}, {
xtype: 'container',
html: 'TouchStart container 3',
iconCls: 'favorites',
title: 'Item 3'
}]
});
}
});

TabPanel, in this code, automatically generates a card layout; you don't have to declare a layout. You do need to declare a configuration for the tabBar component. This is where your tabs will automatically appear.

In our previous code example, we dock the toolbar at the bottom. This will generate a large square button for each child item in the items list. The button will also use the iconCls value to assign an icon to the button. The title configuration is used to name the button.

If you dock the tabBar component at the top, it makes the buttons small and round. It also eliminates the icons, even if you declare a value for iconCls, in your child items. Only the title configuration is used when the bar is docked at the top.

Sencha Touch Mobile JavaScript Framework

Carousel

The Carousel component is similar to TabPanel, but the navigation it generates is more appropriate for things such as slide shows. It probably would not work as well as a main interface for your application, but it does work well as a way to display multiple items in a single swipeable container.

Similar to TabPanel, Carousel gathers its child items and automatically arranges them in a card layout. In fact, we can actually make just some simple modifications to our previous code to make it into a Carousel:

new Ext.Application({
name: 'TouchStart',
launch: function() {
this.viewport = new Ext.Carousel({
fullscreen: true,
direction: 'horizontal',
items: [{
html: 'TouchStart container 1'
}, {
html: 'TouchStart container 2'
}, {
html: 'TouchStart container 3'
}]
});
}
});

The first thing we did was create a new Ext.Carousel class instead of a new Ext.TabPanel class. We also added a configuration for direction, which can be either horizontal (scrolling from left to right) or vertical (scrolling up or down).

We removed the docked toolbar, because, as we will see, Carousel doesn't use one. We also removed iconClass and title from each of our child items for the same reason. Finally, we removed the xtype configuration, since the Carousel automatically creates a panel for each of its items.

Sencha Touch Mobile JavaScript Framework

Unlike TabPanel, Carousel has no buttons, only a series of dots at the bottom, with one dot for each child item. While it is possible to navigate using the dots, the Carousel component automatically sets itself up to respond to a swipe on a touch screen. You can duplicate this gesture in the browser by clicking and holding with the mouse, while moving it horizontally. If you declare a direction: vertical configuration in your Carousel, you can swipe vertically, to move between the child items.

TabPanel and the Carousel components understand the activeItem configuration. This lets you set which item appears when the application first loads. Additionally, they all understand the setActiveItem() method that allows you to change the selected child item after the application loads.

Carousel also has methods for next() and previous(), which allow you to step through the items in order.

It should also be noted that, since TabPanel and Carousel both inherit from the panel, they also understand any methods and configurations that panels and containers understand.

Along with containers and panels, TabPanel and Carousel will serve as the main starting point for most of your applications. However, there is another type of panel you will likely want to use at some point: the FormPanel.

 

FormPanel

The FormPanel panel is a very specialized version of the panel, and as the name implies, it is designed to handle form elements. Unlike panels and containers, you don't need to specify the layout for FormPanel. It automatically uses its own special form layout.

A basic example of creating a FormPanel would look something like this:

var form = new Ext.form.FormPanel({
items: [
{
xtype: 'textfield',
name : 'first',
label: 'First name'
},
{
xtype: 'textfield',
name : 'last',
label: 'Last name'
},
{
xtype: 'emailfield',
name : 'email',
label: 'Email'
}
]
});

For this example, we just create the panel and add items for each field in the form. Our xtype tells the form what type of field to create. We can add this to our Carousel and replace our first container, as follows:

this.viewport = new Ext.Carousel({
fullscreen: true,
direction: 'horizontal',
items: [form, {
layout: 'fit',
html: 'TouchStart container 2'
}, {
layout: 'fit',
html: 'TouchStart container 3'
}]
});

Sencha Touch Mobile JavaScript Framework

Anyone who has worked with forms in HTML should be familiar with all of the standard field types, so the following xtype attribute names will make sense to anyone who is used to standard HTML forms:

  • checkboxfield
  • fieldset
  • hiddenfield
  • passwordfield
  • radiofield
  • selectfield
  • textfield
  • textareafield

These field types all match their HTML cousins, for the most part. Sencha Touch also offers a few specialized text fields that can assist with validating the user's input:

  • emailfield - Accepts only a valid e-mail address, and on iOS devices, will pull up an alternate e-mail address and URL-friendly keyboard
  • numberfield - Accepts only numbers
  • urlfield - Accepts only a valid web URL, and also brings up the special keyboard

These special fields will only submit if the input is valid.

All of these basic form fields inherit from the main container class, so they have all of the standard height, width, cls, style, and other container configuration options.

They also have a few field-specific options:

  • label - A text label to use with the field
  • labelAlign - Where the label appears; this can be top or left, and defaults to left
  • labelWidth - How wide the label should be
  • name - This corresponds to the HTML name attribute, which is how the value of the field will be submitted
  • maxLength - How many characters can be used in the field
  • required - If the field is required in order for the form to submit

Form field placement
While FormPanel is typically the container you will use when displaying form elements, you can also place them in any panel or toolbar, if desired. FormPanel has the advantage of understanding the submit() method that will post the form values via AJAX request or POST.
If you include a form field in something that is not a FormPanel, you will need to get and set the values for the field using your own custom JavaScript method.

In addition to the standard HTML fields, there are a few specialty fields available in Sencha Touch. These include the datepicker, slider, spinner, and toggle fields.

DatePicker

datepickerfield places a clickable field in the form with a small triangle on the far right side.

You can add a date picker to our form by adding the following code after the emailfield item:

,{
xtype: 'datepickerfield',
name : 'date',
label: 'Date'
}

When the user clicks the field, a DatePicker will appear, allowing the user to select a date by rotating the month, day, and year wheels, by swiping up or down.

Sencha Touch Mobile JavaScript Framework

Sliders, spinners, and toggles

Sliders allow for the selection of a single value from a specified numerical range. The sliderfield value displays a bar, with an indicator, that can be slid horizontally to select a value. This can be useful for setting volume, color values, and other ranged options.

Like the slider, a spinner allows for the selection of a single value from a specified numerical range. The spinnerfield value displays a form field with a numerical value with + and - buttons on either side of the field.

A toggle allows for a simple selection between one and zero (on and off) and displays a toggle-style button on the form.

Add the following new components to the end of our list of items:

,{
xtype : 'sliderfield',
label : 'Volume',
value : 5,
minValue: 0,
maxValue: 10
},
{
xtype: 'togglefield',
name : 'turbo',
label: 'Turbo'
},
{
xtype: 'spinnerfield',
minValue: 0,
maxValue: 100,
incrementValue: 2,
cycle: true
}

The following screenshot shows how the new components will look:

Sencha Touch Mobile JavaScript Framework

Our sliderfield and spinnerfield have configuration options for minValue and maxValue. We also added an incrementValue attribute, to spinnerfield, that will cause it to move in increments of 2 whenever the + or - button is pressed.

 

Sencha Touch Mobile JavaScript Framework Build web applications for Apple iOS and Google Android touchscreen devices with this first HTML5 mobile framework book and ebook
Published: February 2012
eBook Price: ₨831.00
Book Price: ₨1,386.00
See more
Select your format and quantity:

 

(For more resources on this topic, see here.)

MessageBox and Sheet

At some point, your application will probably need to give feedback to the user, ask the user a question, or alert the user to an event. This is where the MessageBox and Sheet components come into play.

MessageBox

The MessageBox component creates a window, on the page, that can be used to display alerts, gather information, or present options to the user. MessageBox can be called in three different ways:

  1. Ext.Msg.alert takes a title, message text, and an optional callback function to call when the OK button on the alert is pressed.
  2. Ext.Msg.prompt takes a title, message text, and a callback function to call when the OK button is pressed. The prompt command creates a text field and adds it to the window automatically. The function, in this case, is passed the text of the field for processing.
  3. Ext.Msg.confirm takes a title, message text, and a callback function to call when either one of the buttons is pressed.

The callback function
A callback function is a function that gets called automatically, in response to a particular action taken by the user or the code. This is basically the code's way of saying, "When you are finished with this, call me back and tell me what you did". This callback allows the programmer to make additional decisions based on what happened in the function.

Let's try a few examples, starting with a simple message box:

new Ext.Application({
name: 'TouchStart',
launch: function() {
this.viewport = new Ext.Panel({
fullscreen: true,
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
items: [
{
text: 'Panic',
handler: function() {
Ext.Msg.alert('Don\'t Panic!', 'Keep Calm. Carry
On.');
}
}
]
}]
});
}
});

This code sets up a simple panel with a toolbar and a single button. The button has a handler that uses Ext.Msg.alert() to show our message box.

Escaping quotes
In our previous example, we use the string 'Don\'t Panic' as the title for our message box. The \ tells JavaScript that our second single quote is part of the string and not the end of the string. You can see in the example that the \ disappears in our message box.

Sencha Touch Mobile JavaScript Framework

Now, let's add a second button to our dockedItems attribute for a Ext.Msg.prompt style message box:

{
text: 'Greetings',
handler: function() {
Ext.Msg.prompt('Greetings!', 'What is your name?', function(btn,
text) {
var response = new Ext.MessageBox().show({
title: 'Howdy',
msg: 'Pleased to meet you '+text
});
});
}
}

This message box is a bit more complex. We create our Ext.Msg.prompt class with a title, a message, and a function. The prompt will create our text field automatically, but we need to use the function to determine what to do with the text the user types in the field.

The function is passed a value for the button and a value for the text. Our function grabs the text and creates a new message box to respond, with the name the user typed into the field.

Why is the second MessageBox called differently?
When we call Ext.Msg, Sencha Touch creates a temporary object with our title, message, and button. If we attempt to call Ext.Msg again, within our response function, Sencha Touch just modifies the existing promptMessageBox function. Since we just told that MessageBox function to close, our prompt just disappears instead of showing us the new message.
By using new Ext.MessageBox().show(), we tell the system we need to create something separate from the original MessageBox.

Sencha Touch Mobile JavaScript Framework

The Ext.Msg.confirm MessageBox class is used for decisions the user needs to make or confirmation of a particular action the system is going to take.

Let's add the following component to our list of items in the dockedItems component:

{
text: 'Decide',
handler: function() {
Ext.Msg.confirm('It\'s Your Choice...', 'Would you like to
proceed?', function(btn) {
var response = new Ext.MessageBox().show({
title: 'So be it!',
msg: 'You chose '+btn
});
});
}
}

Similar to the prompt version of the MessageBox function, the confirm version takes a title, message, and a callback function. The callback function is passed the button the user pressed (as the value btn), which can then be used to determine what steps the system should take next.

In this case, we just toss up a dialog box to display the choice the user has made. You can also use an if..then statement to take different actions, depending on which button is pressed.

Sencha Touch Mobile JavaScript Framework

Sheet

The Sheet component is similar to MessageBox function, in that it is typically used to pop up new information or options on the screen. It also presents this new information by appearing over the top of the existing screen. As with MessageBox, no further actions can be taken until Sheet is closed or responded to in some fashion.

Let's add another button to our list of items in the dockedItems component. This button will pop up a new Sheet:

{
text: 'Sheet',
handler: function() {
var mySheet = new Ext.Sheet({
height: 250,
layout: 'vbox',
stretchX: true,
enter: 'top',
exit: 'top',
items: [{
xtype: 'container',
layout: 'fit',
flex: 1,
padding: 10,
style: 'color: #FFFFFF',
html: 'A sheet is also a panel. It can do anything the panel
does.'
}, {
xtype: 'button',
height: 20,
text: 'Close Me',
handler: function() {
this.up('sheet').hide();
}
}],
listeners: {
hide: {
fn: function(){ this.destroy(); }
}
}
});
mySheet.show();
}
}

There are a lot of new things here, but some should seem familiar. Our button starts with the text for the button display and then creates a handler that tells the button what to do when clicked.

We then create a new Ext.Sheet class. Since Sheet inherits from the panel, we have familiar configuration options, such as height and layout, but we also have a few new options. The stretchX and stretchY configurations will cause the Sheet to expand to the full width (stretchX) or height (stretchY) of the screen.

The values for enter and exit control how the Sheet component will slide into place on the screen. You can use top, bottom, left, and right.

Our Sheet uses a vbox layout with two items, a container object for our text and a button object to hide the Sheet component when the user is finished reading it. button itself contains an interesting bit of code:

this.up('sheet').hide();

When we refer to this, we are referring to the button object, since the function occurs inside the button itself. However, we really need to get to the Sheet that the button is contained by, in order to close it when the button is clicked. In order to do this, we use a clever little method called up.

The up method will basically crawl upwards through the structure of the code, looking for the requested item. In this case, we are searching by xtype and we have requested the first Sheet encountered by the search. We can then hide the Sheet with the hide() method.

Ext.ComponentQuery
When you want to get one component, and you've given it an ID, you can use Ext.getCmp(), as we discussed earlier. If, instead, you want to get multiple components, or one component based on where it is in relation to another component, you can use query(), up(), and down(). To hide a toolbar that's inside a panel you can do the following:

panel.down('toolbar').hide();

Additionally, to get all toolbars in your application, you could do the following:

var toolbars = Ext.ComponentQuery.query('toolbar');

Once we hide the Sheet component, we still have a bit of a problem. The Sheet is now hidden, but it still exists in the page. If we go back and click the button again, without destroying the Sheet, we will just keep creating more and more new sheets. That means more and more memory, which also means an eventual death spiral for your application.

What we need to do is make sure we clean up after ourselves, so that the sheets don't pile up. This brings us to the last part of our code and the listeners configuration at the end:

listeners: {
hide: {
fn: function(){ this.destroy(); }
}
}

A listener listens for a particular event, in this case, the hide event. When the hide event occurs, the listener then runs the additional code listed in the fn configuration. In this case, we destroy the Sheet using this.destroy();.

When we use the variable this in our programs, it always refers to the current item. In the case above, we used this in two separate places, and it referred to two separate objects. In our initial usage, we were inside the configuration options for the button, and so this referred to the button. When we later used this as part of our listener, we were inside the configuration for the sheet, and this referred to the sheet.
If you find yourself getting confused, it can be very helpful to use console.log(this);, to make sure you are addressing the correct component.

You should now be able to click the Sheet button and view our new Sheet.

Sencha Touch Mobile JavaScript Framework

ActionSheet

ActionSheet is a variation on the standard Sheet designed to display a series of buttons. This is a good option when you only need a quick decision from the user, with obvious choices that don't require a lot of explanation. For example, a delete confirmation screen would be a good use for an action sheet.

Let's add a new button to our layout that will pull up an ActionSheet component for a delete confirmation:

{
text: 'ActionSheet',
handler: function() {
var actionSheet = new Ext.ActionSheet({
items: [
{
text: 'Delete',
ui: 'decline'
},
{
text: 'Save',
ui: 'confirm'
},
{
text: 'Cancel',
handler: function() {
this.up('actionsheet').hide();
}
}
],
listeners: {
hide: {
fn: function(){ this.destroy(); }
}
}
});
actionSheet.show();
}
}

The ActionSheet is created in much the same fashion as our previous Sheet example. However, the ActionSheet assumes that all of its items are buttons, unless you specify a different xtype.

Our example has three simple buttons: Delete, Save, and Cancel. The Cancel button will hide the ActionSheet and the other two buttons are just for show.

As with our previous example, we also want to destroy the ActionSheet when we hide it. This prevents copies of the ActionSheet from stacking up in the background and creating problems.

Clicking the ActionSheet button in our application should now display the ActionSheet we created.

Sencha Touch Mobile JavaScript Framework

 

Sencha Touch Mobile JavaScript Framework Build web applications for Apple iOS and Google Android touchscreen devices with this first HTML5 mobile framework book and ebook
Published: February 2012
eBook Price: ₨831.00
Book Price: ₨1,386.00
See more
Select your format and quantity:

 

(For more resources on this topic, see here.)

Map

Map is a very specialized container designed to work with the Google Maps API. The container can be used to display much of the information that Google Maps displays.

We are going to create a very basic example of the Map container for this section.

For this example, let's create a new JavaScript file:

new Ext.Application({
name: 'TouchStart',
launch: function() {
var map = new Ext.Panel({
fullscreen: true,
items : [
{
xtype: 'map',
useCurrentLocation: true
}
]});
this.viewport = map;
}
});

For this example, we are just creating a single Panel component with one item. The item is a map and has the configuration useCurrentLocation: true. This means that the browser will attempt to use our current location as the center of the map's display. The user is always warned when this happens and given an option to decline.

Before we can see how this works, we need to make one change to our standard index.html file. Underneath the line where we include our other JavaScript files, we need to include a new file from Google:

<!-- Google Maps API -->
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://maps.google.com/maps/api/
js?sensor=true"></script>

This will include all of the functions needed for us to use the Google Maps API.

If you reload the page, you will be asked if you want to allow your current location to be used by the application. Once you accept, you should see a new map with your current location at the center.

Sencha Touch Mobile JavaScript Framework

You can also use the map property and the mapOptions configuration option to access the rest of the Google Maps functionality.

Google Maps API documentation
The full Google Maps API documentation can be found at http://code.google.com/apis/maps/documentation/v3/reference.html.

 

Lists

Sencha Touch offers a few different kinds of list components. Each of these list components consists of four basic parts: the list panel, an XTemplate, a data store, and a model.

  • The list panel is in charge of gathering these other items as part of its configuration options
  • The XTemplate determines how each line in the list is displayed
  • The data store contains all of the data that will be used in the list
  • The model describes the data that gets used in the data store by specifying the datatype (string, Boolean, int, and so on) and any special validation methods or default values

The following is a code example:

new Ext.Application({
name: 'TouchStart',
launch: function() {

Ext.regModel('ListItem', {
fields: [
{name: 'first', type: 'string'},
{name: 'last', type: 'string'}
]
});
this.viewport = new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: [
{
xtype: 'list',
itemTpl: '{last}, {first}',
store: new Ext.data.Store({
model: 'ListItem',
data: [
{first: 'Aaron', last: 'Karp'},
{first: 'Baron', last: 'Chandler'},
{first: 'Bryan', last: 'Johnson'},
{first: 'David', last: 'Evans'},
{first: 'John', last: 'Clark'},
{first: 'Norbert', last: 'Taylor'}
]
})
}]
});
}
});

We start by creating our application as before. We then create the model that describes the data we are going to use in our list:

Ext.regModel('ListItem', {
fields: [
{name: 'first', type: 'string'},
{name: 'last', type: 'string'}
]
});

This code gives us three potential values for each ListItem component we will be using in the list: first and last. It also tells us the datatype for each value; in this case, both are strings. This lets the data store know how to handle sorting the data and lets the XTemplate understand how the data can be used.

Once we have our model, we create a panel with a single item, which is our list. The first configuration after our xtype is itemTpl: '{last}, {first}'. This sets our XTemplate for the list to display as: the last name, followed by a comma, and then the first name, for each person in the list.

The itemTpl object is followed by our store, which tells the list what data we have available for display. The store also needs a configuration for model: ListItem;, so it knows the model we are using. This will allow the store to sort the data correctly.

Sencha Touch Mobile JavaScript Framework

Notice that, right now, our list is not sorted alphabetically. We need to add a sorter to the store underneath the configuration option for our model:

sorters: 'last'

This will sort our list by the value last.

Grouped lists

Grouping lists are also common to a number of applications. Typically, grouping is used for lists of people or other alphabetical lists of items. Address books, or long lists of alphabetical data, are great places for grouped lists. A grouped list places an indexBar component on the screen, allowing the user to jump to a specific point in the list.

To group our current list, we need to add two configuration settings to our list component. Add the following code beneath where we declare xtype: 'list':

grouped: true,
indexBar: true,

We also need to add a function to our store that will get the string used to display our alphabetical indexBar. Add the following code beneath our sorters component in the store component:

getGroupString : function(record) {
return record.get('last')[0];
},

This code uses record.get('last') to get the last name of our contact. We also add [0] to the end of our get function, which causes JavaScript to treat the last name as an array of individual letters instead of as a string. The first element of our array ([0]) is the first letter of the last name for our contact. This lets the list know where to scroll to when one of the letters on the indexBar is clicked.

Sencha Touch Mobile JavaScript Framework

Nested lists

The NestedList component automates the layout and navigation of a nested data set. This can be very useful for situations where you have a list of items and details for each item in the list. For example, let's assume we have a list of offices, each office has a set of departments, and each department has people.

We can initially represent this, onscreen, as a list of offices. Clicking on an office takes you to a list of departments within that office. Clicking on a department takes you to a list of people in that department.

The first thing we need is a set of data to use with this list:

var data = {
text: 'Offices',
items: [{
text: 'Atlanta Office',
items: [{
text: 'Marketing',
items: [{
text: 'David Smith',
leaf: true
}, {
text: 'Alex Wallace',
leaf: true
}]
},{
text: 'Sales',
items: [{
text: 'Candice Adams',
leaf: true
}, {
text: 'Mike White',
leaf: true
}]
}
]
},{
text: 'Athens Office',
items: [{
text: 'IT',
items: [{
text: 'Baron Chandler',
leaf: true
}, {
text: 'Aaron Karp',
leaf: true
}]
},{
text: 'Executive',
items: [{
text: 'Bryan Johnson',
leaf: true
}, {
text: 'John Clark',
leaf: true
}]
}
]
}]
};

This is a rather large and ugly-looking array of data, but it can be broken down into a few simple pieces:

  • We have one main item called Offices
  • Offices has a list of two items, Atlanta Office and Athens Office
  • The two items each have two departments
  • Each department has two people

Each of our people in this list has a special attribute called leaf. The leaf attribute tells our program that it has reached the end of the nested data. Additionally, every item in our list has an attribute called text. This becomes important for both our data model and our store.

Since we are only worried about displaying the value of text, our model becomes very simple:

Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});

We can then create our store and add our data to it:

var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});

For a NestedList we need to use a TreeStore and set the reader to use type: 'tree'.We set the root configuration to point to the variable data we defined earlier. We also need to tell the store where it should start looking for data. In this case, we set root: 'items' to tell the store proxy to begin looking in the first set of items in our data.

Finally, we need to create our NestedList:

var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Minions',
displayField: 'text',
store: store
});

We set the NestedList component to fullscreen, we set a title, we tell it what field to display, and finally, we point it to our store so it can grab the data we made.

Sencha Touch Mobile JavaScript Framework

If you click through the nested list, you will notice that the click actions have been added automatically, as well as the upper navigation and titles.

The NestedList provides a great starting point for displaying hierarchical data quickly and efficiently on a small screen.

Summary

The article described a number of the more common and useful components in Sencha Touch, including:

  • Containers
  • Panels
  • TabPanel
  • Carousel
  • FormPanel
  • FormItem
  • MessageBox
  • Sheet
  • List
  • NestedList

Further resources on this subject:


About the Author :


Bryan P. Johnson

Bryan P. Johnson is a graduate of the University of Georgia. He went to work for MindSpring Enterprises in late 1995, where he met his co-author John Earl Clark. At MindSpring and later, EarthLink; Bryan served in multiple positions for over seven years, including the Director of System Administration and Director of Internal Application Development. After leaving EarthLink, he took some time off to travel before joining John to start Twelve Foot Guru.

Bryan has worked with Sencha's products since the early days of YUI-Ext and has used Sencha Touch since its first betas.

John Earl Clark

John Earl Clark holds a Master's Degree in Human Computer Interaction from Georgia Tech and an undergraduate degree in Music Engineering from Georgia State University. John and his co-author, Bryan Johnson, worked together at MindSpring and later EarthLink, starting out in Technical Support and Documentation, before moving into Application Development and finally management of a small development team. After leaving Earthlink in 2002, John began working independently as a consultant and programmer, before starting Twelve Foot Guru, LLC with Bryan in 2005.

John has been working with Sencha Touch since the first early beta releases. He has also worked with Sencha’s ExtJS since the early days when it was still known as YUI-Ext. John has also written a previous book with Bryan Johnson called Sencha Touch Mobile JavaScript Framework.

When he is not buried in code, John spends his time woodworking, playing guitar and brewing his own beer.

Books From Packt


Sencha Touch Cookbook
Sencha Touch Cookbook

iOS 5 Essentials
iOS 5 Essentials

iPhone User Interface Cookbook
iPhone User Interface Cookbook

HTML5 Mobile Development Cookbook
HTML5 Mobile Development Cookbook

Xcode 4 iOS Development Beginner's Guide
Xcode 4 iOS Development Beginner's Guide

Ext JS 4 Web Application Development Cookbook
Ext JS 4 Web Application Development Cookbook

Core Data iOS Essentials
Core Data iOS Essentials

iPhone JavaScript Cookbook
iPhone JavaScript Cookbook


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software