ExtJS如何在不同的页面之间传递参数,对于很多新手来说是一个不小的难题,李坏在刚开始使用ExtJS的时候就是各种不得要领,最开始李坏在需要传参的情况下是使用全局变量来实现的,地球人都知道,全局变量使用泛滥,对于一个稍微大型一点的项目,到最后肯定是各种问题。经过各种摸索与查阅,李坏发现使用Ext.create方法可以完美解决这个问题,这里给出一个简单的案例抛砖引玉,给大家提供一种思路。
案例说明:
      1.建立一个树形菜单(treepanel)
      2.在树形菜单节点(例如:节点a)上点击右键,弹出右键菜单
      3.点击右键菜单上的按钮时,获取a节点上的节点信息
      treepanel和右键菜单menu作为两个不同的视图(页面),通过以上三个步骤即可将treepanel上的节点信息,传递到menu上,下面给出具体实现代码。
treepanel视图:

Ext.define('Demo.view.Viewport',{
	extend: 'Ext.container.Viewport',
	items:[{
		xtype: 'treepanel',
		alias: 'widget.treepanel',
		title: '页面之间传递参数',
		height: 500,
		width: 600,
		margin: '100 0 0 500',
		displayField: 'text',
		rootVisible: false,
		store: 'TreeStore'
	}]
});

menu视图:

Ext.define('Demo.view.Menu',{
	extend: 'Ext.menu.Menu',
	alias: 'widget.Menu',
	items:[{
		text: '添加',
		action: 'add'
	},{
		text: '删除',
		action: 'del'
	},{
		text: '编辑',
		action: 'edit'
	}]
})

控制器(controller):

Ext.define('Demo.controller.DemoController', {
    extend: 'Ext.app.Controller',
    views: ['Menu'],
    stores: ['TreeStore'],

    init: function(){
    	this.control({
    		'treepanel': {
    			itemcontextmenu: this.ShowContextMenu
    		},
            'Menu [action=add]': {
                click: this.ClickAddButton
            }
    	})
    },

    ShowContextMenu:function(view, rec, item, index, e){
    	e.preventDefault();
    	e.stopEvent();
      //这里是关键
    	Ext.create('widget.Menu',{
            rec: rec.data
        }).showAt(e.getXY());
    },
    ClickAddButton:function(b,e){
        var text = b.up().rec.text;
        var id   = b.up().rec.id;
        Ext.Msg.alert('提示','您点击的节点名称是'+text+',节点ID是'+id);
    }
});

效果图:
      1.树形菜单图示
ExtJS页面之间传递参数--树形结构图
      2.右键菜单图示
ExtJS页面之间传递参数--右键菜单
      3.点击添加按钮后的图示
ExtJS页面之间传递参数--传参成功
      如图所示,当我们点击添加按钮后,能够成功获取treepanel上的节点信息。
传参详解:
      使用Ext.create方法实现传参的关键点,在于当我们用create方法对menu视图进行实例化的时候,将所需要传递的参数作为一个属性(我们这里是rec),传递给menu实例,这样我们就可以在menu中获取到所需要的参数了。当然对于其他的视图之间的参数传递也可以通过这样的方法来实现。
      上面的方法只是李坏在ExtJS的应用中自己常用到的一种传参方式,如果有更好的实现方法,还望各位大神不吝赐教!

【技术交流,欢迎大家拍砖】

  1. 瑜伽减肥 说道:

    Thanks, 這篇內容很給力