Ext20教程.doc

Ext2.0教程一：Ext介绍以及 ext页面布局 air:适配器data：数据处理dd：页面元素的拖曳form：表单操作grid：装载数据的表格layout:布局menu：各式菜单state:用户状态tree：各式树util：常用函数学习Ext必须注意，使用ext必须导入ext包，将下载好的ext保存在本地硬盘，像导入普通js文件、css文件一样导入需要的文件；要使用ext，下面三个文件是必须导入的 第一个导入Ext样式，其实ext就是js+样式，所以必须导入。第二和第三个都是js文件，必须注意导入顺序,ext-all.js 里面要使用到 ext-base.js设置的基本参数，因此ext-base.js必须先导入！ext-base.js 有500多k的大小，页面加载的速度可能比较慢，再由于交互性强，特别适合后台管理。可以采用进度条缓冲加载。Ext对语言支持是非常好的，界面显示的语言是英文。我们可以新建一个语言文件放入到ext包根目录下。通常我们中文的文件命名为ext-lang-zh_CN.jsext最简单应用： Ext.onReady(function() Ext.MessageBox.alert(hello,wayfoon); ); 布局介绍你可以先预览效果：布局效果图布局主要有 Accordion布局，Border区域布局，Column列布局和Card布局。Accordion布局：Accordion布局由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。Column列布局：Column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。Card布局：Card布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。由于时间问题，下面只介绍Border区域布局 这里叫做页面布局采用ext开发的程序，大部分是在一个页面中完成，在该页面中打开多个面板，因此页面布局非常重要，如图一个页面在Ext 中是分为：东西南北中 也就是左右上下中，在实际应用中可以减少一些部分页面布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。ext 中元素的属性设置都是采用key：value的形式先定义页面的上部分：（用法见注释） /页面的上部分 var northPanel=new Ext.Panel( title:顶部面板(实际应用中，通常去掉改属性),/实际应用中，通常去掉该属性。 region : north,/北部，即顶部，上面 contentEl : north-div,/面板包含的内容 split : false,/是否可以改变面板大小 border : false,/当面板内容超出面板大小时，是否显示边框 collapsible : false,/是否可以收缩,默认不可以收缩，即不显示收缩箭头 /collapsed:true,/初始化是否显示, 默认是显示 height : 60 ); 注意 collapsible的使用页面的左菜单：（用法见注释）/左边菜单 var westPanel=new Ext.Panel( title : 左边菜单,/面板名称 region : west,/该面板的位置，此处是西部 也就是左边 split : true,/为true时，布局边框变粗 ,默认为false border : false, collapsible : true, collapsed:false,/初始化是否显示, 默认是显示 width : 150, minSize : 10,/最小宽度 maxSize : 300, layout : accordion, layoutConfig : /布局 titleCollapse : true, animate : true, activeOnTop : false , items : title : 统计查询, iconCls : money_box/字面板样式 /contentEl : my-book/子面板包含的内容，contentEl 的值日通常是一个div ID , title:内容管理, border:false,autoScroll:true,iconCls:Icon, autoLoad:url:xx.htm,scripts:true/面板的内容是指向一个*.htm，scripts:true 是表示支持包含文件里面的js脚本 ); 左菜单中定义了多个可以折叠的菜单面板，由items包含，上面代码中包含了两个，指向的内容可以使用contentEl包含div，或者 autoLoad加载页面，也可以直接采用html 比如， html:link。其他面板像上面一样定义。最后将多个面板组合到页面：var viewport = new Ext.Viewport( layout : border,/布局,必须是border loadMask : true, items : northPanel, /上 westPanel,/左 centerPanel,/中 eastPanel,/右 southPanel/下 ); 将各个面板分别加到了viewport 中layout 的值 可以是 column，border，accordion，页面布局必须使用 border。column在form中使用所有代码如下，可以另存为*.htm，修改ext文件路径，文件执行 Wayfoon:Ext页面布局 上 上 上 上 上 面板的布局分为：东西南北中 也就是左右上下中 Copyright 2007-2008 版权所有 效果如图：Ext2.0教程二：基本表格GridPanel，从后台数据库取数据学习使用GridPanel需要先了解Json ，和 Ext.data.Storejson介绍见 /wayfoon322/archive/2008/07/10/2633428.aspxExt.data.Store介绍见：/wayfoon322/archive/2008/07/11/2638387.aspx后台需要提供json数据供前台显示。比如下列的json数据stcCallback1001 (results:6,template: id:1,name:流程1,user:id:1,name:wayfoon, id:2,name:流程2,user:id:1,name:wayoon, id:3,name:流程3,user:id:1,name:wayfoon, id:4,name:流程4,user:id:1,name:wayfoon, id:5,name:流程5,user:id:1,name:wayfoon, id:6,name:流程6,user:id:1,name:wayfoon ) stcCallback1001，由ext提供的参数callback自动生成 ，在后台代码中request.getParameter()得到，从1001开始，1002，1003results 表示记录总数，results这个名称是自定义的，自己可以设定，比如 total:6template 真正的数据，名称也是自定义的，以下面Ext.data.Store 中的一致就可以。 id:1,name:流程1,user:id:1,name:wayfoon, 是一条记录，可以看出 user 是一个对象，如果数据中不包含对象不需要这样写 你也可以访问 /forum/topics-remote.php 查看json数据格式，做个比较。 访问后台数据通常是一个链接，假如你的后台采用java ，又使用Struts2.0 。一切都变的简单。你可以直接，String info=id:1,name:wayfoon; request.setAttribute(info, info); return SUCCESS; info 是String ，值就是json格式的字符串。 假如你采用servlet则可以protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException response.addHeader(Cache-Control, no-cache); response.setContentType(HTML/JavaScript;charset=UTF-8); PrintWriter out = response.getWriter(); String json = id:1,name:wayfoon ; out.print(json); 下面介绍前台Ext部分，可以直接参考例子： EXT2.0: GridPanel 分页方法绝好例子 下面着重介绍ext和后台的交互，var store = new Ext.data.Store( proxy : new Ext.data.ScriptTagProxy(url:/forum/topics-remote.php), reader: new Ext.data.JsonReader( root: topics, totalProperty: totalCount, id: post_id , post_id,topic_title,author ) ); store.load(params:start:0, limit:10); proxy:是数据代理，数据代理（源）基类由Ext.data.DataProxy定义，在DataProxy的基础，ExtJS提供了Ext.data.MemoryProxy、Ext.data.HttpProxy、Ext.data.ScriptTagProxy等三个分别用于从客户端内存数据、Ajax读取服务器端的数据及从跨域服务器中读取数据等三种实现。从上面代码中可以看到 代理提交的 url是 /forum/topics-remote.php 。实际上在后台接收到的，url是 /forum/topics-remote.php?callback=1001&start=0&limit=10 还有一个参数忘了。 后台处理代码：struts2.0 public String execute() throws Exception String action = request.getParameter(action); String info = ; String callback = request.getParameter(callback); String start = request.getParameter(start); String limit = request.getParameter(limit); StringBuffer text = new StringBuffer(); List list = 从数据库中去的数据,你可以分页取; Integer limit = tv.getStart() + tv.getLimit(); if (limit list.size() limit = list.size(); List templates = list.subList(start, limit); text.append(callback + (results: + list.size() + ,template:); for (Itemplate itemplate : templates) text.append(id: + itemplate.getId() + ,name: + itemplate.getName() + ,user:id: + itemplate.getIuser().getId() + ,name: + itemplate.getIuser().getUname() + ,); if (text.charAt(text.length() - 1) = ,) text.deleteCharAt(text.length() - 1); text.append(); info=text.toString(); request.setAttribute(info, info); return SUCCESS; info就是需要的json字符串输出stcCallback1001 (results:6,template: id:1,name:流程1,user:id:1,name:wayfoon, id:2,name:流程2,user:id:1,name:wayfoon, id:3,name:流程3,user:id:1,name:wayfoon, id:4,name:流程4,user:id:1,name:wayfoon, id:5,name:流程5,user:id:1,name:wayfoon, id:6,name:流程6,user:id:1,name:wayfoon ) 效果见 例子： EXT2.0: GridPanel 分页方法绝好例子 Ext2.0教程三：Ext2.0从新建窗口开始开发中，通常需要新建窗口，比如登陆窗口，新增窗口。新建窗口使用到Ext.Window提供的类,你可以先预览效果：效果图建立一个简单的窗口:var win=new Ext.Window( id:w, title:wayfoon:新窗口,/窗口显示名称 width:300, height:140, collapsible: true,/是否可折叠 layout : column,/布局方式 items:/窗口需要增加的内容 ).show();/让窗口显示出来上面只定义了窗口的名称、长、宽、布局方式，其他属性之后详细描述。你可以在items里面增加你需要的内容。比如你可以直接在items里面添加html代码:items: xtype : panel,/html代码容器 html : 姓名： 在这里，我将演示添加一个form表单。先新建一个form。form由Ext.form.FormPanel定义一个标准的form定义var from =new Ext.form.FormPanel( bodyStyle : padding-top:5px,/距离窗口上端的距离 id:f, labelWidth:50,/文本部分的宽度 labelAlign:right,/文本的排列方式 labelPad : 0,/文本和输入框之间的距离 layout:form,/布局方式 frame : true, defaults:/字元素默认的属性 width:200 , defaultType:textfield,/默认的input 类型 items: id:workid, cls : user, fieldLabel:编号, /disabled:true, allowBlank:false/是否允许为空 , id:workname, fieldLabel:名称, allowBlank:false , buttonAlign:center,/按钮的排列方式 buttons:/按钮写在窗口，要比写在form里面好看多了 text:确定, type:submit, handler:function()/点击触发事件处理 /这里不需要逗号，每个控件定义都是这样的 ) 现在可以将form加入到窗口中，items:form 就可以！这样显示的窗口不是很美观，我们可以做些调整。将按钮放到表单之外，也就是放在窗口下面。这样，修改之后的窗口，var win=new Ext.Window( id:w, renderTo: bd, title:wayfoon:新窗口, width:300, height:140, collapsible: true,/是否可折叠 defaults : / 容器内元素是否显示边框 border : true , /layout:fit, layout : column,/布局方式 items:form,/包含表单，多个用逗号隔开 buttonAlign:center,/按钮的排列方式 buttons:/按钮写在窗口，要比写在form里面好看多了 text:确定, type:submit, handler:function() ).show(); 一个新窗口，基本完成！可以将下面代码保存成*.htm执行。所有代码： wayfoon:新窗口 Ext.onReady(function() Ext.QuickTips.init();/初始化鼠标停留时的显示框 Ext.form.Ftotype.msgTarget = side; var bd = Ext.getBody(); var form =new Ext.form.FormPanel( bodyStyle : padding-top:5px,/距离窗口上端的距离 id:ll, labelWidth:50,/文本部分的宽度 labelAlign:right,/文本的排列方式 labelPad : 0,/文本和输入框之间的距离 layout:form,/布局方式 frame : true, defaults:/字元素默认的属性 width:200 , defaultType:textfield,/默认的input 类型 items: id:workid, cls : user, fieldLabel:编号, /disabled:true, allowBlank:false/是否允许为空 , id:workname, fieldLabel:名称, allowBlank:false ) var win=new Ext.Window( id:w, renderTo: bd, title:wayfoon:新窗口, width:300, height:140, collapsible: true,/是否可折叠 defaults : / 容器内元素是否显示边框 border : true , /layout:fit, layout : column, items:form, buttonAlign:center,/按钮的排列方式 buttons:/按钮写在窗口，要比写在form里面好看多了 text:确定, type:submit, handler:function() ).show(); ); 效果图： 如果你想在按钮触发时，添加事件handler:function() alert(123); var workid=Ext.get(workid).dom.value; alert(workid); 下面演示一个submit登陆事件，你也可以单独定义一个方法（调用方法，handler:login）： / 单击按钮时执行登陆操作 var login = function() var workid=Ext.get(workid).dom.value; alert(wayfoon:+workid); /* 这里可以判断输入的值是否合法，（通过 类似：var workid=Ext.get(workid).dom.value;得到值日）否则不执行下面的submit */ / 执行当前表单面板的submit f.form.submit( / 动作发生期间显示的文本信息 /waitMsg : 正在登录., / submit发生时指向的地址 url : /xxx/login.jsp, / 表单提交方式 method : POST, / 数据验证通过时发生的动作 success : function(form, action) /成功的走向 window.location.href = main.htm?t=+new Date(); , / 反之. failure : function(form, action) if (action.failureType = Ext.form.Action.SERVER_INVALID) Ext.MessageBox.alert(警告, action.result.errors.msg); ); ; login 方法要在调用之前定义好。 完整的代码如下： wayfoon:新窗口 Ext.onReady(function() Ext.QuickTips.init();/初始化鼠标停留时的显示