Call Us: +1-888-227-1645

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

javascript

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!

Let's build something amazing together

Give us a ring and let us know how we can help you reach your goals. Or if you'd like, start a chat. We're usually available 9-5 EST. We try to respond to every inquiry within one business day.

Phone number
+1-888-227-1645

Technologies and services we work with:

Laravel Laravel
WordPress WordPress
React ReactJS
EmberJS EmberJS
woocommerce WooCommerce
next.js NextJS
gatsby Gatsby
Shopify Shopify
VueJs VueJS
contentful Contentful
next.js JAMStack
gatsby Laravel Jigsaw
WPEngine WP Engine
Laravel Livewire Laravel Livewire
Netlify Netlify