How to Show Items in Sencha List From ASP .Net WebService

Description

Here you will learn how to show items in a List, which are retrieved from a Store.

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 it from the following link to get a 30-day trial version.

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

You will also need:

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

Step 1

Create an ASP .Net Webservice with required methods, which returns a XML file.

Step 2

Open Sencha Architect, take a container as a view. Drag & drop a List from the Toolbox to the container.

Step 3

Add a XML Store to the Stores, which automatically creates MyAjaxProxy & MyXmlReader.

Step 4

Configure the Store based on the XML file, which is returned by the webservice. Go to the MyXmlReader, set the Root Property & Record as based on the XML file as follows:



Step 5

Select the MyAjaxProxy & set the URL of the webservice.

Ex : SampleWebService/SampleService.asmx/SampleMethod

Copy this URL from the browser & paste it in the URL of MyAjaxProxy.

Step 6

Select the MyXmlStore, create the required fields. In our example the fields are Name & Price.

Step 7

Now you can see that your Webservice data is in the Store. Right-click on MyXmlStore and select the Load Data option as follows:



Step 8

After loading data into the store click on the icon in the right side of the store to view the data in it:



Step 9

Click on List, select the Store option in the properties window & select the configured store. Now you can see the data in the List in the Architect itself.



Step 10

Host the application in a server and run the app.html file in the browser. Now you can get scrolling in the browser.

Note : To show an arrow beside the item, select the List and select onItemDisclosure from the properties window. Now you can see an arrow beside the item.

Output



Conclusion

In Sencha we can get a List with a nice scrolling effect. In the next article I will explain how to go for the next view with a selected item, when items are selected in a List.