extjs grid搜索分页实例

1. <script type="text/javascript">
2. Ext.onReady(function(){
3.     var ds = new Ext.data.Store({//这是数据源
4.         proxy : new Ext.data.HttpProxy({url:'index.php?model=user&action=list&'}),
5.         reader: new Ext.data.JsonReader({
6.             root: 'topics',
7.             totalProperty: 'totalCount',
8.             id: 'user_id'
9.             },[
10.             'user_id','username','real_name','telephone','station_status','headship'
11.         ])
12.     });
14.     var colModel = new Ext.grid.ColumnModel([//定义列
15.          {header:'ID',width:50,sortable:true,dataIndex:'user_id'},
16.          {id:'title',header:'用户名', width:100,sortable:true,dataIndex:'username'},
17.          {header:'真实姓名',width:100,sortable:true,dataIndex:'real_name'},
18.          {header:'电话',width:100,sortable:true,dataIndex:'telephone'},
19.          {header:'岗位状态',width:100,sortable:true,dataIndex:'station_status'},
20.          {header:'职务',width:100,sortable:true,dataIndex:'headship'}
21.         ]);
22.     var tb = new Ext.Toolbar('north-div');//创建一个工具条
23.     
24.     tb.add({
25.         text: '添加',
26.         handler: newUser
27.         },{
28.         text: '编辑',
29.         handler: editUser
30.         },{
31.         text: '删除',
32.         handler: delUser
33.     });
34.         
35.     var grid = new Ext.grid.GridPanel({//列表
36.                 border:false,
37.                 region:'south',
38.                 height:500,
39.                 loadMask: true,
40.                 el:'center',
41.                 title:'条目列表',
42.                 store: ds,
43.                 cm: colModel,
44.                 autoScroll: true,
45.                 bbar: new Ext.PagingToolbar({
46.                     pageSize: 20,
47.                     store: ds,
48.                     displayInfo: true,
49.                     displayMsg: '第{0} 到 {1} 条数据 共{2}条',
50.                     emptyMsg: "没有数据"
51.                 })
52.             });
53.     var top = new Ext.FormPanel({//这里是搜索表单
54.         buttonAlign:'right',
55.         labelWidth:70,
56.         region:'center',
57.         frame:true,
58.         title: '搜索',
59.         items: [{
60.                 layout:'column',
61.                 items:[{
62.                     columnWidth:.33,
63.                     layout: 'form',
64.                     items: [{
65.                         xtype:'textfield',
66.                         fieldLabel: '用户名',
67.                         id: 'username',
68.                         name: 'username',
69.                         anchor:'90%'
70.                     }]
71.                 },{
72.                     columnWidth:.33,
73.                     layout: 'form',
74.                     items: [{
75.                         xtype:'textfield',
76.                         fieldLabel: '姓名',
77.                         name: 'real_name',
78.                         id: 'real_name',
79.                         anchor:'90%'
80.                     }]
81.                 },{
82.                     columnWidth:.33,
83.                     layout: 'form',
84.                     items: [{
85.                         xtype:'textfield',
86.                         fieldLabel: 'Email',
87.                         name: 'email',
88.                         id: 'email',
89.                         vtype:'email',
90.                         anchor:'90%'
91.                     }]
92.                 }]
93.             }
94.         ],
96.         buttons: [{
97.             text: '保存',
98.             handler:function(){
99.                                 // 这里是关键，重新载入数据源，并把搜索表单值提交
100.                 ds.load({params:{start:0, limit:20,
101.                     username:Ext.get('username').dom.value,
102.                     real_name:Ext.get('real_name').dom.value,
103.                     email:Ext.get('email').dom.value}});
104.             }
105.         },{
106.             text: '重置',
107.             handler:function(){top.form.reset();}
108.         }]
109.     });
110.     var viewport = new Ext.Viewport({
111.         layout:'border',
112.         items:[{
113.               border:false,
114.               region:'north',
115.               contentEl:'north-div',
116.               tbar:tb,
117.               height:26
118.             },top,
119.             grid
120.         ]}
121.     );
122.     ds.load({params:{start:0, limit:20}});
123.         // 这里很关键，如果不加，翻页后搜索条件就变没了，这里的意思是每次数据载入前先把搜索表单值加上去，这样就做到了翻页保留搜索条件了
124.     ds.on('beforeload',function(){
125.         Ext.apply(
126.         this.baseParams,
127.         {
128.             username:Ext.get('username').dom.value,
129.             real_name:Ext.get('real_name').dom.value,
130.             email:Ext.get('email').dom.value
131.         });
132.     });
133.     function newUser() {
134.         parent.newTab('400012','添加用户','index.php?model=user&action=add');
135.     }
136.     function editUser() {
137.         var s = grid.getSelectionModel().getSelections();
138.         if (s.length==0) {
139.             Ext.Msg.alert('出错啦','你还没有选择要操作的记录！');
140.         }
141.         for (i=0;i<s.length;i++) {
142.             var id = s[i].id;
143.             parent.newTab('400012'+id,'编辑用户','index.php?model=user&action=add&user_id='+id);
144.         }
145.     }
146.     function delUser() {
147.         var ids = getId(grid);
148.         if (ids) {
149.             Ext.Msg.confirm('确认', '真的要删除吗？', function(btn){
150.                 if (btn == 'yes'){
151.                     Ext.Ajax.request({
152.                        url: 'index.php?model=user&action=delete&ids='+ids,
153.                        success: function(result){
154.                             json = Ext.util.JSON.decode(result.responseText);
155.                             ds.reload();
156.                             }
157.                     });
158.                 }
159.             });     
160.         } else {
161.             Ext.Msg.alert('出错啦','你还没有选择要操作的记录！');
162.         }
163.     }
164.     loadend();
165. });
166. </script>
167. <div id="north-div"></div>
168. <div id="center"></div>