有时候在我们的实际例子中会遇到一个list的数据会用于另外一个view所需要的数据。下面例子实现了MVC模式下怎么实现：
1. 下面截图为我们定义的一个list：
Ext.define("DingCan.view.Category",{
extend:'Ext.List',
xtype:'categorylist',
config:{
fullscreen:true,
store:'Category',
id:'categorylist',
onItemDisclosure:true,
itemTpl:'{name}'
},
initialize:function(){
this.callParent(arguments);
}
})
list的store定义，通过ajax的proxy拿到json数据格式的数据。
Ext.define('DingCan.store.Category',{
extend: 'Ext.data.Store',
config: {
fields: ['name', 'path', 'last_modified'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'get-album.php',
reader: {
rootProperty:'albums',
type:'json'
}
}
}
})
list 显示如下，这时候我们需呀讲buidling这个字段作为下一个listdetail的参数条件访问。
这时候我们需要在controller里面定义一个disclose的event， 在函数showcategorylist中实现了这个方法，请看红色部分的解释
Ext.define('DingCan.controller.Main',{
extend:'Ext.app.Controller',
config:{
refs:{
//带#表示id的值
categorylist:'#categorylist',
//不带的为xtype的值
list:'mainlist',
foodslist:'foodslist'
},
control:{
categorylist:{
disclose:'showcategorylist',
}
},
},
showcategorylist:function(list, record){
//console.log(this.getList());
//getList是在refs声明的一个list页面
//此处是输出当前record的path路径，这个值正是listdetail需要的参数
console.log(record.data.path);
///newlist.path = record.data.name;
//console.log(Ext.getStore('foodliststore').getProxy().getUrl());
//此处是create一个listdetail的view，也就是需要跳转到的新页面
this.foodslist = Ext.create('DingCan.view.FoodsList');
//拼接成ajax的proxy需要的URL的值
var newURL = 'get-file.php?path='+record.data.path;
//将新的URL赋值给listdetail里面的store里面的proxy的url
this.foodslist.getStore().getProxy().setUrl(newURL);
//console.log('after '+Ext.getStore('foodliststore').getProxy().getUrl());
//Ext.getStore('foodliststore').load();
//console.log(this.foodslist.getStore());
//然后将新的store重新load一次
this.foodslist.getStore().load();
//newstore.proxy.url = 'get-file.php?path=' + record.data.path;
//用当前的list的push实现了新的页面的跳转，
//该地方有两种方法可以实现跳转
// Ext.Viewport.setActiveItem(newlist,{ type: 'slide', direction: 'left' });
// this.getList().push({xtype:'foodslist'});
//getList()是在ref里面的mainlist的view，也就是当前页面
this.getList().push(this.foodslist)
//Ext.Viewport.setActiveItem(newlist,{ type: 'slide', direction: 'left' });
//alert('click me!');
},
launch:function(){
//console.log(Ext.getCmp('homepage'));
//Ext.getCmp('homepage').setActiveItem(2);
}
})
listdetail的store定义：
Ext.define('DingCan.store.FoodsList',{
extend: 'Ext.data.Store',
config: {
model:'DingCan.model.FoodsList',
//手工加载时候。不需要设置为true
//autoLoad: true,
//如果定义了storeid后。在view里面引用时候必须为foodliststore，不然会有warning报错找不到该store
storeId:'foodliststore',
//id:'foodsstore',
proxy: {
type: 'ajax',
//url是动态设置的。所以也不要此项
//url: 'get-file.php?path=',
reader: {
rootProperty:'files',
type:'json'
}
}
}
})
listdetail的view，注意view里面的store的值。
Ext.define("DingCan.view.FoodsList",{
extend:'Ext.DataView',
xtype:'foodslist',
requires:['DingCan.store.FoodsList'],
config:{
//path:'',
title: 'Define Category',
//此处就是我们需要引用的storeid的值。而不是class的值FoodsList
store:'foodliststore',
//itemSelector: 'div.node',
itemTpl:'<div style="padding:10px 5px 5px 5px;"><div class="node" style="background:url({thumb});"></div></div>'
},
initialize:function(){
this.callParent();
}
})