萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> Ext Grid控件的配置與方法

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代碼片

copyright © 萬盛學電腦網 all rights reserved