Ext属性详细信息

Ext.window属性详细信息

Ext.Window扩展自Ext.Panel，其xtype值为window。

1、主要配置项

closable：是否允许关闭窗口，默认为true。
      closeAction：关闭窗口的动作，包括以下两种：
       close：从DOM删除窗口，销毁窗口及其所属组件，窗口不再可用，重新显示需要调   用show方法。此为默认值。
       hide：通过设置可见性隐藏窗口，窗口还可用，调用show方法后重新显示。
      constrain：是否约束窗口只能在容器内移动，默认为false。

          窗口默认渲染到document.body。
      constrainHeader：是否约束窗口头部只能在容器内移动，默认为false。
      draggable：是否可拖曳，默认为true。
      resizable：是否可改变窗口的大小，默认为true。
      modal：是否为模式窗口，默认为false。
      maximizable：是否可最大化窗口，默认为false。
      maximized：是否在初始化时最大化显示窗口，默认为false。
      x：窗口的X坐标值。
      y：窗口的Y坐标值。
      manager：WindowGroup的引用。 
      expandOnShow：是否在窗口显示时展开它，默认为true。 当取值为false时，

                collapsed取值为true时，窗口初始显示时收缩。
      minimizable：是否可最小化窗口，默认为false。需要自定义最小化行为。
      defaultButton：当窗口获得焦点时，默认获得焦点的按钮。
      plain：主体背景是否透明，默认为false。

2、主要方法：
      show( [String/Element animateTarget], [Function callback], [Object scope] )：

     显示窗口。
      hide( [String/Element animateTarget], [Function callback], [Object scope] )：

     隐藏窗口。
      center()：窗口居中显示。
      close()：关闭窗口，相当于closeAction值为close的情形。
      maximize()：最大化窗口。
      restore()：还原窗口大小。
      toggleMaximize()：在最大化和还原之间切换。 
      minimize()：最小化窗口。
      setActive( Boolean active )：激活窗口。
      focus()：窗口获得焦点。
      toBack()：后置窗口。
      toFront( [Boolean e] )：前置窗口。
      resize( Ext.Window this, Number width, Number height )：改变大小。

Ext.grid属性详细信息

1、Ext.grid.GridPanel
主要配置项：
store：表格的数据集
columns：表格列模式的配置数组，可自动创建ColumnModel列模式
autoExpandColumn：自动充满表格未用空间的列，参数为列id，该id不能为0
stripeRows：表格是否隔行换色，默认为false
cm、colModel：表格的列模式，渲染表格时必须设置该配置项
sm、selModel：表格的选择模式，默认为Ext.grid.RowSelectionModel
enableHdMenu：是否显示表头的上下文菜单，默认为true
enableColumnHide：是否允许通过标题中的上下文菜单隐藏列，默认为true
loadMask：是否在加载数据时显示遮罩效果，默认为false
view：表格视图，默认为Ext.grid.GridView
viewConfig：表格视图的配置对象
autoExpandMax：自动扩充列的最大宽度，默认为1000
autoExpandMin：自动扩充列的最小宽度，默认为50
columnLines：是否显示列分割线，默认为false
disableSelection：是否禁止行选择，默认为false
enableColumnMove：是否允许拖放列，默认为true
enableColumnResize：是否允许改变列宽，默认为true
hideHeaders：是否隐藏表头，默认为false
maxHeight：最大高度
minColumnWidth：最小列宽，默认为25
trackMouseOver：是否高亮显示鼠标所在的行，默认为true
主要方法：
getColumnModel()：取得列模式
getSelectionModel()：取得选择模式
getStore()：取得数据集
getView()：取得视图对象
reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel )：使用一个新的数据集和列模式重新配置表格组件 

2、Ext.grid.Column
主要配置项：
id：列id
header：表头文字
dataIndex：设置列与数据集中数据记录的对应关系，值为数据记录中的字段名称。如果没有设置该项则使用列索引与数据记录中字段的索引进行对应
width：列宽
align：列数据的对齐方式
hidden：是否隐藏列，默认为false
fixed：是否固定列宽，默认为false
menuDisabled：是否禁用列的上下文菜单，默认为false
resizable：是否允许改变列宽，默认为true
sortable：是否允许排序，默认为true
renderer：设置列的自定义单元格渲染函数
传入函数的参数有：
value：数据的原始值
metadata：元数据对象，用于设置单元格的样式和属性，该对象包含的属性有：
css：应用到单元格TD元素上的样式名称
attr：一个HTML属性定义字符串，例如'style="color:blue"'
record：当前数据记录对象
rowIndex：单元格的行索引
colIndex：单元格的列索引
store：数据集对象
xtype：列渲染器类型，默认为gridcolumn，其它可选值有booleancolumn、numbercolumn、datecolumn、 templatecolumn等
editable：是否可编辑，默认为true
editor：编辑器
groupName：
emptyGroupText：
groupable： 

