完整的例子（看不懂的可以拿過去運(yùn)行，看地懂的就看關(guān)鍵的就行啦?。?/p>

如下，一、當(dāng)鼠標(biāo)停留在填關(guān)鍵字的textfield的時(shí)候，按enter就會(huì)執(zhí)行dosearch（）的方法，也就是查詢，但是你鼠標(biāo)如果沒定位在textfield的話就不能夠?qū)崿F(xiàn)這個(gè)功能了，具體代碼看下面的加紅色的編碼：

二、點(diǎn)擊修改后，按下enter和點(diǎn)擊保存的功能一樣，這個(gè)是通過獲取保存按鈕的id設(shè)置onkeydown事件和保存的一樣，代碼是加藍(lán)色的編碼，

由于兩個(gè)都是設(shè)置了enter按鍵的快捷鍵，因此必須進(jìn)行判斷，在打開修改、添加的界面的時(shí)候，設(shè)置key=true，執(zhí)行添加、修改界面的enter快捷鍵的判斷就是根據(jù)key的值來判斷，關(guān)閉addupdate界面后就把key設(shè)置為false，這樣在主界面就不會(huì)和原來設(shè)置的查詢的enter沖突

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

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

var load_mask=null;
function wait(str){
 load_mask=new Ext.LoadMask("addupdateform",{msg:str});
 load_mask.show();
};
function closewait(){
 if(!Ext.isEmpty(load_mask)){
  load_mask.hide();
  load_mask=null;
 }
};

// 創(chuàng)建班次管理界面
 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();   
   }
  }

 function doMainGrid(){
    var listener={
            specialkey : function(field, e) {
                if (e.getKey() == Ext.EventObject.ENTER) {    //觸發(fā)了listener后，如果按回車，執(zhí)行相應(yīng)的方法
                 dosearch();
                }
            }
        };
  var tb=new Ext.Toolbar({
   items:[
   {xtype:'tbseparator'},'關(guān)鍵字：',{xtype:'textfield',emptyText:'班次ID或班次名稱',id:'mohu',listeners : listener},
   {xtype:'tbseparator'},{xtype:'tbbutton',text:'查找' ,handler:dosearch},
   {xtype:'tbseparator'},{xtype:'tbbutton',text:'添加' ,handler:function(){doaddUpdate('add')}},
   {xtype:'tbseparator'},{xtype:'tbbutton',text:'修改' ,handler:function(){doaddUpdate('update')}},
   {xtype:'tbseparator'},{xtype:'tbbutton',text:'刪除' ,handler:dodelete},
   {xtype:'tbseparator'}
   ]
  });
  var store=new Ext.data.JsonStore({
   url : ctx + '/ClassesInfoAction.do?method=getclassesInfo',
   autoLoad :true,
   totalProperty :'totalCount',
   root : 'root',
   fields : [
       {name:'classesId',mapping:'classesId'},
       {name:'classesName',mapping:'classesName'},
       {name:'ontime',mapping:'ontime'},
       {name:'offtime',mapping:'offtime'}
   ]
  });
     var cm=new Ext.grid.ColumnModel([
   {header:'班次ID',dataIndex:'classesId'},
   {header:'班次名稱',dataIndex:'classesName'},
   {header:'上班時(shí)間',dataIndex:'ontime',width:150},
   {header:'下班時(shí)間',dataIndex:'offtime',width:150}
  
  ]);
      mainGrid=new Ext.grid.LockingGridPanel({  
   width:786,height:300,layout:'fit', frame:true, border:true, enableHdMenu : false,autoScroll:true, loadMask : true, store:store,cm:cm,tbar:tb, 
   bbar : new Ext.PagingToolbar({    
    pageSize : 20,
    store : store,
    displayInfo: true,
    displayMsg: "顯示第 {0} 條到 {1} 條記錄，一共 {2} 條記錄",
    emptyMsg:'沒有記錄'
       }),      
     viewConfig : {forceFit : false}
     });
  store.on("load",function(store){
   if(store.getTotalCount()>0){
    mainGrid.getSelectionModel().selectFirstRow();
    selectRowEvent();
    mainGrid.on('rowclick',function(){
     selectRowEvent();
    });
   }
  }); 
 } 
 //選中行，觸發(fā)的事件
 function selectRowEvent(){
  var record=mainGrid.getSelectionModel().getSelected();
  selectedclassesid=record.get("classesId");
  selectedclassesname=record.get("classesName");
  selectedontime=record.get("ontime");
  selectedofftime=record.get("offtime");
 } 
