Extjs开发帮助文档.doc

项目框架（Extjs） ExtJS是一种主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。功能丰富，无论是界面之美，还是功能之强，ext的表格控件都高居榜首 Ext学习及应用经验小结 一、简单理论 理解Html DOM、Ext Element及Component 　　要学习及应用好Ext框架，需要理解Html DOM、Ext Element及Component三者的区别。 HTML DOM 　　HTML DOM是HTML Document Object Model(文档对象模型)的缩写，HTML DOM则是专门适用与HTML/XHTML的文档对象模型。熟悉软件开发的人员可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。 例如Javascript就可以利用HTML DOM动态的修改网页。 　　DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscape的Javascript和 Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。 DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。由于它是基于信息层次的，因而 DOM 被认为是基于树或基于对象的 document 对象提供了一个很重要的方法: getElementById 。这个方法允许我们在任意浏览器中获取到该文档中的所有 Html DOM对象 Ext Element Ext Core 实现了一个类，叫做Ext.Element，这个类包装了 Html DOM，提供了多浏览器的支持 Component 对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此，除了Element以外，Ext 还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现相关数据展示及交互等，而 Component是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最终的页面效果。 在使用Ext开发的应用程序中，组件Component是最高层次的抽象，是直接给用户使用的，Ext Element是Ext的底层API，主要是由Ext或自定义组件调用的，而DOM是W3C标准定义的原始API，Ext的Element通过操作DOM 来实现页面的效果显示。 二、完整的增删改查 转到列表页面 列表页面无需先进入Action类，可根据访问路径直接进入XX_list.jsp 页面布局选用border，如果列表有查询条件，则查询条件占页面north，每个查询的字段可按column布局显示 表格grid位于页面center，xtype=“cctc.grid”,表格中可设置相关属性： Pagesize：每页显示的行数； sm：表格复选框； store：设置数据源，store中要设置fieldList属性，和bo及其Action中属性设置相同，store中的url属性设置为要查询列表的Action路径； columns：表格列的记录，第一列复选框，第二列序号，要显示的列及其数据，依次设置，注意用“，”号隔开； tbar：顶部按钮组，格式：[{},’-’,{}….] 转到新增页面 1) 传统的新增或着编辑页面都是由一个xtype=”cctc.formpanel”构成，即为form表单，如果按一列显示，外面选用column布局，嵌套form布局，如果字段不多，可选用默认的布局方式，即form布局; 2)添加页面属性 buttonAlign：按钮位置，可设置‘center’居中显示； labelAlign：label的位置，可设置‘right’右对齐； url：提交按钮提交到的action，相当于html中form的action属性； successAfter：function()：提交返回成功时要执行的方法，比如可以做一些让父列表页面刷新，还有让新增页面关闭的操作，如下方法： successAfter:function(f) { var win = this.findParentByType(window); %//通过win取出grid的store % win.store.load(); win.store