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: [ 'pathTo.store.MyStore'
],
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: 'Ext.app.Controller',

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

control: {

'#myButton':{
tap: 'callForStore'
}
},

callForStore: function () {
//a good practice is to display a loading screen in
//order to notify the user that something goes on.
Ext.Viewport.setMasked({
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('pathTo.store.MtStore');

//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';
sto.load({

//define the parameters of the store:
params:{
search_parameter : mySearchParameter,
},

scope: this,

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

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

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

 

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('pathTo.store.MyStore', {
extend: 'Ext.data.Store',

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.