Extjs4GridPanel的主要配置參數(shù)詳細(xì)介紹_extjs

1、Ext.grid.GridPanel
主要配置項(xiàng)：
store：表格的數(shù)據(jù)集
columns：表格列模式的配置數(shù)組，可自動創(chuàng)建ColumnModel列模式
autoExpandColumn：自動充滿表格未用空間的列，參數(shù)為列id，該id不能為0
stripeRows：表格是否隔行換色，默認(rèn)為false
cm、colModel：表格的列模式，渲染表格時(shí)必須設(shè)置該配置項(xiàng)
sm、selModel：表格的選擇模式，默認(rèn)為Ext.grid.RowSelectionModel
enableHdMenu：是否顯示表頭的上下文菜單，默認(rèn)為true
enableColumnHide：是否允許通過標(biāo)題中的上下文菜單隱藏列，默認(rèn)為true
loadMask：是否在加載數(shù)據(jù)時(shí)顯示遮罩效果，默認(rèn)為false
view：表格視圖，默認(rèn)為Ext.grid.GridView
viewConfig：表格視圖的配置對象
autoExpandMax：自動擴(kuò)充列的最大寬度，默認(rèn)為1000
autoExpandMin：自動擴(kuò)充列的最小寬度，默認(rèn)為50
columnLines：是否顯示列分割線，默認(rèn)為false
disableSelection：是否禁止行選擇，默認(rèn)為false
enableColumnMove：是否允許拖放列，默認(rèn)為true
enableColumnResize：是否允許改變列寬，默認(rèn)為true
hideHeaders：是否隱藏表頭，默認(rèn)為false
maxHeight：最大高度
minColumnWidth：最小列寬，默認(rèn)為25
trackMouseOver：是否高亮顯示鼠標(biāo)所在的行，默認(rèn)為true
主要方法：
getColumnModel()：取得列模式
getSelectionModel()：取得選擇模式
getStore()：取得數(shù)據(jù)集
getView()：取得視圖對象
reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel )：使用一個(gè)新的數(shù)據(jù)集和列模式重新配置表格組件

2、Ext.grid.Column
主要配置項(xiàng)：
id：列id
header：表頭文字
dataIndex：設(shè)置列與數(shù)據(jù)集中數(shù)據(jù)記錄的對應(yīng)關(guān)系，值為數(shù)據(jù)記錄中的字段名稱。如果沒有設(shè)置該項(xiàng)則使用列索引與數(shù)據(jù)記錄中字段的索引進(jìn)行對應(yīng)
width：列寬
align：列數(shù)據(jù)的對齊方式
hidden：是否隱藏列，默認(rèn)為false
fixed：是否固定列寬，默認(rèn)為false
menuDisabled：是否禁用列的上下文菜單，默認(rèn)為false
resizable：是否允許改變列寬，默認(rèn)為true
sortable：是否允許排序，默認(rèn)為true
renderer：設(shè)置列的自定義單元格渲染函數(shù)
傳入函數(shù)的參數(shù)有：
value：數(shù)據(jù)的原始值
metadata：元數(shù)據(jù)對象，用于設(shè)置單元格的樣式和屬性，該對象包含的屬性有：
css：應(yīng)用到單元格TD元素上的樣式名稱
attr：一個(gè)HTML屬性定義字符串，例如'style="color:blue"'
record：當(dāng)前數(shù)據(jù)記錄對象
rowIndex：單元格的行索引
colIndex：單元格的列索引
store：數(shù)據(jù)集對象
xtype：列渲染器類型，默認(rèn)為gridcolumn，其它可選值有booleancolumn、numbercolumn、datecolumn、 templatecolumn等
editable：是否可編輯，默認(rèn)為true
editor：編輯器
groupName：
emptyGroupText：
groupable：

3、Ext.grid.ColumnModel
主要配置項(xiàng)：
columns：字段數(shù)組
defaultSortable：是否進(jìn)行默認(rèn)排序，默認(rèn)為false
defaultWidth：默認(rèn)寬度
主要方法：
findColumnIndex( String col )：根據(jù)給定的dataIndex查找列索引
getColumnById( String id )：取得指定id對應(yīng)的列
getColumnCount( Boolean visibleOnly )：取得列總數(shù)
getColumnHeader( Number col )：取得列的表頭
getColumnId( Number index )：取得列id
getDataIndex( Number col )：取得列對應(yīng)的數(shù)據(jù)字段名
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()：鎖定選擇區(qū)域
unlock()：解鎖選擇區(qū)域
isLocked()：當(dāng)前選擇區(qū)域是否被鎖定

5、Ext.grid.CellSelectionModel
主要方法：
clearSelections( Boolean preventNotify )：清除選擇區(qū)域
getSelectedCell()：取得當(dāng)前選擇的單元格，返回一數(shù)組，其格式：[rowIndex, colIndex]
hasSelection()：當(dāng)前是否有選擇區(qū)域
select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] )：選擇指定單元格

