Sencha Touch 2 – Dynamically Loading the Store of a List and Asking the Server for Data by Parameter

This example shows how to dynamically create and load a Store in order to query data by a parameter.

We are going to define our View which will contain two components – a list and a button to trigger the store load. The view will be handled by a Controller

The View:


var view = Ext.create('Ext.NavigationView', {
fullscreen: true,
requires: [ ''
items: [{
title: 'List View',
items: [{
xtype: 'button',
id: 'myButton',
text: 'Push to load a Store!',
xtype: 'list',
id: 'myList',
itemCls: 'listItem',


The Controller:

The controller will listen for a tap event on the button and call a function which will initiate the store and assign it to the list. The Store in this case acts a lot like any regular remote server call.


Ext.define('pathTo.controller.MyController', {
extend: '',

config: {
refs: {
myButton: '#myButton',
myList: '#myList',

control: {

tap: 'callForStore'

callForStore: function () {
//a good practice is to display a loading screen in
//order to notify the user that something goes on.
xtype: 'loadmask',
message: 'Working...'

//create your store, because in this example we do not
//define the store in a component, but create and load it as we go
var sto = Ext.create('');

//mySearchParameter will be set up to be the property by
//which we tell the server to query the data. in this case all
// objects that have the property 'orange' for example.
var mySearchParameter = 'orange';

//define the parameters of the store:
search_parameter : mySearchParameter,

scope: this,

callback : function(records, operation, success) {
Ext.Viewport.setMasked(false); // hide the load screen

console.log('JSON returned:::::::::::::');

// add the store to the list
var thelist = this.getMyList();


The Store :

The sore is self sufficient: It has its model defined directly inside the config, it has been set to autoLoad=false because we want to be able to assign the dynamic parameters upon calling the store later.


Ext.define('', {
extend: '',

config: {
fields: [
name: 'first_name'
name: 'last_name'

storeId: 'MyStore',
autoLoad :false,
proxy: {
type: 'ajax',
url: 'api/myPHPfile.php',
reader: {
type: 'json',
rootProperty: 'data'


That’s it !
Happy Coding !

About Curious Minds
We are a web development firm in New York and Chicago, providing development resources and consulting for websites and mobile apps since 2004.