在Ext的界面中js回车响应按钮事件

空城66 2014-12-08

展开全文

完整的例子（看不懂的可以拿过去运行，看地懂的就看关键的就行啦！）：

如下，一、当鼠标停留在填关键字的textfield的时候，按enter就会执行dosearch（）的方法，也就是查询，但是你鼠标如果没定位在textfield的话就不能够实现这个功能了，具体代码看下面的加红色的编码：

二、点击修改后，按下enter和点击保存的功能一样，这个是通过获取保存按钮的id设置onkeydown事件和保存的一样，代码是加蓝色的编码，

由于两个都是设置了enter按键的快捷键，因此必须进行判断，在打开修改、添加的界面的时候，设置key=true，执行添加、修改界面的enter快捷键的判断就是根据key的值来判断，关闭addupdate界面后就把key设置为false，这样在主界面就不会和原来设置的查询的enter冲突

Ext.ns("cms.classesManage");
cms.classesManage.main= function(){

var mainGrid;
var detialGrid;
var mohu;
var selectedclassesid;
var selectedclassesname;
var selectedontime;
var selectedofftime;

// 创建班次管理界面
function createwin(){
   var mainWin=new Ext.Window({
   title:'班次管理', width:800, height:'100%',closable : false,draggable : false,resizable : false, layout:'column', items:[mainGrid]
   });
   mainWin.setPosition(40,50);
   mainWin.show();
}
return {
  init :function(){
   doMainGrid();
   createwin();
   }
  }

       key=false;
       mainGrid.getStore().load();
      },
      failure : function(response){
       closewait();
       Ext.Msg.alert("提示信息","添加失败！");
      }
     });
    }else if(id=='update'){
     wait("正在保存中，请稍后...");
     Ext.Ajax.request({
      url : ctx+'/ClassesInfoAction.do?method=updateclassesInfo',
      mehtod : 'post',
      waitMsg: '正在保存，请稍候...',
      params : {
      classesid:classesid2,
      classesname:classesname2,
      classesontime:classesontime2,
      classesofftime:classesofftime2
       },
      success : function(response){
       closewait();
       Ext.Msg.alert("提示信息","修改成功！");
       addUpdateWin.close();

       key=false;
       mainGrid.getStore().load();
      },
      failure : function(response){
       closewait();
       Ext.Msg.alert("提示信息","修改失败！");
      }
     });
    }
   }
  }
  function doCancel(){
   addUpdateWin.hide();

   key=false;
  }
}
// 删除
  function dodelete(){
  Ext.MessageBox.confirm("确认框","是否要删除？",function(btn){
   if(btn=='yes'){
    Ext.Ajax.request({
     url : ctx+'/ClassesInfoAction.do?method=deleteclassesInfo',
     mehtod : 'post',
     waitMsg: '正在保存，请稍候...',
     params : {
     classesid:selectedclassesid
     },
     success : function(response){
      Ext.Msg.alert("提示信息","删除成功！");
      mainGrid.getStore().load();
     },
     failure : function(response){Ext.Msg.alert("提示信息","删除失败！");}
    });
   }else{}
  });
}
// 查询
function dosearch(){
  mohu=Ext.getCmp("mohu").getValue();
  mainGrid.getStore().on("beforeload",function(store,options){
   store.baseParams={
    mohu:mohu
   }
  },this);
  mainGrid.getStore().load({
  params : {
   start : 0,
   limit : 20
  }
});
}

}();
Ext.onReady(cms.classesManage.main.init,cms.classesManage.main);

上面是classesManage.js的代码，classesManage.jsp的代码是：

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8" %>
<%@ include file="/commons/taglibs.jsp"%>
<c:set var="appTitle" value="班次管理"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>${appTitle}</title>

<%@ include file="/commons/meta.jsp" %>
<%@ include file="/commons/ext.jsp" %>
<script>var flags = "invoicing_tb";</script>
<link rel="stylesheet" href="${ctx}/style/style.css" />
  
<script type="text/javascript" src="classesManage.js" defer="defer"></script>
</head>
<body>
     <br>
</body>
</html>