extjsstoredate

『壹』 如何讓Extjs4.1中的treegrid和treestore實現分頁

Extjs treeGrid分頁實例，項目中用到，拿出來跟大家分享一下，主要是通過兩個store實現。

[javascript] view plain
ProTreeGrid = Ext.extend(Ext.tree.Panel, {
_baseParam : {
process : '項目立項',
isShow : 'true',
start : 1
},
constructor : function(_config) {
if (_config == null)
_config = {};
Ext.apply(this, _config);

this.store1 = Ext.create('Ext.data.JsonStore', {
autoLoad : true,
pageSize : basicConstant.LIMIT,
proxy : {
type : 'ajax',
url : "xmgl/pro-info-manage!page.action",
extraParams : this._baseParam,
reader : {
type : 'json',
root : 'rows',
totalProperty : "totalCount"
}
},
model : 'ProInfo'
});

this.store = Ext.create('Ext.data.TreeStore', {
model : 'ProInfo',
proxy : {
type : 'ajax',
url : 'xmgl/pro-info-manage.action'
},
folderSort : true,
listeners : {
'beforeload' : {
fn : function(_s, _op, _e) {
this._baseParam.limit = basicConstant.LIMIT;
_s.proxy.extraParams = this._baseParam;
},
scope : this
}
}
});

this['selModel'] = Ext.create('Ext.selection.TreeModel', {
mode : 'SINGLE',
listeners : {
'selectionchange' : {
fn : this.selectionChangeHandler,
scope : this
}
}
});
this['columns'] = [ {
xtype : 'treecolumn',
text : '項目性質',
flex : 1,
sortable : true,
dataIndex : 'proClass'
}, {
text : '項目名稱',
flex : 2.5,
dataIndex : 'proName',
sortable : true
}, {
text : '流程狀態',
flex : .75,
dataIndex : 'process',
sortable : true
}, {
text : '項目時間',
xtype : 'datecolumn',
format : 'Y-m-d',
dataIndex : 'crTime',
sortable : true,
flex : .85
}, {
text : '項目編號',
flex : 1,
dataIndex : 'proNo',
sortable : true
}, {
text : '項目單位',
flex : 1,
dataIndex : 'unit',
sortable : true
}, {
text : '優先順序',
flex : .6,
dataIndex : 'priority',
sortable : true
}, {
text : '項目類型',
flex : .75,
dataIndex : 'proType',
sortable : true
}, {
text : '項目內容',
flex : 2,
dataIndex : 'proContent',
sortable : true
}, {
text : '附件數',
flex : .6,
dataIndex : 'fileCount',
sortable : true
} ]
ProTreeGrid.superclass.constructor.call(this, {
useArrows : true,
height : this._height,
width : this._width,
autoScroll : true,
rootVisible : false,
dockedItems : [ {
_treeGrid : this,
xtype : 'pagingtoolbar',
id : 'PROTREEGRID_PAGEBAR',
store : this.store1,
dock : 'bottom',
displayInfo : true,
listeners : {
change : function(obj, pdata, options) {
if(this._treeGrid._baseParam.start==pdata.currentPage)
return;
this._treeGrid._baseParam.start = pdata.fromRecord;
this._treeGrid._baseParam.limit = basicConstant.LIMIT;
this._treeGrid.store.load( {
params : this._treeGrid._baseParam
});
}
}
} ],
viewConfig : {
stripeRows : true,
enableTextSelection : true,
getRowClass : function(record) {
if (record.get("proClass") == '收入項目') {
return 'srcss';
} else if (record.get("proClass") == '支出項目') {
return 'zccss';
}
}
},
tbar : new Ext.toolbar.Toolbar( {
id : 'TBAR_PROTREEGRID',
items : [ new ProClassQueryCombo( {
width : 140,
labelWidth : 60
}), '-', '項目名稱：', {
xtype : 'textfield',
width : 70
}, '無分項總體項目顯示：', {
xtype : 'checkbox',
checked : true,
width : 70
}, {
text : "查詢",
icon : 'images/icons/search.gif',
handler : this.onSearch,
scope : this
}, {
text : "重置",
icon : 'images/icons/del.gif',
handler : this.onReset,
scope : this
}, {
text : "高級查詢",
icon : 'images/icons/search.gif',
handler : this.onAdvSearch,
scope : this
} ]
})
});
},
selectionChangeHandler : function() {
},
reLoadData : function() {
this.store.load( {
params : this._baseParam
});
this.store1.load( {
params : this._baseParam
});
},
onSearch : function() {
var _param = {};
var _tbar = Ext.getCmp('TBAR_PROTREEGRID');
_param.process = _tbar.items.items[0].value;
_param.proClass = _tbar.items.items[2].value;
_param.proName = _tbar.items.items[5].value;
_param.isShow = _tbar.items.items[7].value;
// this.store1.load(1);
this._baseParam = _param
this.reLoadData();
},
onReset : function() {
var _tbar = Ext.getCmp('TBAR_PROTREEGRID');
_tbar.items.items[0].setValue('項目立項');
_tbar.items.items[2].setValue('');
_tbar.items.items[5].setValue('');
this._baseParam = {
process : '項目立項',
isShow : 'false'
};
},
onAdvSearch : function() {
new ProQueryWin( {
_grid : this,
_process : '項目立項'
}).show();
}

});

