概述
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"> </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
日期格式化
Extjs
最新推荐文章于 2021-06-16 17:44:44 发布
795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
