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

 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);
    }
});

dd

效果图:
      1.树形菜单图示

      2.右键菜单图示

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

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

时间: 2024-07-31 11:58:06

ExtJS页面之间传递参数实例教程的相关文章

JS控制静态页面之间传递参数获取参数并应用的简单实例_javascript技巧

在项目中遇到这也一个问题: 有a.html和b.html. 1.a页面已经打开,b页面尚未打开,我希望在a页面设置好一些列参数,比如背景色,宽度等参数,传递给b页面,好让b页面在打开就能应用. 2.a页面已经打开,b页面无论是否打开.在a页面需要获取到b页面的一些元素甚至变量,以便于应用到a页面. 注意:不涉及跨域问题. 想了很久,终于想到了解决方案. 第一个问题,我们可以利用html页面锚点的特性,将参数通过url传递给b页面 这是a页面代码: <button>跳转设置</button

页面之间传递参数的几种方法

Asp.net页面之间传递参数的几种方法 第一种方法:通过URL链接地址传递     send.aspx:      protected void Button1_Click(object sender, EventArgs e)     {              Request.Redirect("Default2.aspx?username=honge");    }    receive.aspx:    string username = Request.QueryStri

ASP.NET页面之间传递参数的几种方法

  Asp.net页面之间传递参数的几种方法 第一种方法:通过URL链接地址传递 send.aspx: protected void Button1_Click(object sender, EventArgs e) { Request.Redirect("Default2.aspx?username=honge"); } receive.aspx: string username = Request.QueryString["username"]; 这样可以得到参

php页面 表单传递参数实例教程

post表单传递参数  代码如下 复制代码 <html> <head> </head> <body> <h3>search</h3> <form action="c.php" method="post"> depart name:<input type="text" size=25 name="depart" value="&q

JSP学习笔记(六)-----在多个JSP页面之间传递参数

js|笔记|页面 1. 怎么在多个JSP页面之间进行参数传递?需要使用JSP的内置作用域对象session.利用它的两个方法setAttribute(),getAttribute()2. 下面的这个实例实现了把第一个JSP页面的参数传递给第三个页面的功能3. 代码如下:1.jsp<html><form method=get action=2.jsp>what's your name<input type=text name=username><input type

&amp;#106avascript实现页面之间传递参数的方法

页面 function getparastr(strname)  {   var hrefstr,pos,parastr,para,tempstr;   hrefstr = window.location.href;   pos = hrefstr.indexOf("?")   parastr = hrefstr.substring(pos+1);   para = parastr.split("&");   tempstr="";  

JavaScript实现页面之间传递参数的方法

javascript|页面 function getparastr(strname)  {   var hrefstr,pos,parastr,para,tempstr;   hrefstr = window.location.href;   pos = hrefstr.indexOf("?")   parastr = hrefstr.substring(pos+1);   para = parastr.split("&");   tempstr="

PHP页面间传递参数实例代码_php基础

 首先给大家介绍如何通过表单传值查询数据.     任务目标:在表单中输入部门名,查询出相应部门的人员信息.     先创建search.php文件.     第一步,插入一表单,在其中包含一个输入框,一个提交按钮.search.php文件内容如下所示:  复制代码 代码如下: <html>  <head>  </head>  <body>  <h3>Search</h3>  <form action="search_

asp.net 页面之间传递参数的几种方法_实用技巧

第一种方法: 通过URL链接地址传递 send.aspx: 复制代码 代码如下: protected void Button1_Click(object sender, EventArgs e) { Request.Redirect("Default2.aspx?username=honge"); } receive.aspx: 复制代码 代码如下: string username = Request.QueryString["username"];这样可以得到参数