Sencha Touch - How to pass value in controller to store in view? - sencha-touch-2

Question

I use store filter to search category apps.Value to search apps category is from controller.But I'don't know to pass value from controller to view for use store filter in view.Looks my code:
This my controller:
Ext.define('Catalog.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
homepanel: 'homepanel',
but: 'homepanel #category',
categoryButton: 'button[action=Categories]',
list:'list',
homepanellist: 'homepanel #Applist',
navigationlist: 'navigation #Catlist',
navigation: 'navigation'
},
control: {
homepanellist:{
itemtap: 'showApp'
},
categoryButton:{
tap: 'showCat'
},
homepanel: {
back: 'backButtonHandler'
},
navigationlist:{
itemtap: 'showCatQuery'
},
navigation:{
back: 'backButtonNav'
}
}
},
//called when the Application is launched, remove if not needed
showApp: function(list,index,element,record) {
Ext.getCmp('category').hide();
// this.getBut().setHidden(true);
var Catname = Ext.get('catname').dom.innerHTML;
var butDown = '';
var gal = record.get('gallery');
var items2 = [];
if(gal.length > 0){
for(var i = 0; i < gal.length;i++){
items2.push({
html:'<center><img style="margin-top:10px;" src="http://127.0.0.1:3000/system/gallery_apps/imgs/000/000/'+gal[i].id+'/original/'+gal[i].img_file_name+'" width="200" height="300"></center>'
})
}
}
// Check OS Mobile
if(Ext.os.name == "iOS"){
butDown = "<div style='float:right;position: relative;top: -20px;'><a href='"+record.get('url_ios')+"'><img src='touch/resources/images/d_ios.png' style='width: 100px;float: right;margin-top: -15px;'></a></div>";
}else{
butDown = "<div style='float:right;position: relative;top: -20px;'><a href='"+record.get('url_android')+"'><img src='touch/resources/images/d_and.png' style='width: 100px;float: right;margin-top: -15px;'></a></div>";
}
// Check OS Mobile
this.getHomepanel().push({
xtype: 'panel',
title: 'info',
scrollable: true,
styleHtmlContent: true,
layout: {
type: 'vbox'
},
items: [
{
xtype: 'panel',
style: 'margin-left: -1.2em;margin-right: -1.2em;margin-top: -1.2em;',
height:100,
html: '<div style="width: 100%;height: 100px;padding: 1.2em;border-bottom:2px ridge #C5C7BC;">'+
'<div style="float:left;width:85px;">'+
'<img src="http://127.0.0.1:3000/system/appinfos/appicons/000/000/'+record.get('id')+'/original/'+record.get('appicon_file_name')+'" width="75" heigh="75"></img>'+
'</div>'+
'<div style="word-wrap: break-word;"><b><p style="font-size:15px;margin:0;">'+record.get('name')+'</p></b><p>'+Catname+'</p></div>'+
butDown+
'</div>'+
'<div style="clear:both;"></div>'
},
{
// xtype:'datascreen',
// data:record.data
xtype:'carousel',
direction: 'horizontal',
height:325,
style: 'margin-left: -1.2em;margin-right: -1.2em;background-color:#C0C0C0;box-shadow:inset 3px 3px 49px #fafafa;border-bottom:2px ridge #C5C7BC;',
listeners:
{
'afterrender': function(carousel) {
carousel.pageTurner = new Ext.util.DelayedTask(function() {
if (this.getActiveIndex() == this.items.length - 1) {
this.setActiveItem(0, 'slide');
}
else {
this.next();
}
this.pageTurner.delay(6000);
}, carousel);
carousel.pageTurner.delay(6000);
}
},
items: items2
},
{
xtype: 'panel',
style: 'margin-left: -1.2em;margin-right: -1.2em;',
html:
'<div style="width: 100%;padding: 1.2em;border-bottom:2px ridge #C5C7BC;">'+
'<h1 style="font-size:16px;font-weight:bold;color:black;">Description</h1>'+
'<div id="deS">'+
record.get('description')+
'</div>'+
'</div>'
}
]
});
},
backButtonHandler: function(button){
Ext.getCmp('category').show();
},
backButtonNav: function(button){
Ext.getCmp('category').hide();
},
showCat: function(btn){
Ext.getCmp('category').hide();
this.getHomepanel().push(
{
xtype: 'panel',
title: 'Categories',
scrollable: true,
styleHtmlContent: true,
layout: {
type: 'fit'
},
items: [
{
xtype: 'navigation'
}
]
}
);
// this.but().setHidden(true);
},
showCatQuery: function(list,index,element,record){
// var sto = Ext.getStore('myStore');
// sto.clearFilter();
// sto.filter('id', record.get('id'));
// console.log(record.get('id'));
var catid = record.get('id'); << This Value for send to view for store filter
this.getNavigation().push({
xtype: 'panel',
title: 'A',
scrollable: true,
styleHtmlContent: true,
layout: {
type: 'fit'
},
items: [
{
xtype: 'showSearchCategory',
}
]
});
}
});
This my view:
Ext.define('Catalog.view.showSearchCategory', {
extend: 'Ext.navigation.View',
xtype: 'showSearchCategory',
requires: ['Ext.data.Store'],
config: {
navigationBar: false,
items: [
{
title: "All Apps",
xtype: 'list',
// id:'Applist',
itemTpl: new Ext.XTemplate(
'<img src="http://127.0.0.1:3000/system/appinfos/appicons/000/000/{id}/original/{appicon_file_name}" width="50" heigh="50" style="float:left;clear:both;"></img>',
'<div style="margin-left: 60px;word-wrap: break-word;width:80%;">',
'<span style="font-size:16px;">{name}</span><br>',
// '<tpl for="categories">',
'<span style="font-size:13px;color:#7C7C7C;" id="catname">{categoryname}</span>',
'</div>'
// '</tpl>'
),
store: {
autoLoad: true,
storeId: 'allapp',
fields: ['id','name','created_at','appicon_file_name','categoryid','categoryname','url_ios','url_android','gallery','description'],
sorters: [{
property:'created_at',
direction:'DESC'
}],
proxy: {
type: 'jsonp',
url: 'http://127.0.0.1:3000/appinfos.json',
reader:{
type: 'json',
rootProperty:'appinfos'
}
}
}
}
]
},
initialize: function() {
this.callParent(arguments);
var sto = Ext.getStore('allapp');
sto.clearFilter();
sto.filter('categoryid', '2'); << **cateforyid to field and 2 is value for filter**
}
});

Answer 1

You could pass the value as a config property, that way ST will auto create its getter and setter:
showCatQuery: function(list,index,element,record){
var catid = record.get('id'); //This Value for send to view for store filter
this.getNavigation().push({
xtype: 'panel',
title: 'A',
scrollable: true,
styleHtmlContent: true,
catid: catid,
layout: {
type: 'fit'
},
items: [
{
xtype: 'showSearchCategory',
}
]
});
}
Then, in the view, the getter getCatId() should be available:
initialize: function() {
this.callParent(arguments);
var sto = Ext.getStore('allapp');
sto.clearFilter();
sto.filter('categoryid', this.getCatid() );
}
Hope it helps-