Jorge Ramon

  • Home
  • New Here?
  • Articles
    • All
    • Sencha Touch
    • jQuery Mobile
    • ExtJS
  • Books
  • About

Creating a Sencha Touch Nested List with a PHP Backend

June 23, 2013 14 Comments

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.

Sencha Touch NestedList


Let’s start setting up your sample application. You can either use Sencha Cmd, or manually create the following directories structure for the app:

Nested List app directories

In the index.html file you will add the references to the Sencha Touch framework and the app’s main JavaScript file:

Nested List app index 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.

  • Sencha Touch 2 Book
  • jQuery Mobile Book

Get Free Articles and News

Sign up for MiamiCoder’s Newsletter and get free articles and news:



MiamiCoder will never sell your email address.

Tagged With: Sencha Touch Tutorial 14 Comments

Comments

  1. dharma kshetri says

    July 8, 2013 at 5:01 AM

    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

    Reply
    • Jorge says

      July 8, 2013 at 7:57 AM

      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.

      Reply
  2. Frank78 says

    July 8, 2013 at 10:26 PM

    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

    Reply
    • Jorge says

      July 10, 2013 at 5:30 PM

      Sencha’s are a client-side frameworks that work with any server-side backend, therefore MySQL is as good as any other backend.

      Reply
  3. Sumit says

    September 17, 2013 at 8:44 AM

    hey, i tried this code, but its not running, i am developing using sencha architect 2

    Reply
    • Jorge says

      September 17, 2013 at 10:59 AM

      Since I know that it works, I would say that you have to troubleshoot your code in Architect and find where the issue is.

      Reply
  4. luffy says

    September 18, 2013 at 2:32 AM

    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

    Reply
    • Jorge says

      September 18, 2013 at 9:07 PM

      Send me your code through email so I can take a look.

      Reply
  5. Jonathan says

    November 5, 2013 at 4:06 AM

    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

    Reply
  6. Josh says

    November 8, 2013 at 10:33 AM

    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?

    Reply
    • Jorge says

      November 11, 2013 at 4:16 PM

      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?

      Reply
      • Paul Kimbell says

        January 10, 2014 at 3:30 AM

        I am having a similar problem, how do I register the JSON MIME type?

        Reply
  7. macdonaldgeek says

    March 23, 2015 at 1:33 PM

    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.

    Reply
    • Jorge says

      March 30, 2015 at 11:42 PM

      Looks like you already found the answer. 🙂

      Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get My Books

The beginner's guide to Sencha Touch apps
The beginner's guide to jQuery Mobile apps

Book: How to Build a jQuery Mobile Application

Topics

  • » jQuery Mobile Tutorials
  • » Sencha Touch Tutorials
  • » ExtJS Tutorials
  • » Books
  • » Tools
  • » .Net Tutorials
  • » BlackBerry Tutorials
  • » iOS Tutorials
  • » Node.js Tutorials
  • » Android Training
  • » BlackBerry Training
  • » iOS Training

Search

Contact Me

  •  Email: jorge[AT]jorgeramon.me
  •  Twitter: @MiamiCoder
  •  LinkedIn: Jorge Ramon


Don’t Miss the Free Updates

Receive free updates in your inbox.
Your address is safe with me.

Copyright © 2021 Jorge Ramon · The opinions expressed herein do not represent the views of my employers in any way · Log in