3、Ext.grid.ColumnModel
主要配置项：
columns：字段数组
defaultSortable：是否进行默认排序，默认为false
defaultWidth：默认宽度
主要方法：
findColumnIndex( String col )：根据给定的dataIndex查找列索引
getColumnById( String id )：取得指定id对应的列
getColumnCount( Boolean visibleOnly )：取得列总数
getColumnHeader( Number col )：取得列的表头
getColumnId( Number index )：取得列id
getDataIndex( Number col )：取得列对应的数据字段名
getIndexById( String id )：取得列索引
getTotalWidth( Boolean includeHidden )
isCellEditable( Number colIndex, Number rowIndex )
isFixed()
isHidden( Number colIndex )
setColumnHeader( Number col, String header )
setColumnWidth( Number col, Number width, Boolean suppressEvent )
setDataIndex( Number col, String dataIndex )
setEditable( Number col, Boolean editable )
setEditor( Number col, Object editor )
setHidden( Number colIndex, Boolean hidden )
setRenderer( Number col, Function fn ) 

4、Ext.grid.AbstractSelectionModel
主要方法：
lock()：锁定选择区域
unlock()：解锁选择区域
isLocked()：当前选择区域是否被锁定 

5、Ext.grid.CellSelectionModel
主要方法：
clearSelections( Boolean preventNotify )：清除选择区域
getSelectedCell()：取得当前选择的单元格，返回一数组，其格式：[rowIndex, colIndex]
hasSelection()：当前是否有选择区域
select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] )：选择指定单元格 

6、Ext.grid.RowSelectionModel
主要配置项：
singleSelect：是否单选模式，默认为false，即可以选择多条数据
主要方法：
clearSelections( [Boolean fast] )：清除所有选择区域
deselectRange( Number startRow, Number endRow )：取消范围内的行选择
deselectRow( Number row, [Boolean preventViewNotify] )：取消指定行的选择状态
each( Function fn, [Object scope] )：遍历所有选择行，并调用指定函数。当前被选行将传入该函数中
getCount()：得到选择的总行数
getSelected()：得到第一个被选记录
getSelections()：得到所有被选记录的数组
hasNext()：判断当前被选行之后是否还有记录可以选择
hasPrevious()：判断当前被选行之前是否还有记录可以选择
hasSelection()：是否已选择了数据
isIdSelected( String id )：判断指定id的记录是否被选择
isSelected( Number/Record index )：判断指定记录或记录索引的数据是否被选择
selectAll()：选择所有行
selectFirstRow()：选择第一行
selectLastRow( [Boolean keepExisting] )：选择最后行
keepExisting：是否保持已有的选择
selectNext( [Boolean keepExisting] )：选择当前选择行的下一行
selectPrevious( [Boolean keepExisting] )：选择当前选择行的上一行
selectRange( Number startRow, Number endRow, [Boolean keepExisting] )：选择范围内的所有行
selectRecords( Array records, [Boolean keepExisting] )：选择一组指定记录
selectRow( Number row, [Boolean keepExisting], [Boolean preventViewNotify] )：选择一行
row：行索引
selectRows( Array rows, [Boolean keepExisting] )：选择多行
rows：行索引数组 

7、Ext.grid.CheckboxSelectionModel
主要配置项：
singleSelect：是否单选模式，默认为false，即可以选择多条数据
checkOnly：是否只能通过点击checkbox列进行选择，默认为false
sortable：是否允许checkbox列排序，默认为false
width：checkbox列的宽度，默认为20 

8、Ext.grid.RowNumberer
主要配置项：
header：行号列表头显示的内容
width：列宽，默认为23 

9、Ext.grid.GridView
主要配置项：
enableRowBody：是否包含行体
sortAscText：表格标题菜单中升序的文字描述
sortDescText：表格标题菜单中降序的文字描述
columnsText：表格标题菜单中列对应的文字描述
autoFill：是否自动扩展列以充满整个表格，默认为false
forceFit：是否强制调整表格列宽以适用表格的整体宽度，防止出现水平滚动条，默认为false
主要方法：
focusCell( Number row, Number col )：将焦点移到指定单元格
focusRow( Number row )：将焦点移动指定行
getCell( Number row, Number col )：取得指定单元格对应的td元素
getHeaderCell( Number index )：取得指定表头对应的td元素
getRow( Number index )：取得指定行对应的tr元素
getRowClass( Record record, Number index, Object rowParams, Store store )：得到附加到表格行上的样式名
record：当前行的数据记录对象
index：当前行的索引
rowParams：渲染时传入到行模板中的配置对象，通过它可以为行体定制样式，该对象只在enableRowBody为true时才生效，可能的属性 如下：
body：渲染到行体中的HTML代码片段
bodyStyle：应用到行体tr元素style属性的字符串
cols：应用到行体td元素colspan属性的值，默认为总列数
store：表格数据集
refresh( [Boolean headersToo] )：刷新表格组件
scrollToTop()：滚动表格到顶端 

