Extjs

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



引入资源
    将ext-4.2.1.883文件夹放入到项目中,然后在文件中添加
    <link rel="stylesheet" href="ext-4.2.1.883/resources/css/ext-all.css">
    <script src="ext-4.2.1.883/ext-all.js"></script>



常用函数
    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:'<h1>Hello,easyjf open source</h1>'};
            var panel=new Ext.Panel(obj);
    渲染组件
        一般在创建组件时使用配置选项renderTo选项使组件渲染到指定的页面元素上(值为元素的id)
            var obj={title:"hello",width:300,height:200,renderTo:'hello',html:'<h1>Hello,easyjf open source</h1>'};
            var panel=new Ext.Panel(obj);
            页面上需要存在元素:<div id="hello">&nbsp;</div>
    在容器中创建子元素组件
        通过给属性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:'<h1>面板主区域</h1>',
                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:"<h1>网站后台管理系统!</h1>"
                    },
                    {
                        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
            当点击按钮时打开的网址,指定这个配置,将使这个按钮添加 一个 <a>元素
        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文本 <input> 域和 <select> 域的综合; 
        用户可以自由的在域中键入,或从下拉选择列表中选择值。 
        默认用户可以输入认可值,即使它没有出现在选择列表中; 
        设置forceSelection为“true”,以阻止自由格式的值,并将其限制在列表中的项。
        示例
            固定选项
                var states = Ext.create('Ext.data.Store', {
                    fields: ['abbr', 'name'],
                    data : [
                        {"abbr":"AL", "name":"Alabama"},
                        {"abbr":"AK", "name":"Alaska"},
                        {"abbr":"AZ", "name":"Arizona"}
                        //...
                    ]
                });

                // Create the combo box, attached to the states data store
                Ext.create('Ext.form.ComboBox', {
                    fieldLabel: 'Choose State',
                    store: states,
                    queryMode: 'local',
                    displayField: 'name',
                    valueField: 'abbr',
                    renderTo: Ext.getBody()
                });
            从服务器读取选项
                {
                    margins:'3 0 0 10',
                    xtype: 'combo',
                    store:{
                        fields: ['code', 'codevalue'],
                        proxy: {
                            type: 'ajax',
                            url: '/dictionary/searchDictionary?classType=15',
                            reader: {
                                type: 'json',
                                root: 'dataList'
                            }
                        }
                    },
                    queryMode: 'remote',
                    displayField: 'codevalue',
                    valueField: 'code',
                    fieldLabel: '客户端类型',
                    width:180,
                    editable:false,
                    labelWidth:70,
                    value:'',
                    name: 'clienttype'
                }
        配置选项
            displayField : String
                名称 对应的字段
            valueField : String
                值 对应的字段
            valueNotFoundText : String
                当没有值时的默认值
            editable : Boolean
                设置为false阻止直接在表单项的文本框中输入字符
            forceSelection : Boolean
                true时,只能从选项中选择值,false时,允许用户手动输入值
            emptyText : String
                放置到空表单项中的默认文本
            allowBlank : Boolean
                是否允许为空
            blankText : String
                如果allowBlank校验失败时显示的出错文本
            multiSelect : Boolean
                是否允许多选
            delimiter : String
                当multiSelect = true时,用于分隔多个选定的项的字符。
            selectOnFocus : Boolean
                true当表单项获得输入焦点时,将会自动全选已输入的文本。只在 editable设置为true有效
            queryParam : String
                store传递键入字符串使用的参数名
            triggerAction : String
                触发器被点击时执行的操作
                'all'       指定allQuery配置项执行查询
                'query'     使用原始值执行查询。
            vtype : String
                一个校验类型名
            vtypeText : String
                一个自定义的出错消息
            maskRe : RegExp
                一个输入掩码正则表达式,用来过滤不匹配的按键(默认为null) Note: 不过滤已经输入的字符
            msgTarget : String
                错误消息文本应该显示的位置。
                qtip 当用户鼠标悬停在该域之上时显示包含了消息的迅速提示。这是默认的。
                title 显示消息在默认浏览器title属性弹出。
                under 在域下方添加一块包含了错误消息的div。
                side 添加一个错误图标在域的右边,鼠标悬停上面时弹出显示消息。
                none 不显示任何错误消息。这可能对如果要实现自定义错误显示有用。
                [element id] 直接把错误消息添加到一个指定元素的innerHTML。
            queryCaching : Boolean
                为true时,当当前查询和上一次查询一样时,该项阻止combo重复查询(本地或远程)。
            queryMode : String
                ComboBox使用已配置的store的模式
                remote  远程
                local   本地
    多行文本框(Ext.form.field.TextArea,xtype: textareafield, textarea)
        继承于Ext.form.field.Text
        示例
            Ext.create('Ext.form.FormPanel', {
                title      : 'Sample TextArea',
                width      : 400,
                bodyPadding: 10,
                renderTo   : Ext.getBody(),
                items: [{
                    xtype     : 'textareafield',
                    grow      : true,
                    name      : 'message',
                    fieldLabel: 'Message',
                    anchor    : '100%'
                }]
            });
        配置选项
            rows : Number
                多行文本框'rows'属性的初始值
            cols : Number
                多行文本框'cols'属性的初始值
            enterIsSpecial : Boolean
                如果你想把回车键当作一个特殊的按键输入值并且当回车键按下时可以触发specialkey事件,需要把enterIsSpecial属性设为true
            growMax : Number
                当grow=true时,多行文本框允许的最大高度
            growMin : Number
                当grow=true时,多行文本框允许的最小高度
            preventScrollbars : Boolean
                true将会阻止出现滚动条,无论表单项中有多少文本
    日期控件(Ext.form.field.Date,xtype: datefield)
        继承于Ext.form.field.Text
        示例
            Ext.create('Ext.form.Panel', {
                renderTo: Ext.getBody(),
                width: 300,
                bodyPadding: 10,
                title: 'Dates',
                items: [{
                    xtype: 'datefield',
                    anchor: '100%',
                    fieldLabel: 'Date',
                    name: 'date',
                    // The value matches the format; will be parsed and displayed using that format.
                    format: 'Y-m-d',
                    value: '1978-4-2'
                }]
            });
        配置属性
            format : String
                默认的日期格式字符串,可以根据使用场景的需要对其进行重写(Y-m-d)
            submitFormat : String
                提交到服务端时使用的日期格式。这个格式必须是符合 Ext.Date.parse要求的字符串
            maxValue : Date/String
                允许的最大日期。可以是一个有效的javascript日期对象,也可以是一个符合格式要求的字符串日期
            maxText : String
                当日期晚于maxValue展示的错误文本
            minValue : Date/String
                允许的最小日期。可以是一个有效的javascript日期对象,也可以是一个符合格式要求的字符串日期。
            minText : String
                当日期早于minValue展示的错误文本
            showToday : Boolean
                设置为false时隐藏日期下拉框页脚的today按钮,并禁用空格键选中当前日期
            invalidText : String
                当日期无效时展示的错误文本
            disabledDays : Number[]
                禁用的日期数组(对应一周中的7天), 从0开始
            disabledDaysText : String
                当日期落在一个无效的日期(对应一周中的7天)时的提示
            altFormats : String
                使用‘|’区分的多种时间格式,这些格式被用来验证用户的输入项是否是匹配的时间格式
            disabledDates : String[]
                字符串格式的禁用日期数组。这些字符串将被用来构建一个动态的正则表达式
    文件上传控件(Ext.form.field.File,xtype: filefield, fileuploadfield)
        继承于Ext.form.field.Text
        示例
            Ext.create('Ext.form.Panel', {
                title: 'Upload a Photo',
                width: 400,
                bodyPadding: 10,
                frame: true,
                renderTo: Ext.getBody(),
                items: [{
                    xtype: 'filefield',
                    name: 'photo',
                    fieldLabel: 'Photo',
                    labelWidth: 50,
                    msgTarget: 'side',
                    allowBlank: false,
                    anchor: '100%',
                    buttonText: 'Select Photo...'
                }],
                buttons: [{
                    text: 'Upload',
                    handler: function() {
                        var form = this.up('form').getForm();
                        if(form.isValid()){
                            form.submit({
                                url: 'photo-upload.php',
                                waitMsg: 'Uploading your photo...',
                                success: function(fp, o) {
                                    Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
                                }
                            });
                        }
                    }
                }]
            });
        配置选项
            buttonText : String
                上传按钮显示的文本值
    复选框(Ext.form.field.Checkbox,xtype: checkboxfield, checkbox)
        继承于Ext.form.field.Base
        示例
            Ext.create('Ext.form.Panel', {
                bodyPadding: 10,
                width: 300,
                title: 'Pizza Order',
                items: [
                    {
                        xtype: 'fieldcontainer',
                        fieldLabel: 'Toppings',
                        defaultType: 'checkboxfield',
                        items: [
                            {
                                boxLabel  : 'Anchovies',
                                name      : 'topping',
                                inputValue: '1',
                                id        : 'checkbox1'
                            }, {
                                boxLabel  : 'Artichoke Hearts',
                                name      : 'topping',
                                inputValue: '2',
                                checked   : true,
                                id        : 'checkbox2'
                            }
                        ]
                    }
                ],
                renderTo: Ext.getBody()
            });
        配置属性
            boxLabel : String
                一个可选的文本标签,它显示在checkbox的旁边
            boxLabelAlign : String
                boxLabel展示在checkbox旁边的相对位置。可使用'before' 和'after'
            checked : Boolean
                如果要让checkbox在渲染后初始化为选中的状态,设置为true
            handler : Function
                当checked值改变的时候调用的函数(可以用来代替change 事件)
            scope : Object
                一个被用来当作作用域('this'的引用)的对象,作用于handler函数
            inputValue : String
                这个值被当作是一般的input元素的值,当form提交时它被作为一个参数提交
            uncheckedValue : String
                当这个属性被配置的时候,当form提交时如果checkbox没有被选中则使用这个值作为checkbox的值提交
        相关对象
            复选按钮组(Ext.form.CheckboxGroup,xtype: checkboxgroup)
                继承于Ext.form.FieldContainer-->Ext.container.Container
                配置属性
                    columns : String/Number/Number[]
                        当使用自动布局显示分组化的checkbox/radio控制器时,指定所使用的列数
                    vertical : Boolean
                        True将跨列分配所包含的控制器,从上到下完全填满一列,然后再开始新的一列
                    fieldLabel : String
                        域标签
                方法
                    getChecked( ) : Ext.form.field.Checkbox[]
                        返回容器中当前被选中的checkbox数组
                    reset( )
                        将表单项的当前值重置为以前加载时的值, 并且清除所有校验信息
    单选框(Ext.form.field.Radio,xtype: radiofield, radio)
        继承于Ext.form.field.Checkbox
        示例
            Ext.create('Ext.form.Panel', {
                title      : 'Order Form',
                width      : 300,
                bodyPadding: 10,
                renderTo   : Ext.getBody(),
                items: [
                    {
                        xtype      : 'fieldcontainer',
                        fieldLabel : 'Size',
                        defaultType: 'radiofield',
                        defaults: {
                            flex: 1
                        },
                        layout: 'hbox',
                        items: [
                            {
                                boxLabel  : 'M',
                                name      : 'size',
                                inputValue: 'm',
                                id        : 'radio1'
                            }, {
                                boxLabel  : 'L',
                                name      : 'size',
                                inputValue: 'l',
                                id        : 'radio2'
                            }
                        ]
                    }]
            });
        方法
            getGroupValue( ) : String
                如果这个radio是radio按钮组的一部分, 将返回被选中的值
        相关对象
            单选按钮组(Ext.form.RadioGroup,xtype: radiogroup)
                继承于Ext.form.CheckboxGroup
                配置选项
                    allowBlank : Boolean
                        True允许组中每个元素都是空的
                    blankText : String
                        如果 allowBlank验证失败,错误文本将显示
    隐藏域(Ext.form.field.Hidden,xtype: hiddenfield, hidden)
        继承于Ext.form.field.Base
    html编辑器(Ext.form.field.HtmlEditor,xtype: htmleditor)
        继承于Ext.Component
        示例
            Ext.create('Ext.form.HtmlEditor', {
                width: 580,
                height: 250,
                renderTo: Ext.getBody()
            });
        配置选项
            defaultValue : String
                放置到编辑器中的一个默认值,用来解决获得焦点的问题
            enableAlignments : Boolean
                启用左对齐、中间对齐、右对齐按钮
            enableColors : Boolean
                启用回退/高亮颜色按钮
            enableFont : Boolean
                启用选择字体按钮。Safari浏览器不支持该属性
            enableFontSize : Boolean
                启用增加/减小字号的按钮
            enableLinks : Boolean
                启用链接创建按钮。Safari浏览器不支持该属性
            enableSourceEdit : Boolean
                启用切换到源编辑按钮。Safari浏览器不支持该属性



Ext.data.Connection
    Connection类用来发送ajax请求
    继承于Ext.Base
    配置属性
        defaultHeaders : Object
            一个包含请求头信息的对象, 此头信息将被添加到每次请求中
        disableCaching : Boolean
            'true'表示在发送GET方式的请求时, 为请求链接添加一个不重复的标识参数以禁用缓存
        disableCachingParam : String
            使用追加参数的方式禁用请求缓存时, 追加的参数名称
        extraParams : Object
            添加到请求中的参数
        method : String
            发送请求使用的默认的HTTP发送方式('POST','GET')
        timeout : Number
            设置请求的超时时间(毫秒)
    方法
        rquest( Object options ) : Object
            向一个远程服务器发送HTTP请求,返回值为request对象. 可以用来取消当前请求
            参数对象的属性
                //由于此参数对象还会作为参数传给回调函数, 所以此对象中还可以包含一些其他的自定义参数用于在回调函数中处理
                url : String/Function
                    发送请求的URL, 或一个返回URL字符串的函数, 函数的作用域为scope属性值. 默认为当前Connection对象的url属性值.
                params : Object/String/Function
                    一个包含所有发送给服务器的请求参数的属性对象, 或一个url编码 字符串, 或一个能返回前二者之一的函数. 函数的作用域为scope属性值.
                method : String
                    请求使用的HTTP方式, 默认为当前Connection对象的method属性值, 或当method为空时, 无参数就使用"GET", 有参数就使用"POST". 注意: 此参数名称是区分大小写的, 所以应该全为大写.
                callback : Function
                    在收到HTTP响应之后调用的函数. 此回调函数无论响应结果为成功或失败都会执行
                    参数:
                        options : Object
                            调用request函数时的参数.
                        success : Boolean
                            如果请求成功则为'true'.
                        response : Object
                            包含了响应数据的XMLHttpRequest对象.
                success : Function
                    在请求成功返回时调用此函数
                    参数:
                        response : Object
                            包含了响应数据的XMLHttpRequest对象.
                        options : Object
                            调用request函数时的参数.
                failure : Function
                    在请求返回失败时调用此函数
                    参数:
                        response : Object
                            包含了响应数据的XMLHttpRequest对象.
                        options : Object
                            调用request函数时的参数.
                timeout : Number
                    本次请求的超时时间(毫秒).默认为30秒.
                form : Ext.Element/HTMLElement/String
                    提交参数的表单的 <form> 元素对象或<form> 元素的ID
                isUpload : Boolean
                    仅当与form参数一同使用时有意义.
                    'true'表示表单对象是一个文件上传栏(当form表单设置了属性enctype "multipart/form-data"时, 此参数自动为'true').
                headers : Object
                    请求头信息.
                xmlData : Object
                    发送的XML文本. 注意: 使用此参数将取代params参数来发送请求数据. 所有params中的参数将被追加到URL后面.
                jsonData : Object/String
                    发送的JSON数据. 注意: 使用此参数将取代params参数来发送请求数据. 所有params中的参数将被追加到URL后面.
                disableCaching : Boolean
                    设为'true'时即会在GET方式的请求中添加一个不重复的参数来禁用缓存.
        upload( String/HTMLElement/Ext.Element form, String url, String params, Object options )
            使用一个隐藏的iframe上传form表单
        parseStatus( Number status ) : Object
            判断响应状态是否为成功
    事件
        beforerequest( Ext.data.Connection conn, Object options, Object eOpts )
            当一个请求数据对象的网络请求发送前触发此事件
        requestcomplete( Ext.data.Connection conn, Object response, Object options, Object eOpts )
            当一次请求成功完成时触发此事件
        requestexception( Ext.data.Connection conn, Object response, Object options, Object eOpts )
            当服务器返回一个HTTP错误状态值时触发此事件



Ext.Ajax
    是Ext.data.Connection的一个单例。专门用于与服务端代码进行交互的
    示例
        Ext.Ajax.request({
            url: 'page.php',
            params: {
                id: 1
            },
            success: function(response){
                var text = response.responseText;
                // process server response here
            }
        });
        通过修改Ext.Ajax类的属性,可以设置所有请求的默认配置(会被request方法中的配置覆盖): 
            Ext.Ajax.timeout = 60000; // 60秒
    属性
        defaultHeaders : Object
            一个包含了请求头信息的对象,将会添加到使用当前对象发出的每一个请求中
        disableCaching : Boolean
            如果为true,将会在GET请求中添加一个cache-buster(缓存杀手)。默认为true
        extraParams : Object
            一个带有属性值的对象,用来给每一个使用当前对象发出的请求附加额外的参数
        method : String
            默认使用的HTTP请求方式。注意,这个配置项是大小写敏感的,所有字母都应该大写
        timeout : Number
            请求的超时时间,单位毫秒。默认为30000。
        url : String
            向服务器发送请求时默认使用的URL




示例程序
    菜单
        页面
            <!doctype html>
            <html>
            <head>
                <meta charset="utf-8">
                <link rel="stylesheet" href="ext-4.2.1.883/resources/css/ext-all.css">
                <script src="ext-4.2.1.883/ext-all.js"></script>
                <script>
                    Ext.onReady(function(){
                        var treeStore = new Ext.data.TreeStore({
                            fields : ['text','url'],
                            proxy:{
                                type:'ajax',
                                url:'/Application/menu'
                            }
                        });
                        
                        var tree = new Ext.tree.Panel({
                            store:treeStore,
                            rootVisible: false,
                            listeners:{
                                'itemclick':function(view,model){
                                    alert(model.data.url);
                                }
                            }
                        });
                        var subPanel = new Ext.panel.Panel({
                            title:'菜单1',
                            layout:'fit',
                            items:[tree]
                        });
                        
                        var tree2 = new Ext.tree.Panel({
                            store:treeStore,
                            rootVisible: false,
                            listeners:{
                                'itemclick':function(view,model){
                                    alert(model.data.url);
                                }
                            }
                        });
                        var subPanel2 = new Ext.panel.Panel({
                            title:'菜单2',
                            layout:'fit',
                            items:[tree2]
                        });
                        
                        var panel = new Ext.panel.Panel({
                            width:200,
                            height:300,
                            renderTo:'hello',
                            layout:'accordion',
                            items:[subPanel,subPanel2]
                        });
                    });
                </script>
            </head>
            <body>
                <div id="hello"></div>
            </body>
            </html>
        后台
            public static void menu(){
                String json = "[{text:'节点1',leaf:true,url:'http://www.baidu.com'},{text:'节点2',leaf:true}]";
                renderText(json);
            }







研究项目代码
表单组件
分页
自己写
内置类型
树从后台加载数据
ajax
日期格式化
  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值