关于使用ExtJs开发MIS系统,使用Action抽象客户端操作
来源:优易学  2011-12-27 11:55:01   【优易学:中国教育考试门户网】   资料下载   IT书店
  在客户端系统中,或者说在任何系统中,同样的操作是可以通过不同的方式激发的,比如说我们使用的浏览器,刷新当前页面可以点击刷新按钮,可以在右键菜单中选择刷新,还可以按F5快捷键。但不管操作方式如何变化,操作本身是不变的,所以我们可以把这些操作抽象出来。
  来看以下代码:
  1: Srims.Action = new function(){
  2: };
  3:
  4: Srims.Action.doAction = function(e, t){
  5:   e.stopEvent();
  6:   var actionName = t.id.replace(’MenuBarItem-a-’, ’’);
  7:
  8:   if (!Srims.Action.actions[actionName]) {
  9:   alert(’对不起,该功能尚未实现。’);
  10:   return;
  11:   }
  12:
  13:   Srims.Action.actions[actionName]();
  14: };
  15:
  16: Srims.Action.actions = {
  17:   ’project-vertical-list’: function(){
  18:   Srims.Action._callProjectAction(’Srims.projects.listVerticalProject();’);
  19:   },
  20:   ’project-horizontal-list’: function(){
  21:   Srims.Action._callProjectAction(’Srims.projects.listHorizontalProject();’);
  22:   }
  23: };
  24:
  25: Srims.Action._callProjectAction = function(fn){
  26:   if (Srims.projects) {
  27:   eval(fn);
  28:   }
  29:   else {
  30:   Srims.loadProjectModule(fn);
  31:   }
  32: }
  以上代码在使用ExtJs开发MIS系统(2):Js的动态加载出现过。该段代码通过Srims.Action.actions定义系统中的所有操作,通过Srims.Action.doAction调用操作。Srims.Action.doAction接受两个参数,第一参数是点击事件的参数,第二个参数是激发该点击操作的元素。如果激发该操作的元素的ID和对应操作有一定的关系,那么就可以直接映射到某一个操作。例如我们将Srims.Action.doAction绑定到以下html上
  <ul class="">
  <li id="MenuBarItem-li-project-vertical-list">
  <a id="MenuBarItem-a-project-vertical-list" class="" href="http://j5c.ddvip.com/index.php#">纵向项目列表</a>
  </li>
  <li id="MenuBarItem-li-project-horizontal-list">
  <a id="MenuBarItem-a-project-horizontal-list" class="" href="http://j5c.ddvip.com/index.php#">横向项目列表</a>
  </li>
  </ul>
  其中a标签的ID和操作名称的对应关系是在操作名称前加前缀“MenuBarItem-a-”,所以我们在Srims.Action.doAction中使用var actionName = t.id.replace(’MenuBarItem-a-’, ’’)替换掉前缀后,就可以得到对应的操作名称了了,然后就可以调用Srims.Action.actions[actionName]()执行该操作。当然执行操作以前,还可以使用
  if (!Srims.Action.actions[actionName]) {
  alert(’对不起,该功能尚未实现。’);
  return;
  }确定该操作是否已经完成。
  绑定操作使用ExtJs中的事件处理方法,示例代码如下:
  var ab = Srims.MenuBar.getMenuBar().body;
  ab.on(’mousedown’, Srims.Action.doAction, null, {delegate:’a’});
  ab.on(’click’, Ext.emptyFn, null, {delegate:’a’, preventDefault:true});

责任编辑:小草

文章搜索:
 相关文章
热点资讯
资讯快报
热门课程培训