实战1： 

让gridpanel的滚动条自动滚动到最后一条记录(动态插入数据)： 

grid.getView().focusRow(vehiclePassInfoGrid.getStore().getCount()-1); 

2:清除gridpanel中有行被选择的状态： 

grid.getSelectionModel().clearSelections(); 

Ext.form属性详细信息

Ext.form.Action
配置项：
success：执行成功后回调的函数，包括两个参数：form 和action
failure：执行失败后回调的函数，包括两个参数：form 和action
method：表单的提交方式，有效值包括GET、POST
params：传递到请求中的参数
url：动作提交的路径
waitMsg：动作执行时显示的等待信息
属性：
Action.CLIENT_INVALID：客户端验证错误
Action.CONNECT_FAILURE：通信错误
Action.LOAD_FAILURE：加载数据时，没有包含data 属性的字段被返回
Action.SERVER_INVALID：服务端验证错误
failureType：错误类型
result：包含布尔类型的success 属性和其他属性，如{success: true, msg: 'ok'}
type：动作类型，可选值有submit 和load
Ext.form.Action.Submit：返回的信息中要包含一个布尔类型的success 属性和一个可选的
errors 属性
Ext.form.Action.Load：返回的信息中要包含一个布尔类型的success 属性和一个data 属性

2、Ext.form.BasicForm
配置项：
baseParams：传递到请求中的参数
method：表单的提交方式，有效值包括GET、POST
url：表单默认的提交路径
fileUpload：表单是否进行文件上传
timeout：表单动作的超时时间，默认为30 秒
trackResetOnLoad：是否在表单初次创建时清楚数据
方法：
doAction( String/Object actionName, [Object options] )：执行一个预订的动作，可用选
项包括：
url：动作提交的路径
method：表单的提交方式，有效值包括GET、POST
params：传递到请求中的参数
headers：
success：执行成功后回调的函数，包括两个参数：form 和action
failure：执行失败后回调的函数，包括两个参数：form 和action
clientValidation：是否客户端验证
clearInvalid()：清除表单中所有的无效验证信息
findField( String id )：查找表单字段
getValues( [Boolean asString] )：
isDirty()：表单数据是否被更改过
isValid()：客户端验证是否成功
load( Object options )：执行表单读取动作
loadRecord( Record record )：从一个数据记录中读取数据到表单中
markInvalid( Array/Object errors )：成批设置表单字段为验证无效
reset()：重置表单
setValues( Array/Object values )：成批设置表单字段值
submit( Object options )：执行表单提交动作
updateRecord( Record record )：持久化表单数据到记录集中

3、Ext.form.FormPanel
配置项：
items：一个元素或元素数组
buttons：一个按钮配置对象的数组，按钮将被添加到表单页脚中
buttonAlign：按钮的对齐方式，可选值有left、center、right，默认为center
labelWidth：表单标签的宽度
labelAlign：表单标签的对齐方式，可选值有left、top、right，默认为left
labelSeparator：字段标签与字段之间的分隔符，默认为':'
minButtonWidth：按钮的最小宽度，默认为75
方法：
getForm() : Ext.form.BasicForm
load( Object options )
startMonitoring()
stopMonitoring()

4、Ext.form.Field
配置项：
name：字段名
value：字段的初始化值
disabled：字段是否不可用，默认为false
fieldLabel：字段标签说明
hideLabel：隐藏字段标签，默认为false
labelSeparator：字段标签与字段之间的分隔符，默认为':'
labelStyle：字段标签样式
inputType：默认为text
invalidClass：默认为x-form-invalid
invalidText：字段非法文本提示
msgTarget：错误信息显示的位置，默认为qtip
qtip：显示一个浮动的提示信息
title：显示一个浏览器的浮动提示信息
under：在字段下方显示一个提示信息
side：在字段右边显示一个提示信息
readOnly：字段是否只读，默认为false
validateOnBlur：字段在失去焦点时被验证，默认为true
方法：
clearInvalid()：
getRawValue()
setRawValue( Mixed value )
getValue()
setValue( Mixed value )
isDirty()：字段值在装载后是否被修改过
isValid( Boolean preventMark )：当前字段值是否合法
markInvalid( [String msg] )
validate()
reset()

5、Ext.form.Hidden
6、Ext.form.Label
配置项：
html：
text：

7、Ext.form.TextField
配置项：
allowBlank：是否允许为空，默认为true
blankText：空验证失败后显示的提示信息
emptyText：在一个空字段中默认显示的信息
grow：字段是否自动伸展和收缩，默认为false
growMin：收缩的最小宽度
growMax：伸展的最大宽度
inputType：字段类型：默认为text
maskRe：用于过滤不匹配字符输入的正则表达式
maxLength：字段允许输入的最大长度
maxLengthText：最大长度验证失败后显示的提示信息
minLength：字段允许输入的最小长度
minLengthText：最小长度验证失败后显示的提示信息
regex：正则表达式
regexText：正则表达式验证失败后显示的提示信息
vtype：验证类型的名字
alpha：限制只能输入字母
alphanum：限制只能输入字母和数字
email
url
vtypeText：验证失败时的提示信息
validator：自定义验证函数
selectOnFocus：当字段得到焦点时自动选择已存在的文本，默认为false

