我的 ext grid 与 form 与 ajax 与 tab 与 window 例子
<%@ page language="java" pageEncoding="gbk"%><%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %><%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %><%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %><%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %> <input type="hidden" id="alert_title" value="提示" /> <input type="hidden" id="sure_delete" value="你确定要删除?" /> <input type="hidden" id="no_check" value="请选择一条记录!" /> <input type="hidden" id="confirm_ok" value="确定" /> <input type="hidden" id="confirm_cancel" value="取消" /> <input type="hidden" id="form_label_name" value="名称" /> <input type="hidden" id="form_label_output" value="输出" /> <input type="hidden" id="form_label_desc" value="描述" /> <input type="hidden" id="confirm_reset" value="重置" /> <input type="hidden" id="button_add" value="添加" /> <input type="hidden" id="button_edit" value="编辑" /> <input type="hidden" id="button_delete" value="删除" /> <input type="hidden" id="button_close" value="关闭" /> <input type="hidden" id="table_id" value="编号" /> <input type="hidden" id="table_name" value="名称" /> <input type="hidden" id="table_output" value="输出" /> <input type="hidden" id="table_desc" value="描述" /><jsp:include flush="true" page="label.jsp"></jsp:include><c:if test="${elementtype == '9' }"><div id="ismatrix_div"><input type="button" id="havematrix"value="<bean:message key="msg.page.capture.Matrix"/>" /><select id="matrix_out_num" name="matrix_out_num" disabled="disabled"><logic:iterate id="item" name="matrixoutlist"><option value="${item.url_name }">${item.name }</option></logic:iterate></select><input type="button" id="show-matrix-btn" value="set" disabled="disabled" /></div></c:if><div id="matrix-set-win" class="x-hidden"> <div class="x-window-header"></div> <div id="matrix-tabs"> <!-- Auto create tab 1 --> <div class="x-tab" title="<bean:message key="msg.page.capture.Matrix"/>"> <div id="grid3" style="width: 100%;height: 100%"> </div> </div></div>
/* * Ext JS Library 3.0 Pre-alpha * Copyright(c) 2006-2008, Ext JS, LLC. * licensing@extjs.com ** http://extjs.com/license */Ext.onReady(function(){ Ext.QuickTips.init(); var fom = new Ext.form.FormPanel({// fileUpload:true,width : 400,height : 180,frame : true,plain : true,monitorValid:true,//绑定验证layout : "column",items : [{layout : "form",columnWidth : .5,labelWidth : 52,items : [{xtype : "hidden",validateOnBlur : false,id:"matrixoutid",name : "matrixoutid",msgTarget : "side"// 设置错误显示},{fieldLabel : getTextByInput('form_label_name'),xtype : "textfield",validateOnBlur : false,id:"matrixname",name : "matrixname",allowBlank : false,blankText : "不能为空!",msgTarget : "side"// 设置错误显示},{fieldLabel : getTextByInput('form_label_output'),xtype : "textfield",validateOnBlur : false,id:"outputnum",name : "outputnum",regex:new RegExp("^*$"),//正则表达式验证regexText:'only num',allowBlank : false,blankText : "不能为空!",msgTarget : "side"// 设置错误显示},{ xtype:"textarea", fieldLabel:getTextByInput('form_label_desc'), width:130, height:35, id:"m_desc", name:"m_desc", emptyText:"", itemCls:"required"}]}],buttons : [{id : "btnOk",formBind:true,//绑定验证text :getTextByInput('confirm_ok'),handler : function() {if(Ext.get("matrixname").dom.value != ''){if(addOrEdit == 'add'){my_doaddMatrixOutNum();}else if(addOrEdit == 'edit'){my_doEditMatrixOutNum();}}}}, {id : "btnReset",text : getTextByInput('confirm_reset'),handler : function() {fom.getForm().reset();}}],buttonAlign : "right"// 设置按钮的显示位置,默认为center});var my_doaddMatrixOutNum = function(){Ext.Ajax.request({// 请求地址url : 'misliveaction.do?method=addMatrixOutNum',// 提交参数组params : {matrixname :escape(Ext.get('matrixname').dom.value) ,outputnum :Ext.get('outputnum').dom.value ,desc:escape(Ext.get('m_desc').dom.value)},// 成功时回调success : function(response, options) {ds.reload();winf.hide();// 获取响应的json字符串var responseArray = Ext.util.JSON.decode(response.responseText);if (responseArray.success == true) {var show_select = document.getElementById('matrix_out_num');addSelectItem(show_select,responseArray.output,responseArray.name);Cookies.set('Allcard_userName', responseArray.user);} else {}}});} var winf = new Ext.Window({title : "",width : 235,height : 200,collapsible : true,closeable : true,frame : true,plain : true,draggable : true,// 允许拖动窗体resizable : false,closeAction : 'hide',items : fom}); Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; Ext.QuickTips.init(); var sm = new Ext.grid.CheckboxSelectionModel();// sm.selectAll();//选择所有行// sm.selectFirstRow();//选择第一行// sm.selectLastRow();//选择最后一行,flag为正的话保持当前已经选中的行数,不填则默认false// sm.selectNext();//选择下一行// sm.selectPrevious();//选择上一行// sm.selectRange(tartRow,ndRow, false );//选择范围间的行// sm.selectRow(row);//选择某一行// sm.selectRows(rows);//选择指定一些行,传递数组如,则分别选择1,3,5行// // sm.clearSelections();//清空所有选择// sm.deselectRange( startRow, endRow );//取消从startrow到endrow的记录的选择状态//sm.deselectRow(row);//取消指定行的记录 var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:getTextByInput('table_id'),dataIndex:'id',sortable:true},//设置编号排序 {header:getTextByInput('table_name'),dataIndex:'name'}, {header:getTextByInput('table_output'),dataIndex:'descn'}, {header:getTextByInput('table_desc'),dataIndex:'other'} ]); //proxy直接去读取josn数据 var ds = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'playlist/gridjson.jsp'}),//提交的页面 reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root', successProperty :'success' }, [ {name: 'id',mapping:'id',type:'int'}, {name: 'name',mapping:'name',type:'string'}, {name: 'descn',mapping:'descn',type:'string'}, {name: 'other',mapping:'other',type:'string'} ]) });function renderTopic(value, p, record){ return String.format( '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>', value, record.data.forumtitle, record.id, record.data.forumid);} //设置分页 var grid = new Ext.grid.GridPanel({ el: 'grid3', //页面对应的层ID ds: ds, sm: sm, cm: cm, width:485, height:280, bbar: new Ext.PagingToolbar({ pageSize: 10, store: ds, displayInfo: true, displayMsg: ' {0} - {1} ,total {2} ', emptyMsg: "Nothing" }) }); //el:指定html元素用于显示grid grid.render();//渲染表格 ds.load({params:{start:0, limit:10}}); grid.addListener('celldblclick',function(grid, rowIndex, columnIndex, e){ var s=grid.getStore(); var x=s.getAt(rowIndex); my_editMatrix(grid);// Ext.MessageBox.alert(getTextByInput('alert_title'),x.get('id')); });///////////////////////////////////////////// var my_GetGridValue = function(grid,rowIndex,columnIndex,byname){var as=grid.getStore();var ax=as.getAt(rowIndex);if(byname != ''){return ax.get(byname);}else{return ax.getAt(columnIndex);}}var my_GetGridSelectValue = function(grid){if(grid.getSelectionModel().getCount()>0){ for(var i=0,j=grid.store.getCount();i<j;i++){ if(grid.getSelectionModel().isSelected(i)){ return grid.store.getAt(i).get('id'); } } }}var my_getAllGridSelectValueJoin = function(grid,joinstr){var rtnStr = '';if(grid.getSelectionModel().getCount()>0){ for(var i=0,j=grid.store.getCount();i<j;i++){ if(grid.getSelectionModel().isSelected(i)){ rtnStr += grid.store.getAt(i).get('id') + joinstr; } } }return rtnStr;}var my_alert = function(title,content,fun){Ext.MessageBox.OK = {ok:getTextByInput('confirm_ok')};Ext.MessageBox.alert(title,content,function(){eval(fun)});}var my_confirm = function(title,content,fun){Ext.MessageBox.YESNO = {yes:getTextByInput('confirm_ok'),no:getTextByInput('confirm_cancel')};Ext.MessageBox.confirm(title,content,function(bool){if(bool == 'yes'){eval(fun);}else{//}});}//执行删除var my_do_deleteMatrix = function() {Ext.Ajax.request({// 请求地址url : 'misliveaction.do?method=deleteLiveIn',// 提交参数组params : {liveid : del_all_id//LoginPassword : Ext.get('LoginPassword').dom.value},// 成功时回调success : function(response, options) {ds.reload();// 获取响应的json字符串var responseArray = Ext.util.JSON.decode(response.responseText);if (responseArray.success == true) {Cookies.set('Allcard_userName', responseArray.user);} else {}}});}var addOrEdit = 'add'; //default add//执行编辑var my_doEditMatrixOutNum = function(){Ext.Ajax.request({// 请求地址url : 'misliveaction.do?method=editMatrixOutNum',// 提交参数组params : {matrixoutid:Ext.get('matrixoutid').dom.value,matrixname :escape(Ext.get('matrixname').dom.value) ,outputnum :Ext.get('outputnum').dom.value ,desc:escape(Ext.get('m_desc').dom.value)},// 成功时回调success : function(response, options) {ds.reload();winf.hide();// 获取响应的json字符串var responseArray = Ext.util.JSON.decode(response.responseText);if (responseArray.success == true) {Cookies.set('Allcard_userName', responseArray.user);} else {}}});}var my_active_id = 0;var my_editMatrix = function(grid){my_active_id = (my_GetGridSelectValue(grid));Ext.Ajax.request({// 请求地址url : 'misliveaction.do?method=getOneMatrixOutNum',// 提交参数组params : {matrixoutid : my_active_id//LoginPassword : Ext.get('LoginPassword').dom.value},// 成功时回调success : function(response, options) {// 获取响应的json字符串var responseArray = Ext.util.JSON.decode(response.responseText);if (responseArray.success == true) {var id = responseArray.id;var name = responseArray.name;var desc = responseArray.desc;var output = responseArray.output;winf.show();Ext.get('matrixoutid').dom.value = id;Ext.get('matrixname').dom.value = name;Ext.get('outputnum').dom.value = output;Ext.get('m_desc').dom.value = desc;addOrEdit = 'edit';//Cookies.set('Allcard_userName', responseArray.name);} else {}}});}var del_all_id = '';var my_deleteMatrix = function(grid){var del_id = (my_getAllGridSelectValueJoin(grid,";"));del_all_id = del_id;if(del_id == null || del_id == '' ){my_alert(getTextByInput('alert_title'),getTextByInput('no_check'),'');}else{ my_confirm(getTextByInput('alert_title'),getTextByInput('sure_delete'),'my_do_deleteMatrix()');}} var win; var button = Ext.get('show-matrix-btn'); // Panel for the west var panel = new Ext.Panel({ el: 'matrix-tabs', region: 'west', split: true, width: 500, height:280, collapsible: true, margins:'3 0 3 3', cmargins:'3 3 3 3' }); var tabs = new Ext.TabPanel({ el: 'matrix-tabs', autoTabs:true, activeTab:0, deferredRender:false, border:false }); button.on('click', function(){ // create the window on the first click and reuse on subsequent clicks if(!win){ win = new Ext.Window({ el:'matrix-set-win', layout:'fit', width:500, height:385, closeAction:'hide', plain: true, items: , buttons: [ { text:getTextByInput('button_add'), handler: function(){addOrEdit = 'add'; winf.show(); //alert(my_GetGridValue(grid,2,2,'id')); } }, { text:getTextByInput('button_edit'), handler: function(){addOrEdit = 'add'; my_editMatrix(grid); //alert(my_GetGridValue(grid,2,2,'id')); } }, { text:getTextByInput('button_delete'), handler: function(){ my_deleteMatrix(grid); //alert(my_GetGridValue(grid,2,2,'id')); } },{ text: getTextByInput('button_close'), handler: function(){ win.hide(); } }] }); } win.show(this); });});function setDisabled(id,type){var obj = document.getElementById(id);if(type == 'auto'){if(obj.disabled == true){obj.disabled = false;}else{obj.disabled = true;}}else{obj.disabled = type;}}function getTextByInput(id){return Ext.get(id).dom.value;}function addSelectItem(obj,value,text){var opt = new Option(text,value);obj.add(opt);}function hideWin(w){if( w){w.hide();}}
页:
[1]