|
完整的例子（看不懂的可以拿過去運(yùn)行，看地懂的就看關(guān)鍵的就行啦?。?/p>
如下，一、當(dāng)鼠標(biāo)停留在填關(guān)鍵字的textfield的時(shí)候，按enter就會執(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，這樣在主界面就不會和原來設(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)框","是否要刪除？",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>
|