8、Ext.form.TextArea
配置项：
preventScrollbars：是否禁止出现滚动条，默认为false

9、Ext.form.NumberField
配置项：
allowDecimals：是否允许输入小数，默认为true
allowNegative：是否允许输入负数，默认为true
baseChars：输入的有效数字集合，默认为'0123456789'
decimalPrecision：数字的精度，默认保留小数点后2 位
decimalSeparator：十进制分隔符，默认为'.'
maxValue：允许输入的最大数值
maxText：超过最大值之后的提示信息
minValue：允许输入的最小数值
minText：超过最小值之后的提示信息
nanText：输入非有效数值之后的提示信息

10、Ext.form.Checkbox
配置项：
boxLabel：复选框的文字描述
checked：复选框是否被选择，默认为false
handler：当checked 值改变时触发的函数，函数包含两个参数：checkbox、checked
inputValue：
方法：
getValue()：返回复选框的checked 状态
setValue( Boolean/String checked )：

11、Ext.form.CheckboxGroup
配置项：
allowBlank：是否允许不选择，默认为true
blankText：
columns：显示的列数，可选值包括：固定值auto、数值、数组（整数、小数）
items：对象数组
vertical：是否垂直方向显示对象，默认为false

12、Ext.form.Radio
方法：
getGroupValue()：
setValue( value {String/Boolean} )：

13、Ext.form.RadioGroup
配置项：
allowBlank：
blankText：

14、Ext.form.ComboBox
配置项：
displayField：被显示在下拉框中的字段名
editable：是否可编辑，默认为true
forceSelection：输入值是否严格为待选列表中存在的值。如果输入不存在的值，会自动选择
第一个最接近的值。
hiddenName：隐藏字段的名字，如果提供该参数则一个隐藏字段将被创建，用来存储所选值，
当表单提交时在服务器端可以通过该名字取得列表中的所选值
listWidth：下拉列表的宽度
minListWidth：下拉列表的最小宽度，默认为70 像素
loadingText：当下拉框加载数据时显示的提示信息，只有当mode='remote'时才会生效
maxHeight：下拉列表框的最大高度，默认为300 像素
minChars：下拉列表框自动选择前用户需要输入的最小字符数量。mode='remote'默认为4，
mode='local'默认为0
mode：下拉列表框的数据读取模式。remote 读取远程数据，local 读取本地数据
pageSize：下拉列表框的分页大小。该项设置只在mode='remote'时生效
queryParam：查询的名字，默认为'query'，将被传递到查询字符串中
allQuery：一个发往服务器用来查询全部信息的查询字符串，默认为空字符串''
selectOnFocus：当获得焦点时立刻选择一个已存在的列表项。默认为false，此项只有在
editable=true 时才会生效
store：列表框绑定的数据源
transform：将页面中已存在的元素转换为组合框
lazyInit：延时初始化下拉列表，默认为true
lazyRender：延时渲染，默认为false
triggerAction：设置单击触发按钮时执行的默认操作，有效值包括all 和query，默认为query，
如果设置为all 则会执行allQuery 中设置的查询
typeAhead：设置在输入过程中是否自动选择匹配的剩余部分文本（选择第一个满足条件的），
默认为false
value：初始化组合框中的值
valueField：组合框的值字段
valueNotFoundText：值不存在时的提示信息
tpl：Ext 模板字符串或模板对象，可以通过该配置项自定义下拉列表的显示方式
方法：
clearValue()：清空字段当前值
doQuery( String query, Boolean forceAll )：
getValue()：
getStore()：
setValue( String value )：

15、Ext.form.DateField
配置项：
maxValue：允许选择的最大日期
maxText：当日期大于最大值时的错误提示信息
minValue：允许选择的最小时间
minText：当日期小于最小值时的错误提示信息
format：日期显示格式，默认为“m/d/y”，一般使用“Y-m-d”
Y：四位年份
m：带前缀0 的月份
d：带前缀0 的日期
y：两位年份
n：不带前缀0 的月份
j：不带前缀0 的日期
w：星期的数字，0 表示星期日，1 代表星期一
showToday：是否显示今天按钮，默认为true
altFormats：多个日期输入格式组成的字符串，不同的格式之间使用“|”进行分割，默认值为
'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'
disabledDates：禁止选择的日期组成的数组
disabledDatesText：选择禁选日期时显示的提示信息
disabledDays：禁止选择的星期组成的数组，0 代表星期日，1 代表星期一
disabledDaysText：选择禁选星期时显示的提示信息
invalidText：当日期值非法时显示的提示信息
方法：
getValue()：取得日期值

