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 screenconsole.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!
