In this tutorial you will learn how to use a Sencha Touch Nested List to render data sent from a server. I have seen developers who are getting started with Sencha Touch struggle with this scenario, in part because there is little documentation on how to connect a Nested List component to a server endpoint.
The application you will create in this tutorial is very similar to the Nested List example in Sencha’s documentation. The difference is that instead of using local hard-coded data to populate the Nested List, you will create a server-side handler that will supply the data for the list. In particular, you will create a Sencha Touch Nested List with a PHP Backend.
Let’s start setting up your sample application. You can either use Sencha Cmd, or manually create the following directories structure for the app:
In the index.html file you will add the references to the Sencha Touch framework and the app’s main JavaScript file:
Defining the Model
Now you can start working on the app’s components. First, you will create the Grocery.js file in the app/model directory. In the file, you will define the Grocery Model like so:
Ext.define('App.model.Grocery', { extend: 'Ext.data.Model', config: { fields: [{ name: 'text', type: 'string' }] } });
To keep the example as simple as possible, you will use a model with only one field, text, which you will render inside each item of the list.
Creating a TreeStore
Then you will create the Groceries.js file in the app/store directory. This is where you will define the Groceries store. The store’s code should look like this:
Ext.define('App.store.Groceries', { extend: 'Ext.data.TreeStore', config: { model: 'App.model.Grocery', defaultRootProperty: 'items', proxy: { type: 'ajax', url: '../../services/groceries.php' }, autoLoad: true, root: { text:'Groceries' } } });
Three important things to note in the store’s definition:
- The store is a Ext.data.TreeStore, a great place to keep data that is hierarchical in nature.
- The defaultRootProperty config, which you use to specify a default root property when you don’t explicitly define an XML reader for the store. This is what tells the store the exact place where it can find its data inside the XML document sent by the server.
- The use of an Ajax proxy, pointing to the server page that will supply the data for the store.
Defining the Nested List
Going back to the app’s components, in the app/view directory you will create the GroceriesList.js file. This is where the GroceriesList class goes:
Ext.define('App.view.GroceriesList', { extend: 'Ext.NestedList', alias: "widget.grocerieslist", config: { fullscreen: true, title: 'Groceries', displayField: 'text', store: 'Groceries' } });
GroceriesList is a NestedList component that will use the text field of the Grocery model as its display field, and the Groceries store as its data supplier.
The Application Instance
With these components in place, you can define the application in the app.js file, just like this:
Ext.application({ name: 'App', views: ['GroceriesList'], models:['Grocery'], stores:['Groceries'], launch: function () { Ext.Viewport.add([ { xtype: 'grocerieslist' } ]); } });
The application instance itself is pretty simple, after declaring the model, store and view, you use the launch function to create an instance of the GroceriesList component and bring it to the foreground.
Creating the Server Endpoint
The server endpoint is probably the most interesting part of this project. For this example you will use a php page as the endpoint. You will name it groceries.php, and in it you will add the following elements.
First, you will create a class to represent a grocery item:
class GroceryItem { function __construct($text, $leaf, $items) { $this->text = $text; $this->leaf = $leaf; $this->items = $items; } }
Next, you will create a class to represent your groceries list:
class Groceries { function __construct($items) { $this->items = $items; } }
Then you will create a sample groceries list like so:
$redBull = new GroceryItem("Red Bull", true); $coke = new GroceryItem("Coke", true); $dietCoke = new GroceryItem("Diet Coke", true); $espresso = new GroceryItem("Espresso", true); $coffee = new GroceryItem("Coffee", true); $stillWater = new GroceryItem("Still", true); $sparklingWater = new GroceryItem("Sparkling", true); $water = new GroceryItem("Water", false, array($sparklingWater,$stillWater)); $drinks = new GroceryItem("Drinks", false, array($water,$coffee,$espresso,$redBull,$coke,$dietCoke)); $groceries = new Groceries($drinks);
Note that if this was a production app, this is the place where you would retrieve your groceries from a database, and then populate the list.
After this step, you just need to send the list to the Sencha Touch app:
header('Cache-Control: no-cache, must-revalidate'); header("content-type:application/json"); echo(json_encode($groceries));
And this is all it takes to connect a Sencha Touch Nested List component to a server endpoint. If you run this app, you should see the groceries list working as expected.
Want to Learn More?
My Sencha Touch and jQuery Mobile books will guide you, step by step, through the process of building Sencha Touch and jQuery Mobile applications. If you like to learn by doing, these books are for you.
Get Free Articles and News
Sign up for MiamiCoder’s Newsletter and get free articles and news:
I face one problem in sencha, because of i am very new developer. please hit this problem and give some code and idea.
stackoverflow.com/questions/17522538/how-to-call-certain-view-in-sencha-using-sidebar-tab-button
My tutorial on how to create a Sencha Touch application, or my Sencha Touch book, explain the master/detail scenario with a list and a details view. On top of this you will also need a view that takes you to the Student, Teacher and Parent categories. One way to accomplish this is to use a tab panel.
Hi, what is the best way to store data with Sencha? I want to insert, modify, and read data from a database. Can i work with mysql? or its not solution for Sencha? Can you recommend me a nice tutorial for that?
Thank you
Sencha’s are a client-side frameworks that work with any server-side backend, therefore MySQL is as good as any other backend.
hey, i tried this code, but its not running, i am developing using sencha architect 2
Since I know that it works, I would say that you have to troubleshoot your code in Architect and find where the issue is.
hi,
I have gone through a good number of your post s and they helped me so much to get started with sencha ..now i have so problem loading data from a server generated json data into a store ..not a file jus raw json data(by making a query from a server side database )…… say somexyz.php…and using your login post i tried using Ext.Ajax.request to make it work but it doent seem to works so if you can help me out that would of gr8 help..i know that this is not the correct post to post this question still please help …..thnx in advance
Send me your code through email so I can take a look.
Hi, thank you for your tutorials. They helped me a lot!
But I can’t manage to get this tutorial up and running. Maybe you can help me a little bit?
stackoverflow.com/questions/19655593/sencha-touch-2-3-0-nestedlist-doesnt-display-child-items-when-tapping-but-only
I have a testing demo of the problem here:
test.joquery.com/SenchaNestedListProblem/
Thank you in advance
I’m having a lot of trouble getting this tutorial and the tutorial for the login page working. I’m on a Mac running OSX Mavericks. I can get the project up and running using the sencha command webserver, but every time I try to access the php file I get an error message back. “Unable to parse the JSON returned by the server: Error: You’re trying to decode an invalid JSON String: ‘entire source code for my php file”. I’ve tried loading apache and loading the php file from there and I get the source code for the php in my browser when I navigate to the file using localhost. Can you please help or give some insight into what is causing this?
From your description it seems to be a PHP problem, not a problem with the tutorial. Do you have PHP correctly installed? Also, do you have JSON registered as a MIME type?
I am having a similar problem, how do I register the JSON MIME type?
Hi Sir! when you have some time to spare, can you please have a look at my query at stackoverflow: stackoverflow.com/questions/29197441/how-to-connect-a-sencha-touch-application-with-mysql-database-with-a-php-backend
I still can’t understand where exactly I’m going wrong and my application loads very well, but the list view still does not work. I tried to manually debug the PHP code and it does work and retrieves the data I want, but something is not working in between. Thanks in advance for any input you may provide.
Looks like you already found the answer. 🙂