16、Ext.form.FieldSet
配置项：
animCollapse：动画折叠，默认为false
checkboxToggle：设置是否显示字段集的checkbox 选择框，默认为false
checkboxName：指定字段集中用于展开或隐藏字段集面板的checkbox 的名字，该属性只有在
checkboxToggle 为true 时生效
labelWidth：字段标签的宽度，可以级联到子容器
layout：布局，默认为form

17、Ext.form.TimeField
配置项：
maxValue：列表中允许的最大时间
maxText：当时间大于最大值时的错误提示信息
minValue：列表中允许的最小时间
minText：当时间小于最小值时的错误提示信息
increment：两个相邻选项间的时间间隔，默认为15 分钟
format：显示格式，默认为“g:i A”。一般使用“H:i:s”
H：带前缀0 的24 小时
i：带前缀0 的分钟
s：带前缀0 的秒
invalidText：当时间值非法时显示的提示信息
altFormats：多个时间输入格式组成的字符串，不同的格式之间使用“|”进行分割

Ext.layout属性详细信息

1、Border布局__边界布局

border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在其items中指定使用region参数为其子元素指定具体位置。 

注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大，center区域就变小了。

    参数 split:true 可以调整除了center四个区域的大小。

    参数 collapsible:true 将激活折叠功能。

center 区域是必须使用的，Center区域会自动填充其他区域的剩余空间。尤其在Extjs4.0中，当指定布局为border时，如果没有指定center区域时，会出现报错信息。

2、Accordion布局__手风琴布局

在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。

注意：只有Ext.Panels 和所有Ext.panel.Panel 子项，才可以使用accordion布局。

Card布局__类似向导

Card布局：这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。Card布局可以使用layout:'card'来创建。

 注意：由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。由于只有一个面板处于显示状态，那么在初始时，我们可以使用 setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候，我们可以使用getNext()或getPrev() 来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。另外，如果面板中显示的是FORM布局，我们在点击下一个面板的时候， 处理FORM中提交的元素，通过AJAX将表单中的内容保存到数据库中或者SESSION中。

fit 布局

在Fit布局中，子元素将自动填满整个父容器。

注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。

Anchor布局

anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。

AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。

anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开，例如：

anchor:'75% 25%'，表示宽度为父容器的75%，高度为父容器的25%。

anchor:'-295 -300'，表示组件相对于父容器右边距为295，相对于父容器的底部位300。

anchor:'-250 10%'，混合模式，表示组件对于如容器右边为250，高度为父容器的10%。

Absolute布局

Absolute布局继承Ext.layout.container.Anchor 布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用。

Column布局__列布局

Column布局一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。

Column布局没有直接的配置选项（继承的除外），但Column布局支持一个columnWidth属性，在布局过程中，使用columnWidth指定每个面板的宽度。

注意：使用Column布局布局时，其子面板的所有columnWidth值加起来必须介于0~1之间或者是所占百分比。他们的总和应该是1。

另外，如果任何子面板没有指定columnWidth值，那么它将占满剩余的空间。

Ext.button属性详细信息

配置：
1. id:"buttonName",
2. text:"Button组件基本用法",
3. tooltip:"提示信息：Button组件基本用法", //提示信息,如果需要显示提示信息，需要使用Ext.QuickTips.init();
4. ooltipType:"title", //定义显示提示信息的类型，有qtip和title两种方式，默认是qtip
5. ype:"button", //按钮类型：可以是submit, reset or button 　默认是 button
6. autoShow:true,  //默认false,自动显示
7. hidden:false,  //默认false，是否隐藏
8. hideMode:"offsets", //隐藏方式，默认display,可以取值：display，offsets，visibility
9. cls:"cssButton", //样式定义,默认""
10. disabled:false, //是否可用，默认false
11. disabledClass:"",  //默认x-item-disabled
12. enableToggle:true, //默认false
13. pressed:false, //设置按钮是否已经被按下，默认是false
14. html:"Ext",//默认""
15. handleMouseEvents:true, //默认true,如果为false,那么mouseout　mouseover就不能被触发
16. x:number,y:number,在容器中的x,y坐标 
17. handler:function(){Ext.Msg.alert('提示消息框','测试Button组件：handler事件！');},//添加事件
18. listeners:{//添加监听事件 可以结合handler测试这两个事件哪个最先执行
         "click":function(){
             Ext.Msg.alert('提示消息框','测试Button组件：listeners事件！');
             Ext.getCmp("buttonName").hide();//隐藏按钮
           }
   },
19. cls:"x-btn-text-icon",//添加图标前需要设置该属性
20. icon:"house.gif", //图标的地址
21. plugins : Object/Array　扩展插件时使用
22. repeat:false,  //默认false ,如果为true,需要设置mouseover事件
23. renderTo:"Bind_Button" //将组件的显示效果渲染到某个节点的ID

