《北大高科Web框架简易教程.doc》由会员分享，可在线阅读，更多相关《北大高科Web框架简易教程.doc（32页珍藏版）》请在金锄头文库上搜索。
1、 北大高科web框架教程 Created by Jun Created on 2010-6-24北大高科Web页面框架帮助文档目 录1.1概述41.2文件引入41.3页面布局51.3.1简单布局51.3.2再布局71.4Pku命名空间101.4.1getDom(el) :101.4.2getPku(el):101.4.3getExt(el):101.5核心panel面板容器111.5.1简单的panel容器111.5.2复杂的panel容器111.5.3获取panel容器对象131.6tabpanel页签容器131.6.1简单的tabpanel容器131.6.2复杂的tabpanel容器141
2、.7Grid网格容器151.7.1GridPanel构造151.7.2数据源store161.7.3列模式colmodel171.7.4样例及显示效果171.8Treepanel树面板181.8.1Treepanel构造181.8.2xtype=root节点191.8.3xtype=loader节点201.8.4样例及显示效果211.9Window窗口面板211.9.1Window窗口构造211.9.2样例及显示效果231.10Form表单231.10.1Form对象构造231.10.2样例及效果241.10.3form常用方法251.11Form表单元素261.11.1普通input输入控件
3、261.11.2数字型input输入控件301.11.3浮点型input输入控件301.11.4字典型input输入控件301.11.5日期型input输入控件301.11.6日期时间型input输入控件301.11.7查询型input输入控件301.12Toolbar工具条301.12.1Toolbar构造301.12.2样例及显示效果311.13Button按钮和Menu321.13.1Button构造321.13.2Menu构造321.14Ext事件331.14.1onExt + 大写开头的Ext事件名331.15Pku.Common常用方法331.15.1createDocument(
4、strData,isUrl)331.15.2getNode(objXML, nodePath, index)331.15.3getNodeValue(objXML, nodePath, index)331.15.4setAttribValue (objXML,nodePath,attribName,attribValue)341.15.5getOpXml(form,isDom)341.15.6getQryXml(form,isDom)341.15.7getEmptyQryXml()341.15.8setEditValue(xmldoc,form,rootEl)351.15.9getRootXm
5、l(isDom)351.15.10addRootXml: function(xmldoc,isDom)351.1 概述Web框架是针对extjs的封装，Ext提供了好的页面布局方式、功能强大的组件、优质的页面风格，但是如果直接使用Ext又是较为复杂的，不仅要从头学习EXT框架，而且Ext是通过js函数创建页面的，这就不得不为每个页面都编写一个相对应初始化函数，这会使得开发人员要将大量的时间放在页面的制作上，而无法集中精力专注在业务组件的开发上，所以我们针对Ext框架进行再封装，将配置项写在div标签上，根据对应的xtyp自动构造ext对象。开发人员可以不用深入掌握Ext框架，只需要开发者编写少
6、量的html代码，也可以做出很炫的页面。当然你也可以使用new Ext的控件渲染到页面，两者可以混合使用。Web框架中的页面配置大多数和Ext的配置项相同，少量不同的再下面介绍组件的篇章会提到。框架的常用方法都在Pku.Common中，其他方法都是Ext的方法，大家可以参考ExtAPI。Web框架支持Ext的所有事件，调用方式请参考“Ext事件”篇章。开发者通常通过Pku.getExt(id)就可以得到Ext组件的原始对象，然后用这个对象再调用Ext的方法。1.2 文件引入要在页面上使用该框架需要引入相关的js文件：ext-all.css ext框架的样式文件style.css Pku框架的样
7、式文件pku-all.js 该文件已经包含了ext框架的js文件，它应该在执行js之前引入，而且在样式文件之后。1.3 页面布局由于ext的布局方式很多，真正常用的不多，所以作者挑选了ext的border布局进行封装。如果您还有其他布局要求可以通过new Ext的控件方式渲染到页面，或者联系请联系我们,我们将根据您的需求进行定制。1.3.1 简单布局border布局运用east（右）、west（左）、north（上）、south（下）、center（其余部分）最多5个方位来满足布局需要，其中north和south的优先级最高，然后是east和west，最低的是center：North部分Sou
8、th部分West部分East部分Center部分通过上图可以理解这里优先级的意思：north和south占用整个页面的宽，高度由我们定义；west和east占用north和south高度以外剩下的全部高度，最后剩余的部分为center，下面是定义5个div标签来完成布局的实例： layout 布局 North部分 South部分West部分East部分中间部分 整体布局（后面会将谈到再次布局）时这些div节点一定要都是body标签的直接子节点，而且body标签再不应该含有其它需要显示出来的直接子节点，否则将不作为布局方式，直接以html内容引入。 5个div并不是都需要的，其中center对应
9、的div节点是不可或缺的，其它div根据对页面布局的需要来定义，而且每个div一定要定义id属性。 定义布局的div标签定义了一些扩展标签：u region属性：每个定义布局的div一定需要定义region属性，而且该属性的值只可以是east、south、west、north、center其中之一，并不能重复，这就定义了该div在页面上所在的布局位置。u height/width属性：region为north或south的div需要定义height属性，指定占用页面上下的高度是多少，这里定义width属性没有作用，宽度始终是100；region为east或west的div需要定义width属性
10、，指定占用页面左右的宽度是多少，这里定义height属性没有作用，高度始终是除去north和south高以后的100；region为center的div不需要定义height和width，它的部分始终是其它部分占用后剩余的部分。u border属性：5个布局div都可以设置整个属性，默认是为true，如果不想布局区域有边框就设为false。u title属性：在布局div中定义title可以在整个区域上添加一个标题头，该属性指定标题头的内容。u split属性：该属性默认为false，布局div中定义split为true表示该区域可以通过拖拉边框来实现伸缩，region为north和south
11、的区域高度可以伸缩；region为east和west的区域宽度可以伸缩，该属性对center区域无效。u minSize/ maxSize属性：该属性指定了区域拖动范围的最小/大值，这两个属性只有在split属性为true时，设置这两个属性才有效。u collapsible属性：该属性默认为false，布局div中定义collapsible为true表示该区域缩回，这里注意，在页面上对区域的缩回是需要通过点击区域的标题头实现的，所以如果没有设置title属性，就无法通过鼠标来完成区域的缩回。该属性对center区域无效。u collapseMode属性：只有在collapsible属性为tru
12、e时才有意义，它指定了区域缩回的方式，这里要么不设置，要设置就只能为mini。1.3.2 再布局通过第一节现在就可以对整个页面进行一次布局，但是有些时候需要的布局仅仅依靠5个区域是无法实现的或是5个区域的分布不是我们所希望的，例如：DABCECBAD这里图片显示的布局都无法运用前面提到的简单布局方式实现，那么就需要对页面进行再次布局，在介绍布局方式以前，先来看看实现布局的思路。从第一个图来看，A区域可以对应到south部分，B区域可以对应到east部分（注意前面已经提到，不是5个部分都必不可少），如果这个时候把C设为north部分，那么布局就会形成如下样式：CBAD这个就是因为布局区域优先级的问题，所以现在要改变布局方式，还是将A区域可以对应到south部分，B区域可以对应到east部分，而C、D两个区域先不管，合并起来对应到center部分，形如：BAXCADB然后我们将center对应的X区域再进行一次布局，将C区域对应到X区域的north部分，D区域对应到X区域的center部分。思路已经很清晰了，再来看如何实现。第一步将A区域可以对应到south部分，B区域可以对应到east部分的方式和前面一样，关键来看第二步，如何将C区域对应到
