Ext.grid.GridPanel

var grid = new Ext.grid.GridPanel({
    store   //資料來源
    cm      //Ext.grid.columnModel
    columns //功能和Ext.grid.columnModel一樣。與cm有一個就行
    autoWidth:true
    width
    title
    border:false
    columnLines: true,
    renderTo                //顯示div標籤的id
    animCollapse:false      //True 表示為面板閉合過程附有動畫效果 (預設為true,在類 Ext.Fx 可用的情況下).
    collapsible: true,      //true 表示面板可以閉合
    columnLines：true,      //true 表示有格邊框
    loadMask:true           //擷取資料裡時有等待介面
    stripeRows: true,       //雙色表格
    plugins：true,
    bbar:new Ext.PagingToolbar({
        pageSize:10,
        store:store,        //資料來源
        displayInfo:true,   //為true時下面的才顯示
        displayMsg:'顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
        emptyMsg:'沒有記錄'
    }),
    tbar:[{
        text:'查詢',
        icon:'/trade/images/delete.gif',
        cls:'x-btn-text-icon',
        handler:function(){win.show();}
    }
})

//**********************************************
//PagingToolbar分頁
//傳到伺服器資料 start開始查詢位置， limit要查詢多少條
//排序
//伺服器 sort,dir
//**********************************************
var com = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    {header: "客戶ID", width: 50, sortable: true, dataIndex: 'memid'},
    {header: "客戶姓名", width: 75, sortable: true, dataIndex: 'memName'},
    {header:'姓別', width:50, dataIndex:'sex', align:'center', sortable:true, renderer:function(v){return (v == '1')?'<img src="images/user_suit.png">':'<img src="images/user_female.png">';}}
    {header: '跟蹤號',width:150,dataIndex:'code'},
    {header: '日期', width:150, dataIndex: 'kd_time'}
]);

/***********************************************
grid tbar
樣式
cls:'x-btn-text-icon'  添加
**************************************************/
EditorGridPanel
    chickToEdit:1       //點擊次數
    ColumnModel 中要加editor editor:new Ext.form.TextField({
    })
//擷取修改後的資料
var storeEdit = grid.getStore();            //
    var modified = storeEdit.modified.slice(0); //
    Ext.each(modified,function(m){
    alert(m.data.id);                           //資料就在m.data中 id 為欄位名
})
////////////////////////////////////////////////////////////////////////////////////////
//擷取grid資料
var selModel = grid.getSelectionModel();    擷取選擇模式
var record;
if(!selModel.hasSelection()){
    Ext.Msg.alert('警告','請選擇要修改的行!');
    return;
}
selModel.getSelections().length;    //選擇的行數

record = selModel.getSelected();    //擷取選擇行的資料
擷取資料
單行
id = record.get('id');
或者
id = record.data.id;
多行
record[i].get('ddd')
刪除資料
var obj = grid.getSelectionModel().getSelected();
store.remove(obj);
grid.getView().refresh();

//////////////////////////////////////////
查詢
store.baseParams['memid'] = fb.form.findField('memid').getValue();
store.baseParams['start'] = 0;
store.load();

/////////////////////////////////
添加一行列
Ext自己帶的一個外掛程式
需要檔案 RowExpander.js
var expand = new Ext.ux.grid.RowExpander({
    tpl : new Ext.Template(
        '<p>{address}</p>'
    )
});
在grid的columns中加 expand，
並在grid屬性中加 plugins: expand