EXT-JS

EXT开发指南目录一、EXTJS框架下载:................................................................................................................2二、EXTJS使用.........................................................................................................................21.页面引用...........................................................................................................................22.ExtJS调用.........................................................................................................................23.组件体系下图所示：.......................................................................................................31)组件的使用...............................................................................................................42)组件的配置属性.......................................................................................................5三、各功能组件使用方法及介绍.........................................................................................101.面板Panel.......................................................................................................................102.窗口Ext.Window............................................................................................................143.布局.................................................................................................................................194.表格.................................................................................................................................265.数据存储Store...............................................................................................................376.树控件.............................................................................................................................42一、EXTJS框架下载:下载地址：或者二、EXTJS使用1.页面引用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/script2.ExtJS调用在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数，程序的代码大致如下：scriptfunctionfn(){alert(“ExtJS库已加”);}Ext.onReady(fn);/scriptfn也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：scriptExt.onReady(function(){alert(“ExtJS库已加载!”);});/script进一步，我们可以在页面上显示一个窗口，代码如下：scriptExt.onReady(function(){varwin=newExt.Window({title:hello,width:300,height:200,html:'h1Hello/h1'});//参数是标题,宽度,高度,html文本win.show();});/script3.组件体系下图所示：组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。基本组件有：xtypeClassboxExt.BoxComponent具有边框属性的组件ButtonExt.Button按钮colorpaletteExt.ColorPalette调色板componentExt.Component组件containerExt.Container容器dataviewExt.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触发录入项1)组件的使用组件可以直接通过new关键子来创建，比如控件一个窗口，使用newExt.Window()，创建一个表格则使用newExt.GridPanel()。当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件。比如下面的例子：varobj={title:hello,width:300,height:200,html:'Hello,opensource'};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,opensource/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的时候，才会创建子面板，而第二种方式则在程序一开始就会创建子面板。也就是说，前者实现的延迟加载。2)组件的配置属性在ExtJS中，除了一些特殊的组件或类以外，所有的组件在初始化的时候都可以在构造函数使用一个包含属性名称及值的对象，该对象中的信息也就是指组件的配置属性。比如配置一个面板：Vara=newExt.Panel({title:面板,html面板内容,height:100});创建