Ext.define('User', { 
 extend: 'Ext.data.Model', 
 fields: [ 'name', 'email', 'phone' ] 
}); 

var userStore = Ext.create('Ext.data.Store', { 
 model: 'User', //剛才創(chuàng)建的User Model 
 data: [ 
 { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' }, 
 { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' }, 
 { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' }, 
 { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' } 
 ] 
}); 

Ext.create('Ext.grid.Panel', { 
 renderTo: Ext.getBody(), 
 store: userStore, //綁定上面創(chuàng)建的Store 
 width: 400, 
 height: 200, 
 title: 'Application Users', 
 columns: [ 
 { 
 text: 'Name', 
 width: 100, 
 sortable: false, 
 hideable: false, 
 dataIndex: 'name' //Grid Panel中顯示的字段，必須要和User Model中的字段一致 
 }, 
 { 
 text: 'Email Address', 
 width: 150, 
 dataIndex: 'email', 
 hidden: true 
 }, 
 { 
 text: 'Phone Number', 
 flex: 1, 
 dataIndex: 'phone' 
 } 
 ] 
}); 

Ext.create('Ext.data.Store', { 
 model: 'Employee', 
 data: ..., 
 groupField: 'department' //設置數(shù)據(jù)按照department分組 
}); 

Ext.create('Ext.grid.Panel', { 
 ... 
 features: [{ ftype: 'grouping' }] 
}); 

Ext.create('Ext.data.Store', { 
 model: 'User', 
 autoLoad: true, 
 pageSize: 4, //設置每頁顯示的數(shù)據(jù)數(shù)量 
 proxy: { 
 type: 'ajax', 
 url : 'data/users.json', 
 reader: { 
 type: 'json', 
 root: 'users', //指定從json的哪個屬性獲取數(shù)據(jù)，如果不指定，則從json的跟屬性獲取 
 totalProperty: 'total' //總數(shù)據(jù)數(shù)量 
 } 
 } 
}); 

{ 
 "success": true, 
 "total": 12, 
 "users": [ 
 { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" }, 
 { "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" }, 
 { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" }, 
 { "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" } 
 ] 
} 

Ext.create('Ext.grid.Panel', { 
 store: userStore, 
 columns: ..., 
 dockedItems: [{ 
 xtype: 'pagingtoolbar', //在Grid Panel中添加paging toolbar 
 store: userStore, //把paging toolbar的Store設置成和Grid Panel的Store一樣 
 dock: 'bottom', 
 displayInfo: true 
 }] 
}); 

Ext.create('Ext.grid.Panel', { 
 //使用Paging Scroller分頁插件 
 verticalScroller: 'paginggridscroller', 
 // do not reset the scrollbar when the view refreshs 
 invalidateScrollerOnRefresh: false, 
 // infinite scrolling does not support selection 
 disableSelection: true, 
 // ... 
}); 

Ext.create('Ext.grid.Panel', { 
 selModel: Ext.create('Ext.selection.CheckboxModel'), //設置Grid Panel的選擇模式為Checkbox 
 store: userStore, 
 columns: ... 
}); 

var grid = new Ext.grid.GridPanel({ 
 store //數(shù)據(jù)源 
 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 //獲取數(shù)據(jù)里時有等待界面 
 stripeRows: true, //雙色表格 
 plugins：true, 
 bbar:new Ext.PagingToolbar({ 
 pageSize:10, 
 store:store, //數(shù)據(jù)源 
 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分頁 
//傳到服務器數(shù)據(jù) 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 //點擊次數(shù) 
 ColumnModel 中要加editor editor:new Ext.form.TextField({ 
 }) 
//獲取修改后的數(shù)據(jù) 
var storeEdit = grid.getStore(); // 
 var modified = storeEdit.modified.slice(0); // 
 Ext.each(modified,function(m){ 
 alert(m.data.id);  //數(shù)據(jù)就在m.data中 id 為字段名 
}) 

//獲取grid數(shù)據(jù) 
var selModel = grid.getSelectionModel(); 獲取選擇模式 
var record; 
if(!selModel.hasSelection()){ 
 Ext.Msg.alert('警告','請選擇要修改的行!'); 
 return; 
} 
selModel.getSelections().length; //選擇的行數(shù) 
 
record = selModel.getSelected(); //獲取選擇行的數(shù)據(jù) 

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

var expand = new Ext.ux.grid.RowExpander({ 
 tpl : new Ext.Template( 
 '<p>{address}</p>' 
 ) 
});