常用方法：
1. enable();激活按钮
2. disable();禁用按钮
3. destroy();消灭按钮
4. focus();按钮获取焦点
5. getText();获取按钮上的文本
6. hide();隐藏按钮
7. show();显示按钮
8. setText( String text );设置按钮上的文本
9. setVisible( Boolean visible );设置按钮是否隐藏
10. buttonName.purgeListeners();
//使用该方法，意思是清除所有的监听事件，所以当执行该句后就不会再执行listeners的click事件了。按钮就不会被隐藏了。
11. buttonName.setHandler(fn);      
        //也可以通过这种方式设置handler事件:
        buttonName.setHandler(function(){Ext.Msg.alert('提示消息框','测试Button组件：setHandler事件！');});
12. buttonName.on(eventName,fn);
       //下面的事件可以自己测试下
        buttonName.on("click",function(){
            Ext.Msg.alert('提示消息框','测试Button组件：click事件！');
        });
         buttonName.on("mouseover",function(){
            Ext.Msg.alert('提示消息框','测试Button组件：mouseover事件！');
        });
        buttonName.on("mouseout",function(){
            Ext.Msg.alert('提示消息框','测试Button组件：mouseout事件！');
        });

Ext.tree属性详细信息

Ext.tree.TreePanel
      主要配置项：
            root：树的根节点。
            rootVisible：是否显示根节点，默认为true。
            useArrows：是否在树中使用Vista样式箭头，默认为false。
            lines：是否显示树线，默认为true。
            loader：树节点的加载器，默认为Ext.tree.TreeLoader。
            selModel：树的选择模式，默认为Ext.tree.DefaultSelectionModel。
            pathSeparator：树节点路径的分隔符，默认为“/”。
            singleExpand：是否一次只展开树中的一个节点，默认为true。
            requestMethod：请求方法，可选值有POST、GET。
            containerScroll：是否将树形面板注册到滚动管理器ScrollManager中。

      主要方法：
            collapseAll()：收缩所有树节点
            expandAll()：展开所有树节点
            getRootNode()：获取根节点
            getNodeById(String id)：获取指定id的节点
            expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )
            expandPath( String path, [String attr], [Function callback] )
            getChecked( [String attribute], [TreeNode startNode] )
            selectPath( String path, [String attr], [Function callback] )
            getSelectionModel()：

Ext.data.Node
     主要配置项：
            id：节点id
            leaf：当前节点是否为叶子节点
      主要属性：
            id：节点id
            attributes：节点属性的集合
            parentNode：当前节点的父节点
            childNodes：当前节点所有子节点组成的数组
            firstChild：当前节点的第一个直接子节点，如果没有则为null值
            lastChild：当前节点的最后一个直接子节点，如果没有则为null值
            nextSibling：当前节点的下一个兄弟节点，如果没有则为null值
            previousSibling：当前节点的前一个兄弟节点，如果没有则为null值
      主要方法：
            appendChild( Node/Array node )：追加新的子节点
            bubble( Function fn, [Object scope], [Array args] )：从当前节点开始向上迭代调用指定函数，如果指定函数返回false则将终止迭代。
                  args：传入函数中的参数，默认为当前节点
            cascade( Function fn, [Object scope], [Array args] )：从当前节点开始向下迭代调用指定函数，如果指定函数返回false则将终止迭代。
            contains( Node node )：当前节点是否包含指定子节点。
            eachChild( Function fn, [Object scope], [Array args] )：迭代当前节点的所有子节点调用指定函数，如果指定函数返回false则将终止迭代。
            findChild( String attribute, Mixed value )：查找具有指定属性的第一个子节点。
            findChildBy( Function fn, [Object scope] )：根据自定义函数查找第一个符合要求的子节点，如果自定义函数返回true则说明匹配成功。
            getDepth()：取得当前节点的深度，根节点的深度为0
            getOwnerTree()：取得当前节点所在树。
            getPath( [String attr] )：取得当前节点对应的路径，这个路径在程序中可用于展开或者选择节点。
                   attr：用于查找路径的属性，默认为节点id
            hasChildNodes()：是否有子节点
            indexOf( Node node )：取得指定子节点的索引值，未找到返回-1。
            insertBefore( Node node, Node refNode )：在当前节点的指定子节点之前插入一个新的子节点。
             node：要插入的新节点
            isAncestor( Node node )：判断指定节点是否为当前节点的父节点（可以是任何一级中的父节点）。
            isFirst()：是否为父节点的第一个子节点。
            isLast()：是否为父节点的最后一个子节点。
            isLeaf()：是否为叶子节点。
            item( Number index )：取得指定索引的子节点。
            remove()：从父节点中删除当前节点。
            removeChild( Node node )：删除当前节点的指定子节点。
            replaceChild( Node newChild, Node oldChild )：用新的子节点替换当前节点的指定子节点。
            sort( Function fn, [Object scope] )：用指定的排序函数为当前节点的子节点进行排序。