『貳』 初學ExtJS,遇到一個問題，firefox報錯為Ext.define is not a function

您好，感謝您對火狐的支持

var conn = Ext.data.Connection()//這么寫少了一個new，正確寫法：
var conn = new Ext.data.Connection();
您專可以在火狐官方網站下載火狐瀏覽屬器，在火狐社區了解更多內容。希望我的回答對您有所幫助，如有疑問，歡迎繼續在本平台咨詢。

『叄』 extjs 在grid編輯控制項上 點一個單元格修改後 怎樣及時保存到資料庫

手頭沒有代碼，兄弟，我曾靜做過，給你個思路
ext例子有個編輯單元格的例子，你先看那版個，當你編輯權完，應點擊保存，再保存到資料庫中，具體是點保存的時候加上一個函數，在函數中，拿到修改的東東，ajax請求後台，把你修改的值拼成json串傳到後台，在後台將之轉換成對象屬性並進行資料庫更新 ，當然也可以拼成一個數組，傳到後台 ，看你喜好了。

『肆』 extjs 獲取store部分值

代碼如下:
// ArrayStore
var keyNameStore = new Ext.data.ArrayStore({
fields: ['text', 'value'],
data : [
['商品編號','Meta_proctsNo'],
['商品名稱','Meta_proctName']
]
});

// 通過value值獲取keyNameStore裡面的text
function getFilterFieldLable(value){
var rt = "";
var rowIndex = keyNameStore.getCount();
for(var i=0;i<rowIndex;i++){
var record = keyNameStore.getAt(i);
var fields = Ext.util.JSON.encode(record.data);
var fieldObj = Ext.util.JSON.decode(fields);
if(value==fieldObj.value){
rt = fieldObj.text;
break;
}
}
return rt;
}

『伍』 extjs 控制項事件大全

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.form.FieldSet

animCollapse：動畫折疊，默認為false
checkboxToggle：設置是否顯示欄位集的checkbox選擇框，默認為false
checkboxName：指定欄位集中用於展開或隱藏欄位集面板的checkbox的名字，該屬性只有在checkboxToggle為true時生效
labelWidth：欄位標簽的寬度，可以級聯到子容器
layout：布局，默認為form

Ext.form.DateFied

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()：取得日期值

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 )：

Ext.from.RadioGroup

allowBlank：
blankText：

Ext.form.Radio;

getGroupValue()：
setValue( value {String/Boolean} )：

Ext.form.CheckboxGroup

allowBlank：是否允許不選擇，默認為true
blankText：
columns：顯示的列數，可選值包括：固定值auto、數值、數組（整數、小數）
items：對象數組
vertical：是否垂直方向顯示對象，默認為false

Ext.form.Checkbox

boxLabel：復選框的文字描述
checked：復選框是否被選擇，默認為false
handler：當checked值改變時觸發的函數，函數包含兩個參數：checkbox、checked
inputValue：
方法：
getValue()：返回復選框的checked狀態
setValue( Boolean/String checked )：

Ext.form.NumberField

allowDecimals：是否允許輸入小數，默認為true
allowNegative：是否允許輸入負數，默認為true
baseChars：輸入的有效數字集合，默認為'0123456789'
decimalPrecision：數字的精度，默認保留小數點後2位
decimalSeparator：十進制分隔符，默認為'.'
maxValue：允許輸入的最大數值
maxText：超過最大值之後的提示信息
minValue：允許輸入的最小數值
minText：超過最小值之後的提示信息
nanText：輸入非有效數值之後的提示信息

Ext.form.TextArea

preventScrollbars：是否禁止出現滾動條，默認為false

『陸』 extjs4.2 怎麼顯示的時候把後邊的0去掉

解決思路：

1. 資料庫里的欄位類型查詢出來的欄位最好變成yyyy-MM-dd格式（伺服器程序里查詢出日期後處卜檔理為2015-01-01）。

2. 前台定義extjs的前台GridPanel的columns里邊為你的這個顯示列加上renderer函數格式化一下日期即可（renderer:function(value){returnvalue?Ext.Date.dateFormat(value,"Y-m-d"):'';}）。

   下邊是代碼，你自己參考對比兩列看吧，第一列有renderer函數，第二列沒有：

Ext.create('Ext.data.Store',洞爛{
storeId:'simpsonsStore',
fields:[
{name:'xuqiu',type:'date',dateFormat:'Y-m-d'},
{name:'sheji',type:'date',dateFormat:'Y-m-d'}
],
data:{'items':[
{'xuqiu':'2015-12-31',"sheji":"2015-05-15"},
{'xuqiu':'2015-05-01',"sheji":"2015-05-15"},
{'xuqiu':'2015-04-23',"sheji":"2015-04-14"},
{'xuqiu':'2015-01-01',"sheji":"2015-05-18"}
]},
proxy:{
type:'memory',
reader:{
type:'json',
root:'items'
}
}
});

