Sencha touch 2 - 怎么在把list的数据动态传输到另外一个view

有时候在我们的实际例子中会遇到一个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();
}
})