Ext.tree.TreeNode
      主要配置项：
            text：节点上的文本信息
            qtip：节点上的提示信息
            icon：节点图标对应的路径
            iconCls：应用到节点图标上的样式
            checked：当前节点的选择状态
                  true：在节点前显示一个选中状态的复选框
                  false：在节点前显示一个未选中状态的复选框
                  不指定该值：不显示任何复选框
            href：节点的连接属性，默认为#
            hrefTarget：显示节点连接的目标框架
            editable：是否允许编辑，默认为true
            expanded：是否展开节点，默认为false
            disabled：是否禁用节点，默认为false
            singleClickExpand：是否通过单击方式展开节点
            allowChildren：是否允许当前节点具有子节点，默认为true
            expandable：当不含子节点时，是否总显示一个加减图标，默认为false
            uiProvider：节点的UI类，默认为Ext.tree.TreeNodeUI
      主要属性：
            text：节点上的文本信息
            disabled：当前节点是否被禁用
      主要方法：
            collapse( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )：收缩当前节点
            deep：是否级联收缩全部子节点
            collapseChildNodes( [Boolean deep] )：收缩所有子节点
            disable()：禁用当前节点
            enable()：启用当前节点
            ensureVisible( [Function callback], [Object scope] )：确保所有父节点都是展开的
            expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )：展开当前节点
            expandChildNodes( [Boolean deep] )：展开所有子节点
            isExpanded()：当前节点是否展开
            isSelected()：当前节点是否被选中
            select()：选择当前节点
            setText( String text )：设置当前的文本
            toggle()：切换当前节点的展开和收缩状态
            unselect()：取消对当前节点的选择
            getUI()：取得节点的UI对象

Ext.tree.AsyncTreeNode
      主要配置项：
            loader：当前节点的树加载器，默认使用树中配置的树加载器
      主要方法：
            isLoaded()：当前节点是否已经加载数据
            reload( Function callback, [Object scope] )：重新加载节点数据，并调用回调函数

Ext.tree.TreeNodeUI
      主要方法：
            getAnchor()：从节点的UI中获取焦点的<a>元素
            getIconEl()：获取图标的<img>元素
            getTextEl()：获取文本节点
            addClass( String/Array className )：
            removeClass( String/Array className )：
            hide()：
            show()：
            isChecked()：取得节点的选择状态，如果当前节点没有复选框则函数返回false
            toggleCheck( Boolean (optional) )：设置节点复选框的选择状态

Ext.tree.DefaultSelectionModel
      是TreePanel的默认选择模式，该模式一次只能选择树中的一个节点。
      主要方法：
            clearSelections()：清除对树中所有节点的选择
            getSelectedNode()：取得当前被选中的节点
            isSelected( TreeNode node )：节点是否被选中
            select( TreeNode node )：选中指定节点
            unselect( TreeNode node )：取消指定节点的选中状态
            selectNext()：选择当前被选节点的下一个节点
            selectPrevious()：选择当前被选节点的上一个节点

Ext.tree.MultiSelectionModel
      是TreePanel的多选择模式，该模式一次可以选择树中的多个节点。
      主要方法：
            clearSelections()：清除所有节点的选中状态
            getSelectedNodes()：取得被选节点组成的数组
            isSelected( TreeNode node )：节点是否被选中
            select( TreeNode node, [EventObject e], Boolean keepExisting )：选中指定节点
            unselect( TreeNode node )：取消指定节点的选中状态

Ext.tree.TreeLoader
      提供了对子节点的延时加载功能，请求指定的URL地址，返回子节点数据，返回的数据格式如下： 

[{  id: 1,  text: "node1",   leaf: true,   check: false   }  

 {id: 2,  text: "node2",   children: [{  

                 id: 3,    text: "node3",  leaf: true  

                }]  

}]  
      树节点展开时，当前节点的id会作为请求参数被发送到服务器，在服务器可以通过node参数名进行获取。
      主要配置项：
            dataUrl：获取子节点的URL地址。
            baseAttrs：子节点的基本属性对象，该对象中的属性将被添加到树加载器创建的所有子节点上。优先服务器返回的同名属性值。
            baseParams：基本的请求参数，这些参数会被附加到每一个节点的请求中。
            clearOnLoad：在加载前是否移除已存在的子节点，默认为true。
            preloadChildren：在第一次加载子节点后是否递归加载所有子节点。
            requestMethod：请求方法，可选值有POST、GET。
            uiProviders：加载器创建子节点的UI实现类。
            url：与dataUrl作用相同。
      主要方法：
            load( Ext.tree.TreeNode node, Function callback, (Object) scope )：从指定的URL加载树节点。
            node：需要加载子节点的树节点。

Ext.tree.TreeEditor
      主要配置项：
            alignment：对齐方式。
            editDelay：两次点击节点触发编辑操作的延时时间，默认为350毫秒。
            hideEl：在显示编辑器组件时是否隐藏绑定元素。
            maxWidth：编辑器的最大宽度，默认为250。

