Sencha Touch-如何在控制器中传递值以存储在视图中？ [英] Sencha Touch - How to pass value in controller to store in view?
本文介绍了Sencha Touch-如何在控制器中传递值以存储在视图中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用应用商店筛选器搜索类别应用程序。搜索应用程序类别的值来自控制器。但我不知道将值从控制器传递到视图以便在视图中使用商店筛选器。查看我的代码：
这是我的控制器：
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',
}
]
});
}
});
这是我的观点：
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**
}
});
推荐答案
您可以将该值作为配置属性传递，这样ST将自动创建其getter和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',
}
]
});
}
然后，在视图中，getter getCatId()应该是可用的：
initialize: function() {
this.callParent(arguments);
var sto = Ext.getStore('allapp');
sto.clearFilter();
sto.filter('categoryid', this.getCatid() );
}
希望它能有所帮助-
这篇关于Sencha Touch-如何在控制器中传递值以存储在视图中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
