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 )