ExtJS页面之间传递参数实例教程

时间：2013-09-07 编辑：简简单单来源：一聚教程网

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

代码如下	复制代码
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.树形菜单图示

      2.右键菜单图示

      3.点击添加按钮后的图示

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

上一个： ExtJS 如何验证上传文件类型
下一个： ExtJS4 MVC开发教程：配置开发环境

推荐专题

最新下载

热门教程

ExtJS页面之间传递参数实例教程

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程