Extjs

概述
    ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。
    ExtJS可以用来开发RIA也即富客户端的AJAX应用
    ExtJS文件比较大,一般用在局域网中的程序上
    ExtJS的较新版本是收费的
    特点:页面很炫,体积很大,适合直接使用,不适合学习



引入资源
    将ext-4.2.1.883文件夹放入到项目中,然后在文件中添加
    
    



常用函数
    Ext.onReady(fun)
        在页面加载完成后执行fun()函数
    Ext.MessageBox.alert(str1,str2)
        弹出对话框,str1为标题栏标题,str2为内容



Ext类库
    ExtJS 由一系列的类库组成,一旦页面成功加载了ExtJS 库后,我们就可以在页面中通过javascript 调用ExtJS 的类及控件来实现需要的功能
    ExtJS 的类库由以下几部分组成:
        底层API(core):底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。其它控件都是建立在这些底层api 的基础上
        控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等,在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。
        实用工具Utils:Ext 提供了很多的实用工具,可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能



组件
    概述
        Ext2.0 对框架进行了非常大的重构,其中最重要的就是形成了一个结构及层次分明的组件体系,
        由这些组件形成了Ext 的控件,Ext 组件是由Component 类定义,每一种组件都有一个指定的xtype 属性值,
        组件的要素 类型(xtype),配置选项,属性,方法,事件
        通过xtype值可以得到一个组件的类型或者是定义一个指定类型的组件。
    类型
        基本组件(左边为xtype值,右边为对应的类型)
            button           Ext.button.Button
            buttongroup      Ext.container.ButtonGroup
            colorpalette     Ext.picker.Color
            component        Ext.Component
            container        Ext.container.Container
            cycle            Ext.button.Cycle
            dataview         Ext.view.View
            datepicker       Ext.picker.Date
            editor           Ext.Editor
            editorgrid       Ext.grid.plugin.Editing
            grid             Ext.grid.Panel
            multislider      Ext.slider.Multi
            panel            Ext.panel.Panel
            progressbar      Ext.ProgressBar
            slider           Ext.slider.Single
            splitbutton      Ext.button.Split
            tabpanel         Ext.tab.Panel
            treepanel        Ext.tree.Panel
            viewport         Ext.container.Viewport
            window           Ext.window.Window
        工具栏组件
            pagingtoolbar    Ext.toolbar.Paging
            toolbar          Ext.toolbar.Toolbar
            tbfill           Ext.toolbar.Fill
            tbitem           Ext.toolbar.Item
            tbseparator      Ext.toolbar.Separator
            tbspacer         Ext.toolbar.Spacer
            tbtext           Ext.toolbar.TextItem
        菜单组件
            menu             Ext.menu.Menu
            menucheckitem    Ext.menu.CheckItem
            menuitem         Ext.menu.Item
            menuseparator    Ext.menu.Separator
            menutextitem     Ext.menu.Item
        表单组件
            form             Ext.form.Panel
            checkbox         Ext.form.field.Checkbox
            combo            Ext.form.field.ComboBox
            datefield        Ext.form.field.Date
            displayfield     Ext.form.field.Display
            field            Ext.form.field.Base
            fieldset         Ext.form.FieldSet
            hidden           Ext.form.field.Hidden
            htmleditor       Ext.form.field.HtmlEditor
            label            Ext.form.Label
            numberfield      Ext.form.field.Number
            radio            Ext.form.field.Radio
            radiogroup       Ext.form.RadioGroup
            textarea         Ext.form.field.TextArea
            textfield        Ext.form.field.Text
            timefield        Ext.form.field.Time
            trigger          Ext.form.field.Trigger
        图表组件
            chart            Ext.chart.Chart
            barchart         Ext.chart.series.Bar
            columnchart      Ext.chart.series.Column
            linechart        Ext.chart.series.Line
            piechart         Ext.chart.series.Pie
    创建组件
        组件可以直接通过new 关键子来创建,比如控件一个窗口,使用new Ext.Window()
        一般都会在构造函数中通过传递一个对象来创建组件。对象包含创建组件所需要的配置选项及值
        例
            var obj={title:"hello",width:300,height:200,html:'

Hello,easyjf open source

'}; var panel=new Ext.Panel(obj); 渲染组件 一般在创建组件时使用配置选项renderTo选项使组件渲染到指定的页面元素上(值为元素的id) var obj={title:"hello",width:300,height:200,renderTo:'hello',html:'

Hello,easyjf open source

'}; var panel=new Ext.Panel(obj); 页面上需要存在元素:
 
在容器中创建子元素组件 通过给属性items 传递数组方式实现构造 第一种 var panel=new Ext.TabPanel({width:300,height:200,items: [ {title:"面板1",height:30}, {title:"面板2",height:30}, {title:"面板3",height:30} ]}); panel.render("hello"); 第二种 var panel=new Ext.TabPanel({width:300,height:200,items: [ new Ext.Panel({title:"面板1",height:30}), new Ext.Panel({title:"面板2",height:30}), new Ext.Panel({title:"面板3",height:30}) ]}); panel.render("hello"); 对比 第一种 省略了构造函数的写法,并且可以延迟加载,在需要时再创建子元素.推荐 事件 添加事件处理函数 Ext.util.Observable类是所有支持事件的类的基类 使用Ext.util.Observable类的addListener方法为元素添加事件(addListener方法有一个别名是on) addListener( String/Object eventName, [Function fn], [Object scope], [Object options] ) on( String/Object eventName, [Function fn], [Object scope], [Object options] ) eventName 要监听的事件的名称 fn 事件处理函数,具体函数的参数可以在具体组件的事件中查询,一般都有一个EventObject类型的参数 scope 事件处理函数执行的作用域,即函数中this指向的对象(默认为触发事件的对象) options 选项 options对象的可选配置 scope : Object 事件处理函数执行的作用域,即函数中this指向的对象(默认为触发事件的对象) delay : Number 事件触发后,调用事件处理函数延时毫秒数。 single : Boolean 设置为true添加一个事件处理函数,只处理下一次触发的事件, 然后移除这个函数。 buffer : Number 使事件处理函数在Ext.util.DelayedTask中调度运行, 延时指定的毫秒数。如果事件在这段事件再次触发, 原先的事件处理函数不再调用, 新的事件处理函数接替。 target : Ext.util.Observable 只有当事件在目标Observable上触发时调用事件处理函数, 如果事件是从Observable的子类起泡的,不会调用事件处理函数 注意 事件处理函数的参数可以在具体组件的事件中查询 一些事件可以通过在事件处理函数中返回false,阻止后续动作的发生 EventObject Ext.EventObject表示发生事件的对象,通常作为事件响应函数的参数 方法 getCharCode( ) : Number 获取事件的字符值。 getKey( ) : Number 为事件提供一个规格化的keyCode getTarget( String selector, Number/HTMLElement maxDepth, Boolean returnEl ) : HTMLElement 获取事件的目标对象 getX( ) : Number 获取事件x坐标 getY( ) : Number 获取事件y坐标 hasModifier( ) : Boolean 如果在此事件期间 control, meta, shift 或 alt 按下,则返回 true preventDefault( ) 阻止浏览器默认行为处理事件 stopPropagation( ) 取消事件冒泡 within( String/HTMLElement/Ext.Element el, Boolean related, Boolean allowEl ) : Boolean 如果此事件的目标对象是el的子级,则返回true。除非设置allowEl参数,如果目标对象是在el,它将返回false 示例 var btn = new Ext.Button({ text: "我的按钮", renderTo: "btn" }); btn.on("click",function(button, eventObject){ new Ext.Window({ title: "win"+button.text, width: 300, height: 200 }).show(); }); 组件体系 Ext.Component 组件 Ext.container.Container 容器 Ext.panel.Panel 面板 Ext.window.Window 窗口 Ext.window.MessageBox 对话框 Ext.grid.Panel 基本表格 Ext.menu.Menu 菜单 Ext.form.Panel 表单面板 Ext.toolbar.Toolbar 工具栏 Ext.container.Viewport 视图窗口 Ext.tree.Panel 树 Ext.tab.Panel 选项卡 Ext.panel.Tool 小工具 Ext.button.Button 按钮 Ext.Component 概述 Ext.Component类是所有组件的基类 配置选项 说明 在ExtJS 中,除了一些特殊的组件或类以外,所有的组件在初始化的时候都可以在构造函数使用一个包含属性名称及值的对象,该对象中的信息也就是指组件的配置选项。 每一个组件除了继承基类中的配置选项以外,还会根据需要增加自己的配置选项,另外子类中有的时候还会把父类的一些配置选项的含义及用途重新定义。 常用配置选项 id : String 当前组件实例唯一的ID。 xtype : String 此属性提供了一个较短的替代全类型创建对象. 例 items: [{xtype: 'textfield',fieldLabel: 'Foo'}] width : Number 此组件的宽度,以像素为单位。 height : Number 此组件的高度,以像素为单位。 margin : Number/String 为组件设置margin padding : Number/String 为组件设置padding hidden : Boolean True 将隐藏该组件。 disabled : Boolean True 将禁用该组件。 cls : String 可选的额外的CSS类将被添加到该组件的元素 html : String/Object 一个 HTML 片段, 或者一个 DomHelper 描述, 用作 layout 元素的内容 renderTo : String/HTMLElement/Ext.Element 指定元素的id, 一个DOM元素或现有的元素,这个组件将被渲染到指定元素 autoScroll : Boolean 是否在内容溢出时显示滚动条 style : String/Object 为该组件设置样式 border : Number/String 指定该组件的边框 shadow : String/Boolean 定义浮动组件是否应该有阴影效果 shadowOffset : String/Boolean 阴影效果偏移的像素值. floating : Boolean 指定为'true'的时候浮动组件以外的文档流中使用CSS绝对定位。 listeners : Object 一个配置对象,包含一个或多个事件处理函数,在对象初始化时添加到对象。 autoEl : String/Object 自动创建 Element ,用来封装当前组件.(一般为div) contentEl : String 指定一个已存在的HTML元素, 或者一个已存在HTML元素的 id , 它们将被用作当前组件的内容 loader : Ext.ComponentLoader/Object 一个配置对象或者一个 Ext.ComponentLoader 实例加载组件远程内容 配置选项示例 listeners listeners: { click: { element: 'el', fn: function(){ console.log('click el'); } }, dblclick: { element: 'body', fn: function(){ console.log('dblclick body'); } } } 方法 getId() : String 获得组件的id getXType() : String 获得组件的xtype getHeight() : Number 获得组件的当前高度 getWidth() : Number 获得组件的当前宽度 setHeight(Number height) 设置组件的高度 setWidth( Number width ) 设置组件的宽度 getSize() : Object 获取这个组件的底层元素的当前大小. {width:元素宽度, height:元素高度} setSize(Number width, Number height ) 设置组件的宽度和高度 getPosition([Boolean local]) Number[] 获得组件当前的x,y坐标,返回一个数组,参数为是否返回元素的左侧和顶部位置,而不是x,y坐标 setPosition( Number left, Number top, [Boolean/Object animate] ) 设置组件的 left 和 top 值 disable([Boolean silent]) 禁用组件,参数表示是否解除触发disable事件 enable([Boolean silent]) 启用组件,参数表示是否解除触发enable事件 setDisabled(Boolean disabled) 启用或禁用组件 setVisible(Boolean visible) 显示或隐藏组件 destory() 销毁组件 show( [String/Ext.Element animateTarget], [Function callback], [Object scope] ) 显示组件 showAt( Number x, Number y, [Boolean/Object animate] ) 显示组件在特定XY位置 nextSibling([String selector]) : Ext.Component 返回此组件的下一个同级组件.参数为过滤器 previousSibling( [String selector] ) : Ext.Component 返回此组件的前一个同级组件.参数为过滤器 up( [String selector] ) : Ext.container.Container 查找匹配简单选择器的祖先容器. isDisabled() : Boolean 当前组件是否被禁用 isHidden() : Boolean 当前组件是否被隐藏 isVisible([Boolean deep]) : Boolean 如果当前组件可见, 返回true.参数为查询所有父元素的可见状态 hasCls(String className) : Boolean 检查该元素的 DOM 节点上的指定 CSS 类是否存在 isXType(String xtype, [Boolean shallow]) : Boolean 检验此组件是否是指定的xtype或其子类,shallow为true表示组件是否就是指定xtype focus([Boolean selectText], [Boolean/Number delay]) 获得焦点 selectText 是否选择此组件中的文本 delay 延迟焦点的毫秒数 removeListener( String eventName, Function fn, Object scope ) 移除事件的处理函数 addListener( String/Object eventName, [Function fn], [Object scope], [Object options] ) 向组件添加一个事件处理函数 事件 blur( Ext.Component this, Ext.EventObject The, Object eOpts ) 组件失去焦点时触发. focus( Ext.Component this, Ext.EventObject The, Object eOpts ) 组件获取焦点时触发 容器(Ext.container.Container) 任何可能包含其它Ext.Component组件的基类 最常用的的容器类有Ext.panel.Panel,Ext.window.Window和 Ext.tab.Panel。 配置选项 defaultType : String 当通过简写创建子元素时,子元素的默认xtype defaults : Object/Function 设置所有子元素的默认设置 items : Object/Object[] 子组件或集合 将会自动添加到容器中去 layout : String/Object 配置子组件的布局 属性 items : Ext.util.AbstractMixedCollection 子组件的所有集合. 方法 add( Ext.Component[]/Ext.Component... ) : Ext.Component[]/Ext.Component Adds 向当前容器中添加 Component(s) insert( Number index, Ext.Component comp ) : Ext.Component 添加容器到指定的位置 remove( Ext.Component/String comp, [Boolean autoDestroy] ) : Ext.Component 从父容器移除子组件 removeAll( [Boolean autoDestroy] ) : Ext.Component[] 从父容器中移除所有子组件 update( String/Object htmlOrData, [Boolean loadScripts], [Function callback] ) 刷新组件的内部区域 findParentByType( String/Ext.Class xtype ) : Ext.container.Container 通过xtype或类 查找第一个符合条件的父组件 child( [String selector] ) 获取符合匹配选项的第一层子组件 query( [String selector] ) : Ext.Component[] 用匹配选项检索容器的结构树,参数:符合Ext.ComponentQuery的匹配选项选择器 如果没有指定,所有的子项全部检索 queryBy( Function fn, [Object scope] ) : Ext.Component[] 检索符合传递的函数条件的子组件 queryById( String id ) : Ext.Component 在任何层级上查找符合条件的id或者是itemId的组件 getComponent( String/Number comp ) 查找子组件,参数为组件的 itemId 或 id 或 索引 布局 配置选项 layout : String/Object 配置子组件的布局 用法: layout: 'vbox' 或 layout: { type: 'vbox', align: 'left' } 布局类型(详情参见Ext.layout.container下的类) Auto 按顺序将子组件渲染到在容器中,不考虑子组件的大小和定位 card 层叠放置,每次铺满父容器显示一个,可通过自定义按钮切换到下一个(类似于选项卡,无切换按钮) fit 一般只添加一个子元素时使用,铺满整个父元素 hbox 将所有子组件在容器中水平排列,在子元素中使用flex属性控制比例 相关属性 align : String 控制子组件在容器中的对齐方式 top : 各子组件在容器顶部水平对齐(默认值). middle : 各子组件在容器中间水平对齐. stretch : 各子组件的高度拉伸至与容器的高度相等. stretchmax : 各子组件的高度拉伸至与最高的子组件的高度相等. 子元素属性 flex : Number 每个含有flex属性的子项将会被根据当前子项的flex值与所有其他含flex值子项的值的和 的相对比例进行伸缩 vbox 将所有子组件在容器中垂直排列,在子元素中使用flex属性控制比例 相关属性 align : String 控制子组件在容器中的对齐方式 left : 各子组件在容器左边垂直对齐(默认值). center : 各子组件在容器中间垂直对齐. stretch : 各子组件的宽度拉伸至与容器的宽度相等. stretchmax : 各子组件的宽度拉伸至与最宽的子组件的宽度相等. 子元素属性 flex : Number 每个含有flex属性的子项将会被根据当前子项的flex值与所有其他含flex值子项的值的和 的相对比例进行伸缩 column 列布局,把组件水平排列,可有多行,通过在子元素中指定使用columnWidth或width 来指定子元素所占的列宽度 子元素属性 width 绝对长度,单位像素 columnWidth 剩余长度的百分比,小数,总和不为1也可以,表示多行 不同子元素可以混合使用不同的配置选项 border 区域布局,他将页面分隔为west,east,south,north,center这五个部分。 我们需要在其items中指定使用region参数为其子元素指定具体位置,支持多重嵌套面板, 自动在各区域之间产生分隔栏 子元素属性 region : String 位置:取值"north","south", "west","east", "center" (北,南,西,东,中) split : Boolean 是否允许拖动边界调整大小 accordion 手风琴效果,将多个Panel以一种可以展开/收缩的样式排列 相关属性 activeOnTop : Boolean 是否将当前展开面板移动到菜单顶部 hideCollapseTool : Boolean 是否隐藏 展开/隐藏工具按钮,如果为true,titleCollapse将被自动设为'true' titleCollapse : Boolean 是否允许通过点击标题栏的任意位置来展开/收缩子项,如果为false,hideCollapseTool将被自动设为'false' animate : Boolean 面板进行展开/收缩时,是否使用动画效果 fill : Boolean 是否调整 展开的子项高度填充容器高度 multi : Boolean 是否允许同时显示多个子面板 reserveScrollbar : Boolean 此值为true时, 无论垂直滚动条是否需要出现, 都会在页面为垂直滚动条预留出空间 align : String 控制子组件在容器中的对齐方式 left : 默认值 各子组件在容器左边垂直对齐. center : 各子组件在容器中间垂直对齐. stretch : 各子组件的宽度拉伸至与容器的宽度相等. stretchmax : 各子组件的宽度拉伸至与最宽的子组件的宽度相等. anchor 将子元素的位置与父容器大小进行关联固定. 如果容器大小改变, 子项将被重新渲染固定. 子元素属性 anchor 告知布局子项应该如何放置,值为由两个 数值组成的字符串: 水平相对值和垂直相对值 百分比 anchor: '100% 50%' // 子组件的宽度为即等于容器的宽度, 高度为容器的1/2 偏移量 anchor: '-50 -100' // 子组件的宽度为容器的宽度减50px, 高度为容器的高度减100px. 混合使用 anchor: '100% -100' table 将内容渲染到一个HTML的table中. 可以指定列数, 也能够使用rowspan和colspan参数来创建复杂的布局 相关属性 columns : Number 此列表布局中列的总数. 子元素属性 rowspan : Number colspan : Number Form 是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用 这个布局会将表单中所有的输入框纵向的依次的排列, 且宽度与容器宽度相等 注意 相关属性配置到layout对象中,和type属性并列 子元素属性配置到子元素中 面板(Ext.panel.Panel,xtype:panel) 概述 继承于 容器(Ext.container.Container) Panel是一个容器,具有特定的功能和结构组件,使它使能够完美地为面向应用的用户界面创建部件。 面板由以下几个部分组成,一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。 示例 Ext.onReady(function(){ new Ext.panel.Panel({ renderTo:"hello", title:"面板头部header", width:300, height:200, html:'

面板主区域

', tbar:[{text:'顶部工具栏topToolbar'}], bbar:[{text:'底部工具栏bottomToolbar'}], buttons:[{text:"按钮位于footer"}] }); }); 配置选项 title : String 此标题头内容被用于在panel 标题头展现 titleAlign : String 标题的位置,可以设置为"left"(左), "right"(右) 或者 "center"(居中) header : Boolean/Object 通过设置false来阻止Panel的标题头被创建与渲染,默认为undefined。通过配置一个对象 (通过 xtype 来创建) 从而达到用户自定义 Panel 的标题头。 collapsible : Boolean 是否具有可折叠功能 closable : Boolean 是否为这个窗体添加'close'工具按钮允许用户通过点击这个按钮来关闭这个窗体 closeAction : String 当标题头的关闭按钮被单击将'destroy'销毁,'hide'隐藏 tools : Object[]/Ext.panel.Tool[] 添加小图标到Panel头工具区域 dockedItems : Object/Object[] 添加组件到Panel中做为停靠项,可以被安置在Panel的上方,右方,左方或者下方 示例 dockedItems: [{ xtype: 'toolbar', dock: 'top', items: [{ text: 'Docked to the top' }] }] bbar : Object/Object[] 便利的配置。'Bottom Bar'的简写 等价于 dockedItems: [{ xtype: 'toolbar', dock: 'bottom', items: [ { xtype: 'button', text: 'Button 1' } ] }] lbar : Object/Object[] 便利的配置。作为'Left Bar'的简写 rbar : Object/Object[] 便利的配置。作为'Right Bar'的简写 tbar : Object/Object[] 便利的配置。作为'Top Bar'的简写 fbar : Object/Object[] 便利的配置用于为Panel底部添加子组件。作为Footer Bar的简写。 等价于 dockedItems: [{ xtype: 'toolbar', dock: 'bottom', ui: 'footer', defaults: {minWidth: minButtonWidth}, items: [ { xtype: 'component', flex: 1 }, { xtype: 'button', text: 'Button 1' } ] }] buttons : Object/Object[] 便利的配置用于为 Panel 底部添加按钮组。这和fbar的配置意义一致 方法 close( ) 关闭Panel。默认情况下这个方法会将其自身的DOM对象在浏览器中移除,destroys 销毁Panel对象并且销毁该Panel中的子组件。在关闭Panel动作发生之前beforeclose事件被触发,如果 要取消关闭动作则在其事件的... collapse( String direction, [Boolean animate] ) : Ext.panel.Panel 折叠 Panel 体以便将其隐藏。挂靠组与边界平行折叠之后保持其依然可见。触发beforecollapse事件,如果取消 折叠动作在该事件的处理函数中返回false。 direction : String 折叠的方向,必须从下面当中选一个 Ext.Component.DIRECTION_TOP Ext.Component.DIRECTION_RIGHT Ext.Component.DIRECTION_BOTTOM Ext.Component.DIRECTION_LEFT animate : Boolean (optional) True 折叠的时候动态的过度,否则没有动态效果 (默认参照Panel的animCollapse属性配置) expand( Boolean animate ) : Ext.panel.Panel 展开 Panel 使之状态变为可见.触发beforeexpand事件,当处理函数中返回false则展开操作被取消. ... toggleCollapse( ) : Ext.panel.Panel 根据panel的当前状态,执行expand或者collapse操作的快捷方式 相关对象 Ext.panel.Tool 继承于 Ext.Component 这个类用于在Panel的头部显示可视化的小图标。 有25个可设置的图标依照配置type使用。 属性handler配置提供一个方法来响应单击事件。 示例 tools: [{ type: 'help', handler: function(){ // 此处显示帮助的逻辑 } } 配置选项 type : String 工具类型的渲染(小图标),可选值参见文档 handler : Function 当点击工具按钮时被调用的方法 参数 event : Ext.EventObject - 单击事件. toolEl : Ext.Element - 工具元素. owner : Ext.panel.Header - panel的头元素. tool : Ext.panel.Tool - 工具对象 scope : Object handler方法的作用域 tooltip : String/Object tooltip作为工具按钮的提示 tooltipType : String tooltip使用的类型,可使用'title',默认'qtip' 事件 click( Ext.panel.Tool this, Ext.EventObject e, Object eOpts ) 当工具按钮被点击是触发 工具栏(Ext.Toolbar,xtype: toolbar) 继承于 Ext.container.Container 工具栏上可以存放按钮、文本、分隔符等内容。 通过面板的tools 配置选项往面板头部加入预定义的工具栏选项 示例 Ext.create('Ext.toolbar.Toolbar', { renderTo: document.body, width : 500, items: [ { text: '按钮' // 默认的工具栏类型 xtype: 'button' }, { xtype: 'splitbutton', text : '分割按钮' }, '->', // 等同 { xtype: 'tbfill' },使用右对齐容器 { xtype : 'textfield', name : 'field1', emptyText: '输入搜索词' }, '-', // 等同 {xtype: 'tbseparator'} 添加垂直分隔条 'text 1', // 等同 {xtype: 'tbtext', text: 'text1'} { xtype: 'tbspacer' }, // 等同 ' ' 创建空格 'text 2', { xtype: 'tbspacer', width: 50 }, // 添加一个50像素的空格 'text 3' ] }); 某些项可以通过快捷字符串创建: 捷径 xtype Class 描述 -> tbfill Ext.toolbar.Fill 使用右对齐容器 - tbseparator Ext.toolbar.Separator 添加垂直分隔条在工具栏之间 tbspacer Ext.toolbar.Spacer 添加横空格在元素之间 ViewPort(Ext.container.Viewport,xtype:viewport) 概述 继承于Ext.container.Container VeiwPort 代表整个浏览器显示区域,该对象自动渲染到页面的body 区域,一个页面中只能有一个ViewPort 实例 如果内部的子面板要实现滚动条, 需要在子元素中配置autoScroll属性 默认布局为border 示例 Ext.onReady(function(){ new Ext.Viewport({ layout:"border", items:[ { title:"面板", region:"north", height:100, html:"

网站后台管理系统!

" }, { title:"菜单", region:"west", width:200, collapsible:true, html:"菜单栏" }, { xtype:"tabpanel", region:"center", items:[ {title:"面板1",html:'111'}, {title:"面板2",html:'222'} ] } ] }); }); 窗口(Ext.window.Window,xtype:window) 继承于Ext.panel.Panel 窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性 示例 Ext.create('Ext.window.Window', { title: 'Hello', height: 200, width: 400, layout: 'fit', expandOnShow : true, items: { xtype: 'grid', border: false, columns: [{header: 'World'}], store: Ext.create('Ext.data.ArrayStore', {}) // 一个假的空的数据存储 } }).show(); 配置选项 maximizable : Boolean 是否显示最大化按钮 minimizable : Boolean 是否显示最小化按钮 maximized : Boolean 初始状态是否为最大化 modal : Boolean 是否为有模式的窗口,即阻止用户对背后窗口的操作 resizable : Boolean/Object 是否允许调整窗口大小 draggable : Boolean 是否允许拖动窗口位置,通常需要设置窗口位置 x : Number 窗口初始状态左上角的横坐标 y : Number 窗口初始状态左上角的纵坐标 事件 maximize( Ext.window.Window this, Object eOpts ) 在窗口最大化后触发。 minimize( Ext.window.Window this, Object eOpts ) 在窗口最小化后触发 resize( Ext.window.Window this, Number width, Number height, Object eOpts ) 在窗口被调整之后触发 restore( Ext.window.Window this, Object eOpts ) 当窗体在最大化之后被恢复到他以前的大小和位置是触发 对话框(Ext.MessageBox) 此类是Ext.window.MessageBox类的单例,Ext.window.MessageBox类继承于Ext.window.Window Ext.MessageBox可简写为Ext.Msg 提示框 alert( String title, String msg, [Function fn], [Object scope] ) fn 回调函数 scope 回调函数被执行的范围 示例 Ext.MessageBox.alert("请注意","用户名不能为空"); 确认框 confirm( String title, String msg, [Function fn], [Object scope] ) fn 回调函数 scope 回调函数被执行的范围 示例 Ext.MessageBox.confirm("请注意","确定要删除这条记录吗",function(button){ if(button=='yes'){ Ext.MessageBox.alert("结果","你点了'yes'"); }else if(button=='no'){ Ext.MessageBox.alert("结果","你点了'no'"); } }); 输入框 prompt( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] ) fn 回调函数 scope 回调函数被执行的范围 multiline 是否为多行文本,为数字时表示高度的像素 value 默认文本 示例 Ext.MessageBox.prompt("输入提示框","请输入你的新年愿望:",function(button,text){ if(button=="ok"){ alert("你的新年愿望是:"+text); }else if(button=="cancel"){ alert("你放弃了录入!"); } }); 等待对话框 wait( String msg, [String title], [Object config] ) 示例 var win = Ext.MessageBox.wait("操作正在进行...","请稍后"); setTimeout(function(){win.close();},3000); 带进度条的提示框 progress( String title, String msg, [String progressText] ) progressText 显示在进度条内的文本 需要使用Ext.MessageBox.updateProgress方法更新进度 updateProgress( [Number value], [String progressText], [String msg] ) : Ext.window.MessageBox 更新一个进度样式消息盒子的文本和进度条 示例 var win = Ext.MessageBox.progress("请稍后","正在下载第一个","0%"); setTimeout(function(){Ext.MessageBox.updateProgress(0.2,"20%","正在下载第二个");},1000); setTimeout(function(){Ext.MessageBox.updateProgress(0.4,"40%","正在下载第三个");},2500); setTimeout(function(){Ext.MessageBox.updateProgress(0.7,"70%","正在下载第四个");},3000); setTimeout(function(){win.close();},4000); 自定义对话框 show( Object config ) 参数的可选配置选项 buttons : Number (optional) 按位键符包括以下任意常数的总和(false表示没有按钮): Ext.window.MessageBox.OK Ext.window.MessageBox.YES Ext.window.MessageBox.NO Ext.window.MessageBox.CANCEL buttonText : Object 可覆盖对应按钮的文本,对象的选项有 ok,yes,no和cancel fn : Function 回调函数,参数 按钮文本,输入框输入的值 icon : String 图标 modal : Boolean 为假,当消息框被显示时,允许用户与页面的交互 msg : String 提示消息,是html,可使用标签 title : String 标题文本 width : Number 对话框的宽度 更多选项参见文档 示例 Ext.Msg.show({ title: '我是一个快乐的对话框', msg: '我叫你一声你敢答应吗?', width: 300, buttons: Ext.Msg.YESNOCANCEL, buttonText: { yes: '敢', no: '不敢', cancel: '看情况' }, fn: function(btn){ alert(btn); } }); 基本表格(Ext.grid.Panel,xtype:gridpanel,grid) 继承于 Ext.grid.Panel Grid是在客户端上显示大量的表格数据的极佳方式,更容易地进行获取、排序和筛选大量的数据。 Grid是由两个主要部分组成的 - 一个含有全部数据的Store和一个要进行渲染列的集合。 示例 var store = Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:['name', 'email', 'phone'], data:{'items':[ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" }, { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: 'memory', reader: { type: 'json', root: 'items' } } }); Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: store, columns: [ { header: 'Name', dataIndex: 'name' }, { header: 'Email', dataIndex: 'email', flex: 1 }, { header: 'Phone', dataIndex: 'phone' } ], height: 200, width: 400, renderTo: Ext.getBody() }); store是表格的数据源,相当于一张表 columns的header为列名,dataIndex为要显示的表的列 这样可以将store的数据全部显示到表格中 配置选项 store : Ext.data.Store 表格所使用到的Store,该Store将作为其数据源 columns : Ext.grid.column.Column[]/Object 一个column列定义对象数组,它定义了在表格中出现的所有列。 每个列定义提供了关于列的标题文本, 以及关于列的数据来源的定义 selType : String 所使用到的选择模型的xtype rowmodel 一次选择一行(默认) cellmodel 一次选择一列 checkboxmodel 复选框样式,可选中和取消 如果存在具体配置,要使用selModel selModel : Ext.selection.Model/Object 一个selection model实例或配置对象 header : Boolean/Object 通过配置一个对象 (通过 xtype 来创建) 从而达到用户自定义 Panel 的标题头,字符串被当做列名 emptyText : String 当Store为空时,使用默认文本(接受html标签)来显示在Panel的body区域 enableColumnMove : Boolean 设置为false来禁用拖动表格中的列 enableColumnResize : Boolean 设置为false来禁用表格中列的大小调节功能。 forceFit : Boolean 设置为true,则强制列自适应成可用宽度。它们的宽度成比例地改变,以便采用内容的整个宽度。 multiSelect : Boolean 设置为true则启用'MULTI'多行选择模式。 rowLines : Boolean 设置为false则取消行的框线样式 columnLines : Boolean 添加列的框线样式 sortableColumns : Boolean 设置为false则禁用通过单击标题和排序菜单项来进行列排序 事件 事件很多,参见文档 相关类 列(Ext.grid.column.Column,xtype: gridcolumn) 继承于 Ext.container.Container 此类用于对Ext.grid.Panel某列的定义,它包含了表头的配置和单元格的配置 配置选项 text : String 表头该列的显示名称 align : String 设置列头及单元格的对齐方向。 可取值: 'left', 'center', and 'right'。 sortable : Boolean 控制列头是否可以排序 hideable : Boolean 控制该列是否可以通过列菜单隐藏。 menuDisabled : Boolean 控制是否禁用列菜单。 draggable : Boolean 控制是否可以拖拽改变各列的顺序。 groupable : Boolean 控制是否可以按该列分组,参见Ext.grid.feature.Grouping dataIndex : String 指定Ext.data.Store的某个field来作为该列的value值。 renderer : Function 指定函数,把value值转换为可显示的内容。 emptyCellText : String 空单元格(取值为undeifned,null或空字符串)的显示内容。 方法 getColumnCount( ) 返回HeaderContainer中grid columns子项的个数 事件 参见文档 数据存储器 比较重要,专门负责和服务器交互,单独拿出来,参见后面 其它功能 编辑 Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: store, columns: [ { header: 'Name', dataIndex: 'name', field: 'textfield' }, { header: 'Email', dataIndex: 'email', flex: 1, field: { xtype: 'textfield', allowBlank: false } }, { header: 'Phone', dataIndex: 'phone' } ], selType: 'cellmodel', plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ], height: 200, width: 400, renderTo: Ext.getBody() }); 我们指定了一个field属性。对于Name列, 变为一个文本框编辑值。对于Email列,传递进去了allowBlank: false,将提供非空验证。Phone列不可被编辑.field的值为表单组件的xtype 列编辑: 单元格内编辑,在grid中指定selType配置项使用'cellmodel', 并且也要创建Ext.grid.plugin.CellEditing插件实例, 在这里配置了鼠标单击后激活单元格的编辑器。 行编辑: 基于行的编辑,在grid中指定selType配置项使用'rowmodel', 并且也要创建Ext.grid.plugin.RowEditing插件实例, 在这里配置了鼠标单击后激活单元格的编辑器。 分组 var store = Ext.create('Ext.data.Store', { storeId:'employeeStore', fields:['name', 'seniority', 'department'], groupField: 'department', data: {'employees':[ { "name": "Michael Scott", "seniority": 7, "department": "Management" }, { "name": "Dwight Schrute", "seniority": 2, "department": "Sales" }, { "name": "Jim Halpert", "seniority": 3, "department": "Sales" }, { "name": "Kevin Malone", "seniority": 4, "department": "Accounting" }, { "name": "Angela Martin", "seniority": 5, "department": "Accounting" } ]}, proxy: { type: 'memory', reader: { type: 'json', root: 'employees' } } }); Ext.create('Ext.grid.Panel', { title: 'Employees', store: store, columns: [ { header: 'Name', dataIndex: 'name' }, { header: 'Seniority', dataIndex: 'seniority' } ], features: [{ftype:'grouping'}], width: 200, height: 275, renderTo: Ext.getBody() }); 滚动加载数据 分页 数据存储器(Ext.data.Store, xtype: store) Store 大意是: 仓库、存储的意思. Store类可以理解为一个客户端缓存的表,用于存储 Model 对象. Stores 通过一个代理 Proxy 来加载数据, 并提供函数来 排序, 过滤 以及查询 内部所包含的 model 实例. 创建Store非常简单 - 我们只需要传入 Model 以及用来加载/保存 数据的Proxy作为配置项即可 Ext.define('User', { extend: 'Ext.data.Model', fields: [ {name: 'firstName', type: 'string'}, {name: 'lastName', type: 'string'}, {name: 'age', type: 'int'}, {name: 'eyeColor', type: 'string'} ] }); var myStore = Ext.create('Ext.data.Store', { model: 'User', proxy: { type: 'ajax', url: '/users.json', reader: { type: 'json', root: 'users' } }, autoLoad: true }); 一般可以简写为 var myStore = Ext.create('Ext.data.Store', { fields: ['firstName','lastName','age','eyeColor'], proxy: { type: 'ajax', url: '/users.json', reader: { type: 'json', root: 'users' } }, autoLoad: true }); 配置选项 storeId : String 当前store对象的唯一标识ID,可使用Ext.data.StoreManager.lookup(storeId)创建store对象 model : String 当前store对象的Model数据模型的名称 fields : Object[] 此参数可以用来代替model参数. fields值应该是一个Ext.data.Field属性对象的集合. 对于稍复杂的情况,应使用model参数 示例 fields : ['name','age'] proxy : String/Ext.data.proxy.Proxy/Object 此Store使用的Proxy data : Object[]/Ext.data.Model[] 本地加载的数组,或者Model 实例数组,或者数据对象数组 autoLoad : Boolean/Object 如果data属性未定义, 并且autoLoad值为'true'或对象, 则此store的load方法将在创建后自动执行. 如果autoLoad值是一个对象, 这个对象将 作为参数传递给load方法 pageSize : Number 组成一页'page'的记录数量. groupField : String 需要分组的字段 属性 currentPage : Number Store 最后一次load的页 data : Ext.util.MixedCollection 持有 store 的本地缓存记录的 对象集合 方法 count( [Boolean grouped] ) : Number 获取 store 中Model的数量,只有过滤后通过的元素会被计算进来,参数跟分组相关 each( Function fn, [Object scope] ) 为 Store中的每条记录 record 调用指定的函数 getCount() : Number 获取store中记录的数量(当前页) getTotalCount() : Number 获取store中记录的数量(所有页) getSelectionModel() : Ext.selection.Model 返回正在使用的选择模型,如果它没有创建,则通过配置创建它。 load( [Object/Function options] ) 通过配置的 proxy 加载数据到Store 中,参数为回调函数 回调函数的参数 records : Ext.data.Model[] 记录数据。 operation : Ext.data.Operation 操作本身 success : Boolean 操作成功完成时为true loadPage( Number page, Object options ) 加载给定 'page' 的数据 loadData( Ext.data.Model[]/Object[] data, [Boolean append] ) 直接加载一个数组的数据到 Store 中. 相关对象 字段(Ext.data.Field) 配置选项 name : String Model中字段的映射名称. 如果除了'name'以外没有其他属性需要定义, 那么可以只用一个'name'值的字符串来定义这个字段 convert : Function 一个函数, 用来将Reader读取的值转换成存储到Model中的对象 type : String/Object 字段的数据类型, 用于在没有定义convert时, 把接收数据转换为存储值进行自动类型转换. 用一个字符串来定义. auto(默认值, 意味着无convert方法),string,int,float,boolean,date mapping : String/Number 从原始数据 对象中 获取用于填充此字段的 对应字段名称 defaultValue : Object 不能从数据中读取的字段的默认值 dateFormat : String 用于当type为"date"时将获取的数据转换为Date对象 persist : Boolean 设为'false'时, 将此字段从模型的Ext.data.Model.modified字段中排除出去,只用于显示,不用于提交 创建示例 'age' {name:'age',type:'int'} 选择模型(Ext.selection.Model) 记录在一个数据绑定组件内部被选择的记录 方法 getCount() : Number 返回被选择记录的条数 getLastSelected() 返回最后被选择的记录。 getSelection() : Ext.data.Model[] 返回一个当前被选择的记录的数组 getSelectionMode() : String 返回当前选择模式(selectionMode) getStore() : Ext.data.AbstractStore 获得当前实例的store。 hasSelection() : Boolean 如果有任何一个被选择的记录返回真 select( Ext.data.Model[]/Number records, [Boolean keepExisting], [Boolean suppressEvent] ) 选择一个记录实例通过记录实例或者索引 数据模型(Ext.data.Model) Model代表应用程序管理的一些对象,被Store使用 Model定义为字段、任意方法和与模型相关的属性的集合 配置选项 fields : Object[]/String[] 本模型的字段 idProperty : String 作为本模型唯一的id的字段的名字 proxy : String/Object/Ext.data.proxy.Proxy 本模型使用的代理 validations : Object[] 本模型的验证器的数组。 方法 get( String fieldName ) : Object 返回给定字段的值 getData( Boolean includeAssociated ) : Object 获取每个字段的所有值,并将它们作为 一个对象返回。参数为是否包含关联对象 getFields() : Ext.data.Field[] 返回一个定义本模型结构的Field数组定义 字段根据Model类定义排序 getId() : Number/String 返回idProperty定义的分配给本模型实例的唯一的ID。 getProxy() : Ext.data.proxy.Proxy 返回本模型的代理 set( String/Object fieldName, Object newValue ) : String[] 设置给定字段的值 setId( Number/String id ) 设置本模型实例的id validate() : Ext.data.Errors 使用所有的validations验证当前的数据。 代理类(Ext.data.proxy.Proxy, proxy: proxy) 概述 Store通过Proxy加载和保存Model数据 在此Proxy的主要类型有2种 - Client 和 Server. 所有的子类都在Ext.data.proxy命名空间下 最常用子类是Server类型中的Ext.data.proxy.Ajax,将请求通过ajax发送到同一个域上服务器 配置选项 model : String/Ext.data.Model 要绑定到该Proxy上的Model模型。必选,可从父组件继承 reader : Object/String/Ext.data.reader.Reader 读取器,用来对服务器端响应数据进行解码,或从客户端读取数据 Proxy的默认Reader为JsonReader. 在简写创建时需要指定type属性 proxy: { type: 'ajax', url : '/user' } type属性用来确定实例化的类,如ajax表示Ext.data.proxy.Ajax类 Ajax数据代理类(Ext.data.proxy.Ajax, proxy:ajax) 使用AJAX请求来从服务器获取数据,然后通常将它们放入 Store中. 继承于Ext.data.proxy.Server,父类Ext.data.proxy.Server继承于Ext.data.proxy.Proxy 配置选项 url : String 请求数据对象的URL 默认所有读数据请求的方式为GET, 而所有写请求的方式为POST extraParams : Object 将在每次请求中包含的额外参数 headers : Object 添加到Ajax请求的头信息. 默认为undefined timeout : Number 等待响应的毫秒数。默认为30000毫秒(30秒) 属性 actionMethods : Object action名称到HTTP请求方式的映射 方法 getMethod( Ext.data.Request request ) : String 返回request对象对应的HTTP请求方式 事件 exception( Ext.data.proxy.Proxy this, Object response, Ext.data.Operation operation, Object eOpts ) 当服务器端server返回一个异常时触发 读取器(Ext.data.reader.Reader) 概述 Readers通常用于翻译数据,使其被加载为 Model 实例或Store, 该数据一般是一个AJAX请求的响应数据 一般情况下不需要直接创建一个Reader实例, 因为Reader总是和Proxy一起使用, 且其将使用Proxy的reader 配置属性配置 子类有Json,Xml,Array,自动解析不同格式的数据并填充到store中,所有的子类都在Ext.data.reader命名空间下 配置选项 root : String 要解析的数据 所在的集合的名称 implicitIncludes : Boolean 设为true,则自动解析响应对象中嵌套在其他models的models idProperty : String 主键对应的属性的名称 successProperty : String 检索'success'标识的属性名称,该标识属性的值标示指定请求是否成功 totalProperty : String 检索数据集中记录总数的属性名称. 只有在所有的数据集没有一次得到,而是由服务端分页得到时,该属性才需要用。 messageProperty : String 包含响应信息的属性名称.该属性为可选的. 在简写创建时需要指定type属性 reader: { type: 'json', root: 'users' } type属性用来确定实例化的类,如json表示Ext.data.reader.Json类 事件 exception( Ext.data.reader.Reader reader, XMLHttpRequest response, Ext.data.ResultSet error, Object eOpts ) 当reader从服务端接收到不正确的编码数据时触发 JSON读取器(Ext.data.reader.Json, reader: json) 继承于 Ext.data.reader.Reader 读取服务端响应的JSON格式的数据,自动解析并填充到store中 配置选项 record : String JSON响应中的数据的位置,用于记录数据发现其本身位置. 在返回数据中包含元数据时,例 "users": [{ "id": "ed-spencer-1", "value": 1, "user": {"id": 1,"name": "Ed Spencer"} }] 其中的每个“user”项目中都包含有额外元数据(例如本例中的’id‘和‘value’) 则要添加配置选项 root:"users", record:"user" 菜单(Ext.menu.Menu,xtype: menu) 继承于Ext.panel.Panel 默认的,菜单是绝对的定位,浮动组件.子元素默认为菜单项 示例 Ext.create('Ext.menu.Menu', { width: 100, margin: '0 0 10 0', floating: false, // 通常你想设置这个为真 (默认的) renderTo: Ext.getBody(), // 通常由它的包含容器呈现 items: [{ text: '菜单1' },{ text: '菜单2', menu: { items:[{ text: '菜单1' },{ text: '菜单2' }] } },{ text: '菜单3' }] }); 配置选项 allowOtherMenus : Boolean 为真时,在同一时间,允许多个菜单被显示 defaultAlign : String 为此相对于元素的起源的菜单的默认的Ext.Element#getAlignToXY锚位置值 floating : Boolean 是否为绝对定位 ignoreParentClicks : Boolean 为真时,忽略在这个作为一个项目的菜单中点击任何项目 (显示一个子菜单),当点击父项目时, 使子菜单没有被驳回。 plain : Boolean 为真时,删除菜单左侧阴刻线向下并且不缩进组件项目 showSeparator : Boolean 为真显示图片分离器 属性 parentMenu : Ext.menu.Menu 这个菜单的父菜单。 事件 click( Ext.menu.Menu menu, Ext.Component item, Ext.EventObject e, Object eOpts ) 当这个菜单被点击时触发 mouseenter( Ext.menu.Menu menu, Ext.EventObject e, Object eOpts ) 当鼠标进入这个菜单时触发 mouseleave( Ext.menu.Menu menu, Ext.EventObject e, Object eOpts ) 当鼠标存留在这个菜单时触发 mouseover( Ext.menu.Menu menu, Ext.Component item, Ext.EventObject e, Object eOpts ) 当鼠标悬停在该菜单时触发 相关对象 菜单项(Ext.menu.Item) 继承于Ext.Component 配置属性 handler : Function 当一个菜单项目被点击时触发的函数 hideOnClick : Boolean 当这个项目被点击时,是否不隐藏其所在的菜单。默认为‘true’ menuExpandDelay : Number 在鼠标在这个项目之上之后,这个项目的子项目扩展之前延迟的毫秒数。默认为200。 ... menuHideDelay : Number 在鼠标从这个项目上离开之后,这个项目的子菜单隐藏之前延迟的毫秒数。默认为200 text : String 在这个项目中显示的 text/html 属性 menu : Ext.menu.Menu 此菜单项的子菜单 parentMenu : Ext.menu.Menu 菜单项所在的父菜单。 分割线(Ext.menu.Separator) 可用"-"快捷表示 示例 右键菜单:添加contextmenu事件,将菜单showAt(e.getXY()) 树(Ext.tree.Panel, xtype: treepanel) 继承于 Ext.panel.Panel TreePanel提供树形结构的UI表示的树状结构数据,一个TreePanel必须绑定一个Ext.data.TreeStore或提供root选项 示例 var store = Ext.create('Ext.data.TreeStore', { root: { children: [ { text: "detention", leaf: true }, { text: "homework", children: [ { text: "book report", leaf: true }, { text: "alegrbra", leaf: true} ] }, { text: "buy lottery tickets", leaf: true } ] } }); Ext.create('Ext.tree.Panel', { title: 'Simple Tree', width: 200, height: 150, store: store, rootVisible: false, renderTo: Ext.getBody() }); 配置选项 store : Ext.data.Store 树所使用到的Store,该Store将作为其数据源 columns : Ext.grid.column.Column[]/Object 一个column列定义对象数组,它定义了在表格中出现的所有列。 每个列定义提供了关于列的标题文本, 以及关于列的数据来源的定义 selType : String 所使用到的选择模型的xtype rowmodel 一次选择一行(默认) cellmodel 一次选择一列 checkboxmodel 复选框样式,可选中和取消 如果存在具体配置,要使用selModel selModel : Ext.selection.Model/Object 一个selection model实例或配置对象 header : Boolean/Object 通过配置一个对象 (通过 xtype 来创建) 从而达到用户自定义 Panel 的标题头,字符串被当做列名 emptyText : String 当Store为空时,使用默认文本(接受html标签)来显示在Panel的body区域 enableColumnMove : Boolean 设置为false来禁用拖动表格中的列 enableColumnResize : Boolean 设置为false来禁用表格中列的大小调节功能。 forceFit : Boolean 设置为true,则强制列自适应成可用宽度。它们的宽度成比例地改变,以便采用内容的整个宽度。 multiSelect : Boolean 设置为true则启用'MULTI'多行选择模式。 rowLines : Boolean 设置为false则取消行的框线样式 sortableColumns : Boolean 设置为false则禁用通过单击标题和排序菜单项来进行列排序 animate : Boolean true,启用expand/collapse动画 displayField : String 在模型的字段,将用作节点的文本 lines : Boolean false,树用的线置为disable root : Ext.data.Model/Ext.data.NodeInterface/Object 在这个TreePanel上,允许你不指定一个store。这有助于创建一个简单的树,预加载的数据而无需指定一个TreeStore和Model rootVisible : Boolean 是否显示根节点root useArrows : Boolean true,在tree中使用三角样式的箭头,而不是加减号 方法 collapseAll( [Function callback], [Object scope] ) 折叠所有的节点 expandAll( [Function callback], [Object scope] ) 展开所有节点 getChecked( ) : Ext.data.NodeInterface[] 取得选中记录的数组。 ... getRootNode( ) : Ext.data.NodeInterface 返回树的根节点。 expandPath( String path, [String field], [String separator], [Function callback], [Object scope] ) 展开一个特殊节点路径的树。 selectPath( String path, [String field], [String separator], [Function callback], [Object scope] ) 展开一个特殊节点路径的树,然后选中。 setRootNode( Ext.data.Model//Object root ) : 设置树的根节点。 事件 itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object eOpts ) 选项的单击事件 单击选项时触发 相关对象 Ext.data.TreeStore 继承于 Ext.data.Store TreeStore是一个允许内嵌数据的存储区实现,它为加载节点提供了一些方便的方法, 并能够使用分层树状结构来结合一个store 配置选项 rootVisible : Boolean 设置为false,在本store的数据集合中不包含根节点 clearOnLoad : Boolean 在加载之前删除先前已经存在的子节点。默认为true root : Ext.data.Model/Ext.data.NodeInterface/Object 当前store的根节点。 方法 getNodeById( Object id ) : Ext.data.NodeInterface 通过id获取记录的节点 Ext.data.NodeInterface 本类是一个应用到Model的原型上的方法集合,使其具有Node API。这意味着树状模型 具有所有与树相关的方法 配置选项 allowDrag : Boolean 设置为false禁止拖动本节点 allowDrop : Boolean 设置为false禁止(将其它节点)拖到本节点。 ... checked : Boolean 设置为true或者false,在节点旁显示一个复选框。 children : [] 子节点数组 expandable : Boolean 设置为true允许展开和折叠当前节点。 ... expanded : Boolean 是否初始为展开状态。 href : String 链接URL icon : String 本节点的图标的URL index : Number 节点在父节点下的位置 isFirst : Boolean True如果本节点是第一个节点。 isLast : Boolean True如果本节点是最后的节点。 leaf : Boolean 设置为true表明本节点没有子节点。不会为本节点渲染展开图标或箭头,默认false parentId : String 父节点ID qtip : String 本节点上显示的Tooltip文本。 qtitle : String Tooltip标题。 root : Boolean True如果本节点是根节点。 text : String 本节点标签上的文本。 属性 childNodes : Object 本节点的子节点数组。如果本节点没有子节点,数组为空。 firstChild : Object 本节点的第一个子节点的引用。如果本节点没有子节点,返回null。 isNode : Boolean true在本类和其子类中标记一个对象为一个实例化的Node节点。 ... lastChild : Object 本节点的最后子节点的引用。如果本节点没有子节点,返回null。 nextSibling : Object 本节点的下一个兄弟节点的引用。如果本节点没有下一个兄弟节点,返回null。 parentNode : Object 本节点的父节点的引用。如果本节点是根节点,返回null。 previousSibling : Object 本节点的上一个兄弟节点的引用。如果本节点没有上一个兄弟节点,返回null。 方法 appendChild( Ext.data.NodeInterface/Ext.data.NodeInterface[] node ) : Ext.data.NodeInterface 插入一个或多个节点作为本节点的最后子节点 collapse( [Boolean recursive], [Function callback], [Object scope] ) 折叠本节点。 ... collapseChildren( [Function recursive], [Function callback], [Object scope] ) 折叠本节点的所有子节点。 ... contains( Ext.data.NodeInterface node ) : Boolean 如果本节点是node节点的祖先节点,返回true expand( [Boolean recursive], [Function callback], [Object scope] ) 展开本节点。 ... expandChildren( [Boolean recursive], [Function callback], [Object scope] ) 展开本节点所有的子节点。 ... findChild( String attribute, Object value, [Boolean deep] ) : Ext.data.NodeInterface 查找属性名为attribute值为指定的value的第一个子节点。 ... findChildBy( Function fn, [Object scope], [Boolean deep] ) : Ext.data.NodeInterface 通过自定义函数查找匹配的第一个子节点。 ... getChildAt( Number index ) : Ext.data.NodeInterface 返回指定位置的子节点。 ... getPath( [String field], [String separator] ) : String 获取当前节点相对于根节点的层级路径。 ... hasChildNodes( ) : Boolean 如果节点有子节点返回true,否则返回false isExpanded( ) : Boolean 如果本节点是展开的,返回true ... isFirst( ) : Boolean 如果本节点是其父节点的第一个子节点,返回true ... isLast( ) : Boolean 如果本节点是其父节点的最后子节点,返回true ... isLeaf( ) : Boolean 如果本节点是叶子节点,返回true isRoot( ) : Boolean 如果本节点是根节点,返回true removeChild( Ext.data.NodeInterface node, [Boolean destroy] ) : Ext.data.NodeInterface 从本节点中移除一个子节点 事件 参见文档 选项卡(Ext.tab.Panel, xtype: tabpanel) 继承于 Ext.panel.Panel 默认子元素类型:面板,默认布局:card 示例 new Ext.tab.Panel({ renderTo : "hello", width : 300, height : 200, items : [ {title:'选项卡1',html:'我是面板1'}, {title:'选项卡2',html:'我是面板2'} ] }); 配置属性 activeTab : String/Number/Ext.Component 最初被激活的选项卡 maxTabWidth : Number 一个选项卡的最大宽度。 minTabWidth : Number 一个选项卡的最小宽度 plain : Boolean true时 不在选项卡栏显示背景 tabPosition : String 选项卡栏的位置。能为'top' 或者 'bottom' deferredRender : Boolean 是否在打开时再渲染面板内容(默认为true) 动态添加删除选项卡示例 var i = 2; var panel = new Ext.tab.Panel({ renderTo : "hello", width : 300, height : 200, items : [ {title:'选项卡1',html:'我是面板1'}, {title:'选项卡2',html:'我是面板2'} ], buttons : [ { text:'添加选项卡', handler: function(){ i++; var subPanel = new Ext.panel.Panel({ title:'选项卡'+i, html:'我是面板'+i, closable:true }); panel.add(subPanel); subPanel.show(); } },{ text:'删除当前选项卡', handler: function(){ //这里为什么是panel.items.items,调试可以看出来,但是api看不出来 Ext.each(panel.items.items,function(item,index){ if(item.isVisible()){ panel.remove(item); return false; } }); } } ] }); 其它 可拖动的选项卡 选项卡右键菜单 Ext命名空间 Ext 命名空间(全局对象)封装了所有类、单例和 Sencha 库所提供的实用方法 提供许多常用的方法,从其他类作为 Ext 命名空间内的快捷方式。 例如 Ext.getCmp 就是 Ext.ComponentManager.get 的别名。 常用方法 getBody() 将当前document的body对象当作Ext.Element返回。 get( String/HTMLElement/Ext.Element el ) : Ext.dom.Element 通过id查找现有的Element。get是Ext.dom.Element.get的别名。 getCmp( String id ) : Object 通过id查找现有的Component,Ext.ComponentManager.get方法的简写。 getStore( String/Object store ) : Ext.data.Store Ext.data.StoreManager.lookup方法的快捷方式 getDoc() 将当前的HTML的document对象作为Ext.Element返回 getDom( String/HTMLElement/Ext.Element el ) 返回dom对象 getHead() 将当前document的head对象当作Ext.Element返回 onReady( Object fn, Object scope, Object options ) Ext.Loader.onReady的别名 create( [String name], [Object... args] ) : Object 实例化类 name 类名或别名 args 将传给类的构造函数 id( [HTMLElement/Ext.Element el], String prefix ) : String 对页面元素生成唯一id,如果该元素已存在id,则不会再生成 el : HTMLElement/Ext.Element (optional) 将要生成id的元素 prefix : String (可选) id的前缀(默认为 "ext-gen") 返回生成的id decode( String json, Boolean safe ) : Object Ext.JSON.decode的简写形式 解码(解析)JSON字符串对象。 json json字符串 safe 解析失败是否抛异常 encode( Object o ) : String Ext.JSON.encode的简写形式 编码对象、 数组或其他值 log( String/Object message ) 记录一条消息。如果存在一个控制台,则它将使用 iterate( Object/Array object, Function fn, [Object scope] ) 迭代一个数组或一个对象 defer( Function fn, Number millis, Object scope, Array args, Boolean/Number appendArgs ) : Number 延迟调用函数 fn : Function 要延迟执行的函数。 millis : Number 延迟时间,以毫秒为单位 (如果小于或等于 0 函数则立即执行) scope : Object (可选) 该函数执行的作用域(this引用)。 如果省略,默认指向window。 args : Array (可选) 覆盖原函数的参数列表 (默认为该函数的参数列表) appendArgs : Boolean/Number (可选) 如果该参数为true,将参数加载到该函数的后面, 如果该参数为数字类型,则将参数将插入到所指定的位置。 each( Array/NodeList/Object iterable, Function fn, [Object scope], [Boolean reverse] ) : Boolean 迭代一个数组或是可迭代的值,在每个元素上调用给定的回调函数 iterable : Array/NodeList/Object 将要迭代的值。 如果这个参数不可迭代,回调函数将只调用一次。 fn : Function 回调函数. 如果返回false, 迭代将停止, 方法返回当前的索引. scope : Object (optional) 指定函数执行的(this 引用)作用域 reverse : Boolean (optional) 反转迭代的顺序(从尾到头循环) 默认为false 回调函数参数 item : Object 数组当前的索引中的元素 index : Number 数组当前的索引 allItems : Array 作为方法第一个参数的数组本身 isBoolean( Object value ) : Boolean 如果传递的值是一个布尔值,则返回 true。 isDate( Object object ) : Boolean 如果传递进来的是一个JavaScript的date对象,返回true,否则返回false。 isDefined( Object value ) : Boolean 如果传递的值已定义,则返回 true。 isElement( Object value ) : Boolean 如果传递的值是 HTMLElement,则返回 true isEmpty( Object value, Boolean allowEmptyString ) : Boolean 如果传递的值为空,则返回 true,否则返回 false。该值被认为是空的如果他或是其一: null undefined a zero-length array a zero-length string (除非 allowEmpt... isFunction( Object value ) : Boolean 如果传递进来的是一个JavaScript的Function,返回true,否则返回false。 isNumber( Object value ) : Boolean 如果传递的值是一个数字,则返回 true。对于非限定数字返回 false。 ... isNumeric( Object value ) : Boolean 验证一个值是数值 按钮(Ext.button.Button, xtype: button) 继承于 Ext.Component 可以使用该组件的创建简单的按钮 当点击按钮时执行handler 内部的代码, 或用 listeners(监听)一些事件 配置选项 text : String 按钮里的文字用 innerHTML textAlign : String 按钮的文本对齐属性(center, left, right) handler : Function 当点击按钮是触发的函数(可以用于代替click事件). href : String 当点击按钮时打开的网址,指定这个配置,将使这个按钮添加 一个 元素 enableToggle : Boolean true时允许被按压(点一次按下,再点一次起来) icon : String 按钮中图标的所在路径 iconAlign : String 按钮框中图标的位置 'top','right','bottom','left' iconCls : String 一个用于设置按钮图标的CSS类, params : Object 当 href被指定后,在网址用需要传输的参数名的对象 scale : String 指定按钮的大小 'small' - 定义按钮的高度为16px. 'medium' - 定义按钮的高度为24px. 'large' - 定义按钮的高度为32px. scope : Object 定义 handler 和 toggleHandler执行时的域范围 默认指向该按钮 属性 disabled : BooleanREADONLY 当按钮不可用时为 True hidden : BooleanREADONLY 当按钮隐藏时为True 事件 click( Ext.button.Button this, Event e, Object eOpts ) 单击按钮的时候触发的事件,在 handler事件调用前触发 mouseout( Ext.button.Button this, Event e, Object eOpts ) 当鼠标离开按钮时触发的事件 mouseover( Ext.button.Button this, Event e, Object eOpts ) 当鼠标在按钮上悬浮的时候触发的事件 toggle( Ext.button.Button this, Boolean pressed, Object eOpts ) 在“按压”状态进行改变的时候触发的事件(只有在enableToggle = true的情况下有效) 表单组件 表单组件xtype form Ext.form.Panel checkbox Ext.form.field.Checkbox combo Ext.form.field.ComboBox datefield Ext.form.field.Date displayfield Ext.form.field.Display field Ext.form.field.Base fieldset Ext.form.FieldSet hidden Ext.form.field.Hidden htmleditor Ext.form.field.HtmlEditor label Ext.form.Label numberfield Ext.form.field.Number radio Ext.form.field.Radio radiogroup Ext.form.RadioGroup textarea Ext.form.field.TextArea textfield Ext.form.field.Text timefield Ext.form.field.Time trigger Ext.form.field.Trigger 表单元素体系 Ext.Component 组件 Ext.container.Container 容器 Ext.panel.Panel 面板 Ext.form.Panel 表单面板 Ext.form.field.Base 表单元素基类 Ext.form.field.Text 文本框 Ext.form.field.ComboBox 下拉列表 Ext.form.field.TextArea 多行文本框 Ext.form.field.Date 日期控件 Ext.form.field.File 文件上传控件 Ext.form.Checkbox 复选框 Ext.form.field.Radio 单选框 Ext.form.field.Hidden 隐藏域 Ext.form.FieldContainer 文本域容器 Ext.form.CheckboxGroup 复选按钮组 Ext.form.RadioGroup 单选按钮组 Ext.form.field.HtmlEditor html编辑器 表单面板(Ext.form.Panel,xtype: form) 继承于Ext.panel.Panel 默认布局anchor,每行一个元素 FormPanel 类接受 Ext.form.Basic 类支持的所有配置项 方法 getForm( ) : Ext.form.Basic 获取此 Panel 包含的 Form getValues( [Boolean asString], [Boolean dirtyOnly], [Boolean includeEmptyText] ) : String/Object 获取form中所有表单域当前值得 快捷函数. 和调用 this.getForm().getValues() 返回的结果是一样的 loadRecord( Ext.data.Model record ) : Ext.form.Basic 载入一个 Ext.data.Model 到表单中 submit( Object options ) 本方法是底层 BasicForm 的 Ext.form.Basic.submit 方法的一个代理 表单(Ext.form.Basic,无xtype) 继承于Ext.util.Observable,不在组件体系 示例 Ext.create('Ext.form.Panel', { title: 'Simple Form', width: 350, // 将会通过 AJAX 请求提交到此URL url: 'save-form.php', // 表单域 Fields 将被竖直排列, 占满整个宽度 layout: 'anchor', defaults: { anchor: '100%' }, // The fields defaultType: 'textfield', items: [{ fieldLabel: 'First Name', name: 'first', allowBlank: false },{ fieldLabel: 'Last Name', name: 'last', allowBlank: false }], // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', formBind: true, //only enabled once the form is valid disabled: true, handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ success: function(form, action) { Ext.Msg.alert('保存成功', action.result.msg); }, failure: function(form, action) { Ext.Msg.alert('操作失败', action.result.msg); } }); } } }], renderTo: Ext.getBody() }); 配置选项 url : String 如果doAction未被提供时使用的表单操作URL method : String 如果操作选项未提供时使用的表单操作的请求方法(GET或POST) baseParams : Object 参数,来传递所有的请求 standardSubmit : Boolean 如果设为true,使用标准HTML表单提交替代XHR(Ajax)式样表单提交 方法 checkValidity( ) 检查整个表单的有效性自动上一次检查后是否发生了变化,如果改变了,触发validitychange事件 reset( ) : Ext.form.Basic 重置表单中的全部字段 submit( Object options ) : Ext.form.Basic dosubmit action的快捷方式。默认使用AJAX提交表单 options url : String method : String params : String/Object 传入参数 headers : Object action设置的请求头 success : Function 成功后将被调用的回调函数 failure : Function 失败后将被调用的回调函数 scope : Object 调用回调函数的作用域 clientValidation : Boolean true在提交前最终调用isValid,确定表单域是否有效 success和failure的参数 form : Ext.form.Basic action : Ext.form.action.Action doAction( String/Ext.form.action.Action action, [Object options] ) : Ext.form.Basic 执行欲定义的动作(Ext.form.action.Action的实现)来执行应用特有的处理 findField( String id ) : Ext.form.field.Field 过id或name查找表单内的特定Ext.form.field.Field getValues( [Boolean asString], [Boolean dirtyOnly], [Boolean includeEmptyText] ) : String/Object 检索表单中字段为一组键值对的,用getSubmitData()方法收集值。 如果相同的name下有多个字段返回多值,将被合并成一个数组 setValues( Object/Object[] values ) : Ext.form.Basic 批量设置表单内的字段值 load( Object options ) : Ext.form.Basic 从服务器加载Ext.data.Model到该表单,参数为action对象. 服务器返回的数据格式 {success:true,data:{name:"张三",password:111}} loadRecord( Ext.data.Model record ) : Ext.form.Basic 加载Ext.data.Model到该表单 hasUpload( ) 如果表单包含文件上传域,返回true。这是用于确定提交表单的方法: 文件上传不能用标准“Ajax”技术执行 isValid( ) 如果表单上的客户端验证成功,返回true markInvalid( Object/Object[]/Ext.data.Errors errors ) : Ext.form.Basic 批量标记表单内无效字段 事件 beforeaction( Ext.form.Basic this, Ext.form.action.Action action, Object eOpts ) 任何action被执行前触发。返回false取消action 相关对象 动作(Ext.form.action.Action) 继承于Ext.Base 配置属性 failure : Function 当接收到一个操作失败数据包,或者在Ajax通讯失败时调用的方法 form : Ext.form.Basic Action调用的BasicForm的实例 headers : Object 附加在AJAX提交和加载请求中的header信息 method : String HTTP方法用于访问所请求的UR params : Object/String 传递的额外的参数 scope : Object 调用回调函数的作用域 success : Function 当接收到一个合法的操作成功数据包时调用的方法 url : String Action调用的URL waitMsg : String 在执行操作期间,调用Ext.window.MessageBox.wait方法时显示的消息 waitTitle : String Ext.window.MessageBox.wait在执行操作期间,显示的标题文本 属性 failureType : String 失败的类型被检查为以下几种类型之一: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, 或者 LOAD_FAILURE response : Object 被用来执行action操作的XMLHttpRequest的原始对象 result : Object 解码好的响应对象,包含一个布尔型的success 参数和其他详细的操作说明参数 type : String Action实例执行的操作类型。当前只支持"submit"和"load"这两种方式 提交动作(Ext.form.action.Submit,formaction: submit) 继承于Ext.form.action.Action 这个类用来处理用Form提交数据,并可以处理应答的返回值。 标准的响应包 success property : Boolean - 必须。 errors property : Object - 可选,包含无效的表单项的错误信息。 json示例 { success: false, errors: { clientCode: "Client not found", portOfLoading: "This field must not be null" } } 响应中的其它数据可在回调函数中通过result属性访问 表单元素基类(Ext.form.field.Base,xtype: field) 继承于Ext.Component 配置选项 name : String 表单项名称 value : Object 表单项的初始化值 inputType : String 输入类型 radio,text,password,file fieldLabel : String 标签。它被附加了labelSeparator, 其位置和大小被labelAlign、 labelWidth和labelPad配置确认。 hideLabel : Boolean 设置为true时,完全隐藏标签元素 labelAlign : String 控制fieldLabel的位置和对齐方式 "left" (默认) - 标签位于域的左边,其文本左对齐。其宽度由labelWidth配置确定。 "top" - 标签位于域的顶端。 "right" - 标签位于域的右边,其文本右对齐。其宽度由labelWidth配置确定。 labelPad : Number 标签和输入域之间的像素间隔 labelSeparator : String 插入到fieldLabel后面的字符。 labelWidth : Number 标签宽度。只适用于 labelAlign设置了“left”或“right” readOnly : Boolean 只读 submitValue : Boolean 是否提交表单值 activeError : String 当第一次显示组件时,显示这个值作为其错误提示消息。 方法 getValue( ) : Object 返回表单项当前的数据值 getRawValue( ) : String 返回表单项的原始值 setValue( Object value ) : Ext.form.field.Field 在表单项中设置一个数据值,并经过变化验证和有效验证 setRawValue( Object value ) : Object 直接设置表单项原始值,不通过 value conversion转换、变化检测和验证。 isValid( ) : Boolean 返回表单值是否验证通过 文本框(Ext.form.field.Text, xtype: textfield) 继承于Ext.form.field.Base 示例 Ext.create('Ext.form.Panel', { title: 'Contact Info', width: 300, bodyPadding: 10, renderTo: Ext.getBody(), items: [{ xtype: 'textfield', name: 'name', fieldLabel: 'Name', allowBlank: false // 表单项非空 }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // 表单项需填email格式 }] }); 配置选项 allowBlank : Boolean 指定为false将会只允许值的长度>0(默认为true) blankText : String 如果allowBlank校验失败时显示的出错文本 emptyText : String 放置到空表单项中的默认文本(默认为null) maxLength : Number 校验时表单项允许输入的最大长度。 maxLengthText : String 如果 *maximum length** 校验失败时显示的出错文本 minLength : Number 输入栏必须的最小长度(默认为0) minLengthText : String 如果 minimum length 校验失败时显示的出错文本 regex : RegExp 在校验时,需要在表单项值纸上进行测试的JavaScript RegExp对象 regexText : String 如果使用了regex并且在校验失败了显示的出错文本 selectOnFocus : Boolean true当表单项获得输入焦点时,将会自动选中所有存在的表单项文本 (默认为false) maskRe : RegExp 一个输入掩码正则表达式,用来过滤不匹配的按键(默认为null) stripCharsRe : RegExp 一个JavaScript RegExp对象,用来在校验之前从值中去除不想要的内容 validator : Function 在表单项校验(getErrors)中自定义的调用的校验函数 ,参数为 值,返回值为boolean vtype : String 一个校验类型名,在Ext.form.field.VTypes中定义 vtypeText : String 一个自定义的出错消息,用来替代为当前表单项所设置的vtype所提供的默认消息 grow : Boolean true 如果此表单项需要自动增长、收缩到它的内容长度(默认为false) 方法 getErrors( Object value ) : String[] 根据表单项的校验规则对值进行校验,并且为所有校验失败的情况返回 一个出错数组。 下拉列表(Ext.form.field.ComboBox, xtype: combobox, combo) 继承于Ext.form.field.Text ComboBox就像是传统的HTML文本 域和