EXT_JS实用开发指南_个人整理笔记

EXTJS实用开发指南1、要使用ExtJS框架的页面中一般包括下面几句：linkrel=stylesheettype=text/csshref=extjs/resources/css/ext-all.css/scripttype=text/javascriptsrc=extjs/adapter/ext/ext-base.js/scriptscripttype=text/javascriptsrc=extjs/ext-all.js/scriptExt.BLANK_IMAGE_URL='../../js/ext2/resources/images/default/tree/s.gif';在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数，因此可以用，一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的，使用ExtJS应用，程序的代码大致如下：scriptfunctionfn(){alert(“ExtJS库已加”);}Ext.onReady(fn);/script2、A：fn也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：scriptExt.onReady(function(){alert(“ExtJS库已加载!”);});/scriptB：进一步，我们可以在页面上显示一个窗口，代码如下：scriptExt.onReady(function(){Varwin=newExt.Window({title:hello,width:300,height:200,html:'h1Hello,easyjfopensource/h1'});//参数是标题,宽度,高度,html文本win.show();});/script3、ExtJS的类库由以下几部分组成：底层API(core)：底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层api的基础上，底层api位于源代码目录的core子目录中，包括DomHelper.js、Element.js等文件控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets子目录中实用工具Utils：Ext提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax请求、Cookie管理、CSS管理等扩展等功能4、Ext2.0对框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext的控件，Ext组件是由Component类定义，每一种组件都有一个指定的xtype属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。组件体系由下图所示：组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。基本组件有：xtypeClassboxExt.BoxComponent具有边框属性的组件ButtonExt.Button按钮colorpaletteExt.ColorPalette调色板componentExt.Component组件containerExt.Container容器cycleExt.CycleButtondataviewExt.DataView数据显示视图datepickerExt.DatePicker日期选择面板editorExt.Editor编辑器editorgridExt.grid.EditorGridPanel可编辑的表格gridExt.grid.GridPanel表格pagingExt.PagingToolbar工具栏中的间隔panelExt.Panel面板progressExt.ProgressBar进度条splitbuttonExt.SplitButton可分裂的按钮tabpanelExt.TabPanel选项面板treepanelExt.tree.TreePanel树viewportExt.ViewPort视图windowExt.Window窗口工具栏组件有toolbarExt.Toolbar工具栏tbbuttonExt.Toolbar.Button按钮tbfillExt.Toolbar.Fill文件tbitemExt.Toolbar.Item工具条项目tbseparatorExt.Toolbar.Separator工具栏分隔符tbspacerExt.Toolbar.Spacer工具栏空白tbsplitExt.Toolbar.SplitButton工具栏分隔按钮tbtextExt.Toolbar.TextItem工具栏文本项表单及字段组件包含formExt.FormPanelForm面板checkboxExt.form.Checkboxcheckbox录入框comboExt.form.ComboBoxcombo选择项datefieldExt.form.DateField日期选择项fieldExt.form.Field表单字段fieldsetExt.form.FieldSet表单字段组hiddenExt.form.Hidden表单隐藏域htmleditorExt.form.HtmlEditorhtml编辑器numberfieldExt.form.NumberField数字编辑器radioExt.form.Radio单选按钮textareaExt.form.TextArea区域文本框textfieldExt.form.TextField表单文本框timefieldExt.form.TimeField时间录入项triggerExt.form.TriggerField触发录入项4、组件的使用组件可以直接通过new关键子来创建，比如控件一个窗口，使用newExt.Window()，创建一个表格则使用newExt.GridPanel()。当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件。比如下面的例子：varobj={title:hello,width:300,height:200,html:'Hello,easyjfopensource'};varpanel=newExt.Panel(obj);panel.render(hello);divid=hello /div可以省掉变量obj，直接写成如下的形式：varpanel=newExt.Panel({title:hello,width:300,height:200,html:'h1Hello,easyjfopensource/h1'});panel.render(hello);render方法后面的参数表示页面上的div元素id，也可以直接在参数中通过renderTo参数来省略手动调用render方法，只需要在构造函数的参数中添加一个renderTo属性即可varpanel=newExt.Panel({renderTo:hello,title:hello,width:300,height:200,html:'h1Hello,easyjfopensource/h1'});对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过在需要父组件的构造函数中，通过给属性items传递数组方式实现构造。如下面的代码：varpanel=newExt.TabPanel({width:300,height:200,items:[{title:面板1,height:30},{title:面板2,height:30},{title:面板3,height:30}]});panel.render(hello);注意中括号中加粗部份的代码，这些代码定义了TabPanel这个容器控件中的子元素，这里包括三个面板。上面的代码与下面的代码等价：varpanel=newExt.TabPanel({width:300,height:200,items:[newExt.Panel({title:面板1,height:30}),newExt.Panel({title:面板2,height:30}),newExt.Panel({title:面板3,height:30})]});panel.render(hello);上两处代码，前者不但省略掉了newExt.Panel这个构造函数，最重要前者只有在初始化TabPanel的时候，才会创建子面板，而第二种方式则在程序一开始就会创建子面板。也就是说，前者实现的延迟加载。5、组件的配置属性在ExtJS中，除了一些特殊的组件或类以外，所有的组件在初始化的时候都可以在构造函数使用一个包含属性名称及值的对象，该对象中的信息也就是指组件的配置属性。比如配置一个面板：Vara=newExt.Panel({title:面板,html面板内容,height:100});创建一个按钮：varb=newExt.Button({text:添加,pressed:true,heigth:30,handler:Ext.emptyFn});创建一个Viewport及其中的内容：newExt.Viewport({layout:border,items:[{region:north,title:面板,html:面板内容,height:100},{region:center,xtype:grid,title:学生信息管理,store:troe,cm:colM,store:store,autoExpandColumn:3}]});每一个组件除了继承基类中的配置属性以外，还会根据需要增加自己的配置属性，另外子类中有的时候还会把父类的一些配置属性的含义及用途重新定义。学习及使用ExtJS，其中最关键的是掌握ExtJS中的各个组件的配置属性及具体的含义，这些配置属性在下载下来的ExtJS源码文档中都有详细的说明，可以通过这个文档详细了解每一个组件的特性。由于所有的组件都继承自Ext.Component，因此在这里我们列出组件基类Component中的配置属性简单介绍。配置属性名称类型简介allowDomMoveBoolean当渲染这个组件时是否允许移动Dom节点（默认值为true）。applyToMixed混合参数，表示把该组件应用指定的对象。参数可以是—节点的id，一个DOM节点或一个存在的元素或与之相对应的在document中已出现的id。当使用applyTo，也可以提供一个id或CSS的class名称，如果子组件允许它将尝试创建一个。如果指写applyTo选项，所有传递到renderTo方法的值将被忽略，并且目标元素的父节点将自动指定为这个组件的容器。使用applyTo选项后，则不需要再调用render()方法来渲染组件。autoShowBoolean自动显示，如为true，则组件将检查所有隐藏类型的class（如：”x-hidden”或”x-hide-display”并在渲染时移除(默认为false)。clsString给组件添加额外的样式信息，（默认值为''），如果想自定义组件或它的子组件的样式，这个选项是非常有用的。ctClsString给组件的容器添加额外的样式信息，默认值为'')。disabledClassString给被禁用的组件添加额外的CSS样式信息，（默认为x-item-disabled）。hideModeString组件的隐藏方式，支持的值有”visibility”，也就是css里的visibility，”offsets”负数偏移位置的值和”display”也就是css里的display，默