Ext.create('Ext.grid.Panel',{
title:'For半世迷離xi日期格式顯示問題',
store:Ext.data.StoreManager.lookup('simpsonsStore'),
型顫亂columns:[
{text:'需求',dataIndex:'xuqiu',width:245,
renderer:function(value){returnvalue?Ext.Date.dateFormat(value,"Y-m-d"):'';}},
{text:'設計',dataIndex:'sheji',width:245}
],
height:200,
width:500,
renderTo:Ext.getBody()
});

運行出來的效果：

希望能幫到你，還有建議多看看Extjs API。

『柒』 Extjs4 Calendar例子如何把Memory類型的store改為Ajax的json形式如果有實例更好

你需要配置 dateFormat
StartDate: {
name: 'StartDate',
mapping: 'start',
type: 'date',
dateFormat: 'c'
},
比如 'F j, Y, g:i a' 對應 January 10, 2007, 3:05 pm

具體配置參見下表
Format Description Example returned values
------ ----------------------------------------------------------------------- -----------------------
d Day of the month, 2 digits with leading zeros 01 to 31
D A short textual representation of the day of the week Mon to Sun
j Day of the month without leading zeros 1 to 31
l A full textual representation of the day of the week Sunday to Saturday
N ISO-8601 numeric representation of the day of the week 1 (for Monday) through 7 (for Sunday)
S English ordinal suffix for the day of the month, 2 characters st, nd, rd or th. Works well with j
w Numeric representation of the day of the week 0 (for Sunday) to 6 (for Saturday)
z The day of the year (starting from 0) 0 to 364 (365 in leap years)
W ISO-8601 week number of year, weeks starting on Monday 01 to 53
F A full textual representation of a month, such as January or March January to December
m Numeric representation of a month, with leading zeros 01 to 12
M A short textual representation of a month Jan to Dec
n Numeric representation of a month, without leading zeros 1 to 12
t Number of days in the given month 28 to 31
L Whether it's a leap year 1 if it is a leap year, 0 otherwise.
o ISO-8601 year number (identical to (Y), but if the ISO week number (W) Examples: 1998 or 2004
belongs to the previous or next year, that year is used instead)
Y A full numeric representation of a year, 4 digits Examples: 1999 or 2003
y A two digit representation of a year Examples: 99 or 03
a Lowercase Ante meridiem and Post meridiem am or pm
A Uppercase Ante meridiem and Post meridiem AM or PM
g 12-hour format of an hour without leading zeros 1 to 12
G 24-hour format of an hour without leading zeros 0 to 23
h 12-hour format of an hour with leading zeros 01 to 12
H 24-hour format of an hour with leading zeros 00 to 23
i Minutes, with leading zeros 00 to 59
s Seconds, with leading zeros 00 to 59
u Decimal fraction of a second Examples:
(minimum 1 digit, arbitrary number of digits allowed) 001 (i.e. 0.001s) or
100 (i.e. 0.100s) or
999 (i.e. 0.999s) or
999876543210 (i.e. 0.999876543210s)
O Difference to Greenwich time (GMT) in hours and minutes Example: +1030
P Difference to Greenwich time (GMT) with colon between hours and minutes Example: -08:00
T Timezone abbreviation of the machine running the code Examples: EST, MDT, PDT ...
Z Timezone offset in seconds (negative if west of UTC, positive if east) -43200 to 50400
c ISO 8601 date
Notes: Examples:
1) If unspecified, the month / day defaults to the current month / day, 1991 or
the time defaults to midnight, while the timezone defaults to the 1992-10 or
browser's timezone. If a time is specified, it must include both hours 1993-09-20 or
and minutes. The "T" delimiter, seconds, milliseconds and timezone 1994-08-19T16:20+01:00 or
are optional. 1995-07-18T17:21:28-02:00 or
2) The decimal fraction of a second, if specified, must contain at 1996-06-17T18:22:29.98765+03:00 or
least 1 digit (there is no limit to the maximum number 1997-05-16T19:23:30,12345-0400 or
of digits allowed), and may be delimited by either a '.' or a ',' 1998-04-15T20:24:31.2468Z or
Refer to the examples on the right for the various levels of 1999-03-14T20:24:32Z or
date-time granularity which are supported, or see 2000-02-13T21:25:33
http://www.w3.org/TR/NOTE-datetime for more info. 2001-01-12 22:26:34
U Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT) 1193432466 or -2138434463
MS Microsoft AJAX serialized dates \/Date(1238606590509)\/ (i.e. UTC milliseconds since epoch) or
\/Date(1238606590509+0800)\/
time A javascript millisecond timestamp 1350024476440
timestamp A UNIX timestamp (same as U) 1350024866

『捌』 extjs如何獲取Grid中某一行某一列的值

Ext.grid.GridView.getCell( Number row, Number col )：取得指定單元格對應的td元素

例如：

varsStr=Ext.grid.GridView.getCell(0,0);

再給你一些常用的方法、屬性

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();