//  添加、修改的界面
 function doaddUpdate(id){

 var key=true;//key用來判斷添加、修改的界面是否打開，打開的話才==true下面的enter鍵事件才能執(zhí)行（避免和主界面的enter鍵沖突）
  var classesid=new Ext.form.TextField({ fieldLabel : '班次ID', name : 'classesid', disabled : true });
 var classesname=new Ext.form.TextField({ fieldLabel : '班次名稱', name : 'classesname', disabled : false, allowBlank:false });
 var ontime=new Ext.form.TextField({ fieldLabel : '上班時(shí)間', name : 'ontime', disabled : false, allowBlank:false });
 var offtime=new Ext.form.TextField({ fieldLabel : '下班時(shí)間', name : 'offtime', format : 'Y-m-d',disabled : false, allowBlank:false });
 var addUpdateForm =new Ext.form.FormPanel({
  id:'addupdateform',frame : true,border : false,height:180,labelAlign : 'right',labelWidth : 90,
  items : [{
   layout : 'form',
   items : [{
    layout : 'column',layoutConfig : {columns : 1},defaults : {width : 260},
    items : [
     {layout : 'form',items :classesid},
     {layout : 'form',items :classesname},
     {layout : 'form',items :ontime},
     {layout : 'form',items :{xtype :'label',width:230,text:'例如:2011-01-01 01:01:01'}},
     {layout : 'form',items :offtime},
     {layout : 'form',items :{xtype :'label',width:230,text:'例如:2011-01-01 01:01:01'}}
     ]
    }]
   }]
    });
  
   var addUpdateWin=new Ext.Window({
   title:'添加', width:350,modal : true,height:'100%',closable:false,layout:'column', items:[addUpdateForm],
   tbar :  new Ext.Toolbar({
    items : [{xtype : 'tbfill'},
    {xtype : 'tbseparator'},{text : '保存',id:'addupdatesave',iconCls:'silk_disk',handler :doSave},
    {xtype : 'tbseparator'},{text : '取消',iconCls:'silk_cancel',handler :doCancel}
    ]
   })
  });  
  addUpdateWin.setPosition(300,130);  
  if(id=='add'){
   Ext.Ajax.request({
    url : ctx+"/ClassesInfoAction.do?method=getclassesid",
    method : 'post',
    params : {},
    success : function(response) {
     var strTemp = response.responseText;
     var max = strTemp.split("@@")[0];
           classesid.setValue(max);
           },
    failure : function(response){}
   });
  }
  if(id=='update'){ 
   addUpdateWin.setTitle("修改");
   classesid.setValue(selectedclassesid);
   classesname.setValue(selectedclassesname);
   ontime.setValue(selectedontime);
   offtime.setValue(selectedofftime);
  }   
  addUpdateWin.show();
    //設(shè)置新增和修改的界面里面按enter相當(dāng)于按"保存"按鈕
  function document.onkeydown(){
   if(event.keyCode==13&&key==true){
    document.getElementById("addupdatesave").click();
    return false;
   }
  }
  function doSave(){
   var classesid2=classesid.getValue();
   var classesname2=classesname.getValue();
   var classesontime2=ontime.getValue();
   var classesofftime2=offtime.getValue();
   var date=/^(\d{1,4})\-(\d{1,2})\-(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
   if(classesname2==null||classesname2==""){
    Ext.Msg.alert("提示信息","請完善必填信息！");
   }else if(classesontime2.match(date)==null||classesofftime2.match(date)==null){
       alert("請輸入正確日期格式！");
   }else{
    if(id=='add'){
     wait("正在保存中，請稍后...");
     Ext.Ajax.request({
      url : ctx+'/ClassesInfoAction.do?method=addclassesInfo',
      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("提示信息","添加失敗！");
      }
     });
    }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("確認(rèn)框","是否要?jiǎng)h除？",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="grid.js" defer="defer"></script>-->
<script type="text/javascript" src="classesManage.js" defer="defer"></script>
 </head>  
  <body>
     <br>
  </body>
</html>