How to Navigate From List to Other View With Selected Record

Description

Here you will learn how to navigate to another view through itemtap event of List with selected record.

Sencha Touch

Sencha Touch enables you to quickly and easily create HTML5 based mobile apps that work on Android, iOS and Blackberry devices and produce a native-app-like experience inside a browser.

Requirements :

• Sencha Architect

You can download from the following link to get a 30-day trial version:

http://www.sencha.com/products/architect/download/

• A web server running locally on your computer.
• A modern web browser; Chrome and Safari are recommended.

Please go through the "How to show items in Sencha List from ASP .Net WebService" article before reading this.

So that you will get a basic idea of how to create list with items. After that do the following steps.

Step 1

Open Sencha Architect take Container from toolbox to view and name it as a Main.

Step 2

Take 2 containers under the main container and name it. In the first container (first view) take list & follow all the steps, as we discussed in the previous article.

Step 3

Now select List, go to properties window and select Event Binding->Basic Event Binding->itemtap.



Step 4

Select another container (2nd View) under main. Drag & Drop two labels here. One is for Name and another is for Price.

Step 5

Select the Main container & select the settings icon beside on that in design mode and do the settings as follows for navigation purposes.



Step 6

Now select the item tap event and write the following piece of code in it.



Step 7

Use a button for the second view and create a handler for that through the properties window and enter the following code in it to navigate to the first view:

Ext.getCmp('Main').setActiveItem(0);

Step 8

Host the application in a server & run it in a browser to see the output, as in:

Output





Conclusion

In List we can navigate using its item tap event. Hope this will be useful for navigating to various views with values.