6、Ext.grid.RowSelectionModel
主要配置項(xiàng)：
singleSelect：是否單選模式，默認(rèn)為false，即可以選擇多條數(shù)據(jù)
主要方法：
clearSelections( [Boolean fast] )：清除所有選擇區(qū)域
deselectRange( Number startRow, Number endRow )：取消范圍內(nèi)的行選擇
deselectRow( Number row, [Boolean preventViewNotify] )：取消指定行的選擇狀態(tài)
each( Function fn, [Object scope] )：遍歷所有選擇行，并調(diào)用指定函數(shù)。當(dāng)前被選行將傳入該函數(shù)中
getCount()：得到選擇的總行數(shù)
getSelected()：得到第一個(gè)被選記錄
getSelections()：得到所有被選記錄的數(shù)組
hasNext()：判斷當(dāng)前被選行之后是否還有記錄可以選擇
hasPrevious()：判斷當(dāng)前被選行之前是否還有記錄可以選擇
hasSelection()：是否已選擇了數(shù)據(jù)
isIdSelected( String id )：判斷指定id的記錄是否被選擇
isSelected( Number/Record index )：判斷指定記錄或記錄索引的數(shù)據(jù)是否被選擇
selectAll()：選擇所有行
selectFirstRow()：選擇第一行
selectLastRow( [Boolean keepExisting] )：選擇最后行
keepExisting：是否保持已有的選擇
selectNext( [Boolean keepExisting] )：選擇當(dāng)前選擇行的下一行
selectPrevious( [Boolean keepExisting] )：選擇當(dāng)前選擇行的上一行
selectRange( Number startRow, Number endRow, [Boolean keepExisting] )：選擇范圍內(nèi)的所有行
selectRecords( Array records, [Boolean keepExisting] )：選擇一組指定記錄
selectRow( Number row, [Boolean keepExisting], [Boolean preventViewNotify] )：選擇一行
row：行索引
selectRows( Array rows, [Boolean keepExisting] )：選擇多行
rows：行索引數(shù)組

7、Ext.grid.CheckboxSelectionModel
主要配置項(xiàng)：
singleSelect：是否單選模式，默認(rèn)為false，即可以選擇多條數(shù)據(jù)
checkOnly：是否只能通過點(diǎn)擊checkbox列進(jìn)行選擇，默認(rèn)為false
sortable：是否允許checkbox列排序，默認(rèn)為false
width：checkbox列的寬度，默認(rèn)為20

8、Ext.grid.RowNumberer
主要配置項(xiàng)：
header：行號列表頭顯示的內(nèi)容
width：列寬，默認(rèn)為23

9、Ext.grid.GridView
主要配置項(xiàng)：
enableRowBody：是否包含行體
sortAscText：表格標(biāo)題菜單中升序的文字描述
sortDescText：表格標(biāo)題菜單中降序的文字描述
columnsText：表格標(biāo)題菜單中列對應(yīng)的文字描述
autoFill：是否自動擴(kuò)展列以充滿整個(gè)表格，默認(rèn)為false
forceFit：是否強(qiáng)制調(diào)整表格列寬以適用表格的整體寬度，防止出現(xiàn)水平滾動條，默認(rèn)為false
主要方法：
focusCell( Number row, Number col )：將焦點(diǎn)移到指定單元格
focusRow( Number row )：將焦點(diǎn)移動指定行
getCell( Number row, Number col )：取得指定單元格對應(yīng)的td元素
getHeaderCell( Number index )：取得指定表頭對應(yīng)的td元素
getRow( Number index )：取得指定行對應(yīng)的tr元素
getRowClass( Record record, Number index, Object rowParams, Store store )：得到附加到表格行上的樣式名
record：當(dāng)前行的數(shù)據(jù)記錄對象
index：當(dāng)前行的索引
rowParams：渲染時(shí)傳入到行模板中的配置對象，通過它可以為行體定制樣式，該對象只在enableRowBody為true時(shí)才生效，可能的屬性 如下：
body：渲染到行體中的HTML代碼片段
bodyStyle：應(yīng)用到行體tr元素style屬性的字符串
cols：應(yīng)用到行體td元素colspan屬性的值，默認(rèn)為總列數(shù)
store：表格數(shù)據(jù)集
refresh( [Boolean headersToo] )：刷新表格組件
scrollToTop()：滾動表格到頂端

實(shí)戰(zhàn)1：
讓gridpanel的滾動條自動滾動到最后一條記錄(動態(tài)插入數(shù)據(jù))：
grid.getView().focusRow(vehiclePassInfoGrid.getStore().getCount()-1);

2:清除gridpanel中有行被選擇的狀態(tài)：
grid.getSelectionModel().clearSelections();

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com