北大高科Web框架简易教程.doc

北大高科Web页面框架 帮助文档 目 录 1.1 概述 4 1.2 文件引入 4 1.3 页面布局 5 1.3.1 简单布局 5 1.3.2 再布局 7 1.4 Pku命名空间 10 1.4.1 getDom(el) : 10 1.4.2 getPku(el): 10 1.4.3 getExt(el): 10 1.5 核心panel面板容器 11 1.5.1 简单的panel容器 11 1.5.2 复杂的panel容器 11 1.5.3 获取panel容器对象 13 1.6 tabpanel页签容器 13 1.6.1 简单的tabpanel容器 13 1.6.2 复杂的tabpanel容器 14 1.7 Grid网格容器 15 1.7.1 GridPanel构造 15 1.7.2 数据源store 16 1.7.3 列模式colmodel 17 1.7.4 样例及显示效果 17 1.8 Treepanel树面板 18 1.8.1 Treepanel构造 18 1.8.2 xtype=root节点 19 1.8.3 xtype=loader节点 20 1.8.4 样例及显示效果 21 1.9 Window窗口面板 21 1.9.1 Window窗口构造 21 1.9.2 样例及显示效果 23 1.10 Form表单 23 1.10.1 Form对象构造 23 1.10.2 样例及效果 24 1.10.3 form常用方法 25 1.11 Form表单元素 26 1.11.1 普通input输入控件 26 1.11.2 数字型input输入控件 30 1.11.3 浮点型input输入控件 30 1.11.4 字典型input输入控件 30 1.11.5 日期型input输入控件 30 1.11.6 日期时间型input输入控件 30 1.11.7 查询型input输入控件 30 1.12 Toolbar工具条 30 1.12.1 Toolbar构造 30 1.12.2 样例及显示效果 31 1.13 Button按钮和Menu 32 1.13.1 Button构造 32 1.13.2 Menu构造 32 1.14 Ext事件 33 1.14.1 onExt + 大写开头的Ext事件名 33 1.15 Pku.Common常用方法 33 1.15.1 createDocument(strData,isUrl) 33 1.15.2 getNode(objXML, nodePath, index) 33 1.15.3 getNodeValue(objXML, nodePath, index) 33 1.15.4 setAttribValue (objXML,nodePath,attribName,attribValue) 34 1.15.5 getOpXml(form,isDom) 34 1.15.6 getQryXml(form,isDom) 34 1.15.7 getEmptyQryXml() 34 1.15.8 setEditValue(xmldoc,form,rootEl) 35 1.15.9 getRootXml(isDom) 35 1.15.10 addRootXml: function(xmldoc,isDom) 35  概述 Web框架是针对extjs的封装，Ext提供了好的页面布局方式、功能强大的组件、优质的页面风格，但是如果直接使用Ext又是较为复杂的，不仅要从头学习EXT框架，而且Ext是通过js函数创建页面的，这就不得不为每个页面都编写一个相对应初始化函数，这会使得开发人员要将大量的时间放在页面的制作上，而无法集中精力专注在业务组件的开发上，所以我们针对Ext框架进行再封装，将配置项写在div标签上，根据对应的xtyp自动构造ext对象。开发人员可以不用深入掌握Ext框架，只需要开发者编写少量的html代码，也可以做出很炫的页面。当然你也可以使用new Ext的控件渲染到页面，两者可以混合使用。 Web框架中的页面配置大多数和Ext的配置项相同，少量不同的再下面介绍组件的篇章会提到。框架的常用方法都在Pku.Common中，其他方法都是Ext的方法，大家可以参考ExtAPI。Web框架支持Ext的所有事件，调用方式请参考“Ext事件”篇章。开发者通常通过Pku.getExt(id)就可以得到Ext组件的原始对象，然后用这个对象再调用Ext的方法。 文件引入 要在页面上使用该框架需要引入相关的js文件： link rel=stylesheet type=text/css href=css/ext-all.css / link rel=stylesheet type=text/css href=css