項目Extjs前台開發模版

標籤：源碼   extjs   

今天趁著給大一大二的學生上課，整理下項目的前台源碼，便於以後使用：

//<!-- js頁面模板 -->//此模板實現是所有常見的功能，如下拉式清單，時間，網頁編輯器，都對應一個案例，大家可以模仿開發其他功能。//下面每個要注意的點我都標註了，仔細粘貼，避免錯誤,建議大家ctrl+f對同名替換，保證屬性一致哈。var ss = null;Ext.onReady(function() {Ext.BLANK_IMAGE_URL = 'ExtJs/resources/images/default/s.gif';Ext.QuickTips.init();var sm = new Ext.grid.CheckboxSelectionModel(); var smUseableRoleInfo = new Ext.grid.CheckboxSelectionModel(); var smChooseRoleInfo = new Ext.grid.CheckboxSelectionModel();keyConvert = function() {if (event.keyCode == 13 && event.srcElement.type != "button") {event.keyCode = 9;}};//！！定義整個jsp頁面顯示順序，顯示查詢表單，在是Grid，注意看items，這些屬性如selectStockInForm要保證和下面的一一對應，可用ctrl+f查看都有哪些new Ext.Viewport({layout : 'border',items : [selectStockInForm,stockInGrid]});//!!頁面定義完成//!!剛前Grid列表store載入資料，就是我們頁面Grid顯示的列表，//以stockInStore為例，大家替換改成自己定義的store,url、root、totalProperty、fields改成自己的參數，var stockInStore = new Ext.data.JsonStore({proxy : new Ext.data.HttpProxy({//改成自己的action，_首碼是struts配置名，尾碼是action層對應方法名url : 'StockIn_queryStockIn.action'}),//Grid列表返回對象集合名，set、get方法對應集合名root : 'items_StockIn',//Grid列表返回集合條數，set、get方法對應其名totalProperty : 'totalProperty',//Grid列表對應對象的屬性，注意是Grid對象屬性值，參考對象實體表fields : ['pkInId', 'fkGoodId', 'inNum','inDate', 'fkInOperatorId', 'inDesc','state']// autoLoad : false});//上面URL提交傳遞的參數，start、limit分頁屬性stockInStore.load({params : {start : 0,limit : 20}});//!!Grid列表store載入資料完畢//!!使用者下拉式清單store載入資料開始，和上面一樣var userStore = new Ext.data.JsonStore( {url : "Users_queryUsers.action",root : "items_Users",totalProperty : "totalProperty",fields : [ {name : "id",mapping : "id"}, {name : "name",mapping : "truename"} ]})userStore.load( {params : {start : 0,limit : 100}});//!!使用者下拉式清單store載入資料結束//！！頁面中查詢的Form面板開始，注意renderTo、title屬性修改selectStockInForm = new Ext.form.FormPanel({title : '查詢條件',renderTo : 'stockIn',//要和jsp頁面div的id一致labelAlign : 'right',buttonAlign : 'center',layout : 'column',region : 'north',frame : true,collapsible :true,defaultType : 'textfield',padding : 10,hight : 100,items : [{layout : 'column',xtype : 'fieldset',title : '入庫查詢',//修改成自己的titlelabelAlign : 'right',items : [{//上面這個{對應的面板列數，就是我們看到的三個列columnWidth : .3,layout : 'form',labelWidth : 80,items : [{//上面這個{對應的面板行數，對行列修改時，要注意比對{}刪除//還有就是{}對應的“,”，看清楚是字母的逗號fieldLabel : '操作員 ',//type類型為下拉式清單xtype : 'combo',anchor : '80%',//對應我們要載入的store，使用者store看上面store : userStore,//valueField和上面maping對應name一致valueField : "name",displayField : "name",mode : 'local',forceSelection : true,emptyText : '--請選擇--',//傳到背景屬性，注意改成自己對象的名和參數hiddenName : 'stockIn.fkInOperatorId',editable : false,triggerAction : 'all',//標記此id是唯一的(也可以不做，這裡便於區分)，我們後面用這個id擷取hiddenName值id : 'stockIn.fkInOperatorId.show',allowBlank : false//看清楚，每列（{}末尾）沒有“,”,千萬小心}]},{columnWidth : .3,layout : 'form',labelWidth : 80,items : [{//type類型是文本xtype : 'textfield',//傳到背景屬性，注意改成自己對象的名和參數name : 'stockIn.fkGoodId',id : 'stockIn.fkGoodId.show',fieldLabel : '商品名稱',allowBlank : true,anchor : '80%'}]},{columnWidth : .3,layout : 'form',labelWidth : 80,items : [{//type類型是時間類型xtype : 'datefield',fieldLabel : '最後修改日期',id : 'stockIn.inDate.show',name : 'stockIn.inDate',//頁面顯示時間類型格式format:'Y-m-d',editable : false,allowBlank : false,anchor : '80%'}]}]}],buttons : [{text : '查詢',iconCls : 'icon-accept',cls : 'right-part',handler : function() {//getCmp內對應的值是上面屬性的ID，我用+.show做的區分，大家注意var createDate = Ext.getCmp('stockIn.inDate.show').getValue();if(createDate!=''){//做去“-”處理createDate=createDate.format('Ymd');}stockInStore.proxy = new Ext.data.HttpProxy({//處理的時間參數要直接由？+屬性參數傳到後台，參數名對應對象屬性url : 'StockIn_selectStockIn.action'+'?stockIn.inDate='+createDate});stockInStore.load( {params : {start : 0,limit : 20,//看下面代碼區別加.show和不加的區別'stockIn.fkGoodId' : Ext.getCmp('stockIn.fkGoodId.show').getValue(),//傳遞參數在start、limit基礎上添加除時間外的屬性，注意最後一行沒有“,”'stockIn.fkInOperatorId' : Ext.getCmp('stockIn.fkInOperatorId.show').getValue()}});}}, '-', {text : '重設',iconCls : 'icon-reset',handler : function() {selectStockInForm.form.reset();},cls : 'right-part'// ,}]});//！！頁面中查詢的Form面板開始//！！建立用於展示的grid開始，stockInGrid替換成自己的grid名，注意renderTo的修改var stockInGrid = new Ext.grid.GridPanel({renderTo : 'stockIn',store : stockInStore,sm : sm,id : 'stockInGrid',// height : defaultHeight,region : 'center',keys : [{key : [13],fn : keyConvert}],//類似excel的頭行說明，所有參數和store載入屬性一致，屬性和對象實體表名稱要一致columns : [sm, {//隱藏Id屬性，header : 'pkInId',dataIndex : 'pkInId',hidden : true,sortable : false},{header : '商品名稱',sortable : true,width : 150,dataIndex : 'fkGoodId',//類似超連結，使用JavaScript：方法名，下面有對應方法實現renderer : function(value) {return "<a href=javascript:update() title = '查看'>" + value + "</a>"}   //注意這裡也是末尾沒有“,”}, {header : '商品數量',sortable : true,width : 100,dataIndex : 'inNum'}, {header : '入庫時間',sortable : true,width : 100,dataIndex : 'inDate'}, {header : '操作者',sortable : true,width : 100,dataIndex : 'fkInOperatorId'}, {header : '描述',sortable : true,width : 100,dataIndex : 'inDesc'}],//列表上方的功能選項tbar : [{text : '入庫登記',tooltip : '入庫登記',iconCls : "icon-add",handler : function() {//這些之前視頻講過，不做介紹addForm.form.reset();winTitle = "入庫登記";addWin.setTitle(winTitle);addWin.show();}}, '-', {text : '修改資訊',tooltip : '修改被選擇的登記資訊',iconCls : "icon-edit",handler : function() {//和上面超連結一致，指向方法名update();}}, '-', {text : '刪除資訊',tooltip : '刪除被選擇的登記記錄',iconCls : "icon-del",handler : function() {_record = stockInGrid.getSelectionModel().getSelections();flag = stockInGrid.getSelectionModel().getSelected();if (_record.length == 0) {Ext.Msg.alert('警告', '請選擇你要刪除的記錄！');} else {Ext.MessageBox.confirm('確認刪除', '你確認要刪除該記錄嗎？',function(btn) {if (btn == "yes") {var jsonData = "";// 向Action中傳輸需要刪除的記錄的pkInId的拼接字串，“,”分割for (var i = 0; i < _record.length; i++) {ss = _record[i].get("pkInId");if (i == 0) {jsonData = jsonData + ss;} else {jsonData = jsonData + ","+ ss;}}Ext.Ajax.request({//對應提交*_下的刪除方法url : "StockIn_delStockIn.action",params : {//要傳遞的拼接參數，String型delData : jsonData},success : function(from, action) {stockInStore.reload();Ext.Msg.alert('成功','刪除成功！');},failure : function(form, action) {Ext.Msg.alert('失敗','刪除失敗！');}});}});}}}],bbar : [{//分頁實現，載入前面的store，使用位置萬用字元xtype : 'paging',pageSize : 20,//對應Grid列表的那個Storestore : stockInStore,displayInfo : true,displayMsg : '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',emptyMsg : "沒有記錄"}]});//！！建立用於展示的grid結束//！！將id轉換為name，我們直接在資料庫儲存名稱，所以方法注釋掉//function?fishname(val){??//return?fishStore.queryBy(function(rec){???//return?rec.data.id?==?val;?//?}).itemAt(0).data.name;?//}//!!添加視窗，內含添加的form表單addForm，名字可不改addWin = new Ext.Window({layout : 'form',width : 650,height : 450,modal : true,resizable : false,plain : true,closable : false,items : addForm});//!!通過視窗，開啟表單，無資料提前載入，這是和修改的區別var addForm = new Ext.FormPanel({labelWidth : 75,labelAlign : 'right',frame : true,bodyStyle : 'padding:5px 5px 0',width : 640,height : 420,waitMsgTarget : true,items : [{//下面屬性和之前的查詢Form一樣，注意屬性name的修改，他是傳往背景屬性名稱layout : 'column',xtype : 'fieldset',title : '入庫資訊',items : [{columnWidth : .5,layout : 'form',labelWidth : 80,items : [{xtype : 'textfield',name : 'stockIn.fkGoodId',//這裡傳參用的ajax，所以id並沒有用處，.add只是區別作用id : 'stockIn.fkGoodId.add',fieldLabel : '商品名稱',allowBlank : false,anchor : '100%'},{xtype : 'textfield',name : 'stockIn.inNum',id : 'stockIn.inNum.add',fieldLabel : '商品數量',allowBlank : false,anchor : '100%'}]}]},{layout : 'column',   xtype : 'fieldset',title : '備忘',items : [{columnWidth : .9,layout : 'form',labelWidth : 100,items : [{//type類型為網頁編輯器類型xtype : 'htmleditor',name : 'stockIn.inDesc',id : 'stockIn.inDesc.add',fieldLabel : '描述',allowBlank : false,anchor : '100%'}]}]}],buttons : [{text : '儲存',iconCls : 'icon-save',handler : function() {if (addForm.form.isValid()) {addForm.form.submit( {url : 'StockIn_addStockIn.action' ,success : function(from, action,success) {stockInStore.reload();Ext.Ghost.msg('儲存成功','添加新的入庫記錄成功！');addWin.hide();},failure : function(form, action,success) {Ext.Ghost.msg('儲存失敗','資訊填寫有誤或伺服器未響應，請重新嘗試');},waitMsg : '正在儲存資料，稍後...'});} else {Ext.Ghost.msg('資訊', '請填寫完成再提交!');}}}, '-', {text : '取消',iconCls : 'icon-reset',handler : function() {addForm.form.reset();addWin.hide();},cls : 'right-part'// ,}]});//！！完成添加視窗功能//！！JavaScript超連結方法update = function() {var _record = stockInGrid.getSelectionModel().getSelected();var flag = stockInGrid.getSelectionModel().getSelections();if (flag.length == 1) {//得到grid列表某一行的屬性值，_record.get()表示得到對應值，並設定為update*做區別，updateForm要使用，注意和grid屬性一致Ext.getCmp("updatepkInId").setValue(_record.get("pkInId"));Ext.getCmp("updatefkGoodId").setValue(_record.get("fkGoodId"));Ext.getCmp("updateinNum").setValue(_record.get("inNum"));Ext.getCmp("updateinDesc").setValue(_record.get("inDesc"));winTitle = "修改入庫資訊";updateWin.setTitle(winTitle);updateWin.show();updateForm.getForm().load();} elseExt.Msg.alert('錯誤', '請選擇一道要編輯的入庫！');};//！！完成JavaScript超連結方法//!!修改視窗，內含修改的form表單updateForm，名字可不改，由上面的JavaScript超連結方法得到表單初始值updateWin = new Ext.Window({layout : 'form',width : 650,height : 450,modal : true,resizable : false,plain : true,closable : false,items : updateForm});//!!通過視窗，開啟表單，資料需要提前載入，由視窗完成var updateForm = new Ext.FormPanel({labelWidth : 75,labelAlign : 'right',frame : true,bodyStyle : 'padding:5px 5px 0',width : 640,height : 420,waitMsgTarget : true,items : [{//下面屬性和查詢一樣，有一點就是屬性id要和JavaScript超連結方法定義的參數名一致，就是update*layout : 'column',   xtype : 'fieldset',title : '修改資訊',items : [{columnWidth : .5,layout : 'form',labelWidth : 80,items : [{//建議大家和我一樣，把原來的粘過來，比對著用，name屬性為傳往背景名稱，要注意區別//Ext.getCmp("updatepkInId").setValue(_record.get("pkInId"));//Ext.getCmp("updatefkGoodId").setValue(_record.get("fkGoodId"));//Ext.getCmp("updateinNum").setValue(_record.get("inNum"));//Ext.getCmp("updateinDesc").setValue(_record.get("inDesc"));name : 'stockIn.pkInId',id : 'updatepkInId',xtype : 'hidden'},{xtype : 'textfield',name : 'stockIn.fkGoodId',id : 'updatefkGoodId',fieldLabel : '商品名稱',allowBlank : false,anchor : '100%'},{xtype : 'textfield',name : 'stockIn.inNum',id : 'updateinNum',fieldLabel : '商品數量',allowBlank : false,anchor : '100%'}]}]},{layout : 'column',   xtype : 'fieldset',title : '描述',items : [{columnWidth : .9,layout : 'form',labelWidth : 100,items : [{xtype : 'htmleditor',name : 'stockIn.inDesc',id : 'updateinDesc',fieldLabel : '描述',allowBlank : false,anchor : '100%'}]}]}],buttons : [{text : '儲存',iconCls : 'icon-save',handler : function() {if (updateForm.form.isValid()) {  updateForm.form.submit( {url : 'StockIn_updateStockIn.action' ,success : function(from, action,success) {stockInStore.reload();Ext.Ghost.msg('儲存成功','修改資訊成功！');updateWin.hide();},failure : function(form, action,success) {Ext.Ghost.msg('儲存失敗','資訊填寫有誤或伺服器未響應，請重新嘗試');},waitMsg : '正在儲存資料，稍後...'});} else {Ext.Ghost.msg('資訊', '請填寫完成再提交!');}}}, '-', {text : '取消',iconCls : 'icon-reset',handler : function() {updateForm.form.reset();updateWin.hide();},cls : 'right-part'// ,}]});//!!完成修改表單}) 

項目Extjs前台開發模版