二. 常用的屬性：
1.sortable:true,//sortable設為排序
2.enableColumnMove:false,//設置是否拖放列
3.enableColumnResize:false,//設置是否改變列大小
4.stripeRows:true, //每列是否是斑馬線分開
5.loadMask:true, //加載時有加載的圖標
6.autoExpandColumn:'要自定義寬度的id' //可以制定列的寬度自動伸展。只能制定一列的id,所以要在前面指定的列先寫好id
7.viewConfig:{
forceFit:true //每列自動充滿Grid
}
8.sortInfo: {field: "name", direction: "ASC"}//在原來的前提下，加此行：field代表排序列名，direction代表排序方式(ASC是升序，DESC是降序)
9.renderer: Ext.util.Format.dateRenderer('Y-m-d')
//這里需要添加的renderer屬性的值設置為Ext.util.Format.dateRenderer。這是為我們提供的格式
10.type:'date',dateFormat: 'Y-m-dTH:i:s'//type是reader解析時把這一列作為日期類型處理，dateFormat是把得到的字符串轉換成相應的日期格式
10-2.在寫數據的時候要：'1970-01-15T02:58:04',//添加一列時間的數據，格式要和下面設置的dateFormat一樣
11.new Ext.grid.RowNumberer(), //自動顯示行號
12.<input type="button" id="remove" value="刪除第二行" />//新建按鈕，id="remove"
Ext.get('remove').on('click', function() {//獲得id，執行點擊事件
store.remove(store.getAt(1));//store.getAt(a)是找到要找的那行的內容,a從0開始(及第一行就是0)，該代碼表示刪除改行的信息
grid.view.refresh();//清除一行信息，最左邊顯示的行的id重新編號
});
13.var sm = newExt.grid.CheckboxSelectionModel();//新建復選框的對象，使用的時候直接寫 'sm'
14.Ext.grid.RowSelectionModel({singleSelect:true})//設置行是否可以按shift多選（true為不可以）
15.只選一行執行
grid.on('click', function() {
var selections = grid.getSelectionModel().getSelections();
for (var i = 0; i < selections.length; i++) {
var record = selections[i];
Ext.Msg.alert('提示', record.get("id") + "," + record.get("name") + "," + record.get("descn"));
}
}); //點擊一行，就輸出該行的信息
16.表格視圖
var grid = new Ext.grid.GridPanel({
//設置各種監聽器可看做控制器
height: 80,
width: 450,
renderTo: 'grid',
store: new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, meta)
}),
columns: meta
});//表格定義太小的話，自己默認產生滾動條
grid.getView().scrollToTop();//滾動條滾動到最上面
grid.getView().focusCell(0, 0);//焦點定位在第一行的第一列
17.自己定義，改變GridView的初始參數
viewConfig: {
columnsText: '顯示的列',
scrollOffset: 30,//表示表格右側為滾動條預留的寬度
sortAscText: '升序',
sortDescText: '升序',
forceFit: true //表格自動延展每列的長度，使內容充滿整個表格
}
18.Grid添加分頁工具條
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
autoHeight: true,
store: store,
cm: cm,
bbar: new Ext.PagingToolbar({
pageSize: 10, //每頁顯示信息的條數
store: store,
displayInfo: true, //是否顯示數據信息
displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條', //在displayInfo有效的前提上，{0}{1}{2}中的數據會自己替換掉
emptyMsg: "沒有記錄" //沒有數據時顯示的信息
})
});
store.load();
19.通過后台獲取分頁數據
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'09_02_01.jsp'}), //直接通過Http訪問數據
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty', //對應JSP代碼中返回的totalProperty，就是數據的總數
root: 'root' //root對應的JSP代碼中的返回的root，也就是一個包含返回數據的數組
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
以及要改變store.load();為：
store.load({params:{start:0,limit:10}}); //初始化時通過傳參數去獲得希望得到的那部分數據，start指示從第幾條數據開始顯示，limit指從start開始一共幾條數據