Ext.tree.TreeSorter
      主要配置项：
            property：用于排序的节点属性名，默认为text。
            dir：排序方向，可选值有asc、desc，默认为asc。
            caseSensitive：是否区分大小写，默认为false。
            folderSort：叶节点是否排在非叶节点之下，默认为false。
            leafAttr：叶子节点在folder排序时的值，默认为leaf。
            sortType：一个自定义函数用于在排序前转换节点值。

//可拖拽配置

viewConfig:{

  plugins :{

    ptype:'treeviewdragdrop',

    appendOnly:true   

  },

  listeners:{

    drop:function(node,data,overModel,dropPosition,options){

    //ajax的操作把数据同步到后台数据库

    //alert("把:"+data.records[0].get('text')+" 移动到："+overModel.get("text"));    

    }

  }

}

Ext.store属性详细信息

store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表

方法:不列举继承来的方法
Store( Object config )
构造,config定义为{
 autoLoad : Boolean/Object,    //自动载入
 baseParams : Object,    //只有使用httpproxy时才有意义
 data : Array,        //数据
 proxy : Ext.data.DataProxy,//数据代理
 pruneModifiedRecords : boolean,//清除修改信息
 reader : Ext.data.Reader,    //数据读取器
 remoteSort : boolean,    //远程排序?
 sortInfo : Object,    //{field: "fieldName", direction: "ASC|DESC"}这样的排序对象
 url : String,        //利用url构造HttpProxy
}

add( Ext.data.Record[] records ) : void
增加记录records 到store

addSorted( Ext.data.Record record ) : void
增加record到store并排序(仅本地排序时有用)

clearFilter( Boolean suppressEvent ) : void
清除过滤器

collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array
收集由dataIndex指定字段的惟一值

commitChanges() : void
提交Store所有的变更,会引发Update事件


filter( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : void
设定过滤器
field:String    //字段名
value:String    //RegExp 如果是字符器,检查field是否以value开始,如果是正则,检查是否匹配
anyMatch:Boolean //匹配任何部分而不仅令是开始
caseSensitive:Boolean //大小写敏感?

filterBy( Function fn, [Object scope] ) : void
更强悍的过滤方法.fn接收两个参数record和id

find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch], [Boolean caseSensitive] ) : Number
找到符合条件的第一条记录,参数同filter

findBy( Function fn, [Object scope], [Number startIndex] ) : Number
参见filterBy

getAt( Number index ) : Ext.data.Record
getById( String id ) : Ext.data.Record
依充号/id得到record对象

getCount() : void
得到记录数

getModifiedRecords() : Ext.data.Record[]
得到修改过的记录集

getRange( [Number startIndex], [Number endIndex] ) : Ext.data.Record[]
得到指定范围的记录集合

getSortState() : void
得到排序状态:显然不是void而是返回一个排序对象,同sortInfo一样的结构{field: "fieldName", direction: "ASC|DESC"}

getTotalCount() : void
这个对于翻页信息还是很有用的

indexOf( Ext.data.Record record ) : Number
indexOfId( String id ) : Number
由记录或id得到序号

insert( Number index, Ext.data.Record[] records ) : void
在指定的位置插入记录,并引发add事件

isFiltered() : Boolean
当前设置了过滤器则返回真

load( Object options ) : void
由指定的Proxy使用指定的reader读取远程数据
options定义为
{
    params :Object,    //请求url需要附加的参数
    callback :Function//回叫方法,接收三个参数
      //r : Ext.data.Record[] //返回的record数组
      //options: Options load方法传入的options
      //success: Boolean //成功
    scope :Object, //范围.默认是store本身
    add :Boolean 追加还是更新
}


loadData( Object data, [Boolean append] ) : void
用法比load简单一点,目的是一样的,只是这次数据由本地读取

query( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : MixedCollection
queryBy( Function fn, [Object scope] ) : MixedCollection
查询,参数和find类似,但返回所有符合条件的record,而不是第一个符合条件记录的序号

rejectChanges() : void
放弃所有的变更

reload( [Object options] ) : void
重新载入,相当于 load(options,false),如果连options都没有传入,则取最后一次load时使用的参数

remove( Ext.data.Record record ) : void
移除指定记录

removeAll() : void
移除所有记录

setDefaultSort( String fieldName, [String dir] ) : void
设置默认排序规则

sort( String fieldName, [String dir] ) : void
排序

sum( String property, Number start, Number end ) : Number
对property字段由start开始到end求和

事件列表
add : ( Store this, Ext.data.Record[] records, Number index )
beforeload : ( Store this, Object options )
clear : ( Store this )
datachanged : ( Store this )
load : ( Store this, Ext.data.Record[] records, Object options )
loadexception : ()
metachange : ( Store this, Object meta )
remove : ( Store this, Ext.data.Record record, Number index )
update : ( Store this, Ext.data.Record record, String operation )

转载于:https://www.cnblogs.com/study121007/p/4592872.html