EXT 篇,ext容易布局,ext form提交

2012-06-24

EXT 篇,ext简单布局,ext form提交1.ext form 提交：script typetext/javascriptExt.onReady(function(

EXT 篇,ext简单布局,ext form提交

1.ext form 提交：

<script type="text/javascript">Ext.onReady(function() {Ext.create('Ext.form.Panel', {title : 'Simple Form',id:'formPanel_1',bodyPadding : 5,width : 350,// The form will submit an AJAX request to this URL when submittedurl : 'rForm.jsp',// Fields will be arranged vertically, stretched to full widthlayout : 'anchor',defaults : {anchor : '100%'},// The fieldsdefaultType : 'textfield',items : [ {fieldLabel : 'First Name',name : 'first',allowBlank : false}, {fieldLabel : 'Last Name',name : 'last',allowBlank : false} ],// Reset and Submit buttonsbuttons : [ {text : 'Reset',handler : function() {this.up('form').getForm().reset();}}, {text : 'Submit',formBind : true, //only enabled once the form is validdisabled : true,handler : function() {var form = this.up('form').getForm();if (form.isValid()) {//Ext.MessageBox.wait('Passing information to the server, Wait.. ');  form.submit({waitMsg:'Passing information to the server, Wait..',success : function(form, action) {Ext.MessageBox.hide(); Ext.getCmp('formPanel_1').hide(); //Ext.Msg.alert('Success', action.result.msg);var array = action.result.data;for(var i=0;i<array.length;i++){alert(array[i].id + array[i].name);}},failure : function(form, action) {form.reset();Ext.MessageBox.hide();Ext.Msg.alert('失败！', action.result.msg);}, });}}} ],renderTo : Ext.getBody()});});</script>

服务器端：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String firstName = request.getParameter("first");String lastName = request.getParameter("last");//System.out.append(firstName + "/" + lastName);String info = "info:'success'";try {java.lang.Thread.sleep(1000);} catch (Exception e) {e.printStackTrace();}//out.println("{ success:true,data:[{id:1, name:'A'},{id:2, name:'B'}] }");out.println("{ success:false,errors:[{id:1, name:'A'},{id:2, name:'B'}] }");%>

需要提醒的是：服务器端返回的是符合json格式字符串；

下面是风格不好的开发模式，非MVC模式，感觉代码越来越多，不好收拾，建议用MVC模式，因本人是后台开发，第一次做EXT应用。期待下一次用MVC模式开发。

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="../js/ext/resources/css/ext-all.css"type="text/css" /><script type="text/javascript" src="../js/ext/ext.js"></script><script type="text/javascript">Ext.require([ 'Ext.tab.*', 'Ext.window.*', 'Ext.tip.*','Ext.layout.container.Border' ]);Ext.onReady(function() {//storevar store = Ext.create('Ext.data.TreeStore', {root : {expanded : true,children : [ {text : "市场部门",expanded : true,children : [ {text : "销售部门",id : 'sales_',title : 'title',leaf : true,}, {text : "售后服务部门",leaf : true,id : 'NBRMA_',loaded : true} ]}, {text : "技术部门",expanded : true,children : [ {text : "需求分析部门",id : 'demand_analysis_',leaf : true}, {text : "编码部门",id : 'coder_',leaf : true} ]}, {text : "财务部门",id : 'treasurer_',leaf : true} ]}});var viewPort = Ext.create('Ext.Viewport',{closable : true,closeAction : 'hide',enableTabScroll : true,layout : 'border',bodyStyle : 'padding: 1px;',items : [{region : 'north',id : 'window-top',contentEl : 'applyto'//替换},{region : 'west',xtype : 'treepanel',title : 'Simple Tree',width : 200,height : 150,store : store,rootVisible : false,store : store,listeners : {itemclick : function(view,record, item,index, e, eOpts) {//view: 视图,record:叶子节点,item: , e: , eOpts:配置,var pre_name = record.get('id');Ext.create(//create store'Ext.data.Store',{storeId : 'simpsonsStore',pageSize : 3,fields : ['name','email','phone' ],proxy : {type : 'ajax',url : 'data.jsp',reader : {type : 'json',root : 'items'}},autoLoad : true});var paging = Ext.create("Ext.toolbar.Paging",{store : Ext.data.StoreManager.lookup('simpsonsStore'),displayInfo : true,displayMsg : "第 {0} - {1} 项, 共{2}项",beforePageText : "第",afterPageText : "共{0}页"});var grid = Ext.create('Ext.grid.Panel',{title : record.get('text'),closable : true,closeAction : 'hide',xtype : 'grid',store : Ext.data.StoreManager.lookup('simpsonsStore'),columns : [{header : 'Name',dataIndex : 'name',flex : 1},{header : 'Email',dataIndex : 'email',flex : 1},{header : 'Phone',dataIndex : 'phone',flex : 2} ],bbar : paging});var btn_bogus = Ext.getCmp(pre_name+ 'department');btn_bogus.removeAll();btn_bogus.add(grid);btn_bogus.show();}}},{region : 'center',xtype : 'tabpanel',id : 'center',frame : true,autoScroll : true,activeTab : 0,items : [{title : 'Bogus Tab1',html : 'Hello world 1',id : 'sales_department',layout : 'fit',closable : true,hidden : true,closeAction : 'hide'},{title : 'Another Tab2',html : 'Hello world 2',id : 'NBRMA_department',layout : 'fit',hidden : true,closable : true,closeAction : 'hide'},{id : 'demand_analysis_department',layout : 'fit',title : 'Closable Tab3',html : 'Hello world 3',hidden : true,closable : true,closeAction : 'hide'},{id : 'coder_department',layout : 'fit',title : 'Closable Tab4',html : 'Hello world 4',hidden : true,closable : true,closeAction : 'hide'},{id : 'treasurer_department',layout : 'fit',title : 'Closable Tab5',html : 'Hello world 5',hidden : true,closable : true,closeAction : 'hide'} ]},{region : 'south',title : 'Footer',height : 100,split : true,collapsible : true,html : '<h1 class="x-panel-header">Page Title</h1>',autoHeight : true,floatable : false,items : [ {title : 'butttt',width : 200,listeners : {click : {element : 'el', //bind to the underlying el property on the panelfn : function() {Ext.Ajax.request({url : 'response.jsp',//the same pathparams : {id : 1,name : 'chengchang lun '},success : function(response) {var text = response.responseText;Ext.Msg.alert(text);},failure : function(error) {Ext.Msg.alert(error)}});}}}//listeners} ]} ],});viewPort.show(100);});</script><title>Insert title here</title></head><body><script type="text/javascript">Ext.getBody().mask("<span style='font:normal normal bold 19px Arial;color:#4B8DF9'>loding...</span>");setTimeout(function() {Ext.getBody().unmask();}, 1000);</script><div style="display: none;"><div id="applyto"style='background: #889667; color: White; text-align: center; height: 80px'><marquee><h1>大连民族学院后台管理系统</h1></marquee></div></div></body></html>

response.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String pid = request.getParameter("id");String pname = request.getParameter("name").trim();out.println("from jsp server response  " + "id:" + pid + " name: "+ pname);%>

data.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String json = "{ items: [ {'name': 'Lisa','email': 'lisa@simpsons.com', 'phone': '555-111-1224'},"+ "{'name': 'Bart','email': 'bart@simpsons.com','phone': '555-222-1234' },"+ "{'name': 'Bart','email': 'bart@simpsons.com','phone': '555-222-1234' }],"+ "success: true,total: 101}";out.append(json);%>

热点排行

Web前端

EXT 篇,ext容易布局,ext form提交