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


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.


  • Sencha Architect

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

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.




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.

Up Next
    Ebook Download
    View all
    View all