新建可翻页 Ext Grid

js 代码

 

1. <script type="text/javascript" language="javascript">   
2.   var v = this;  
3.   while(v.parent){  
4.     v = v.parent;  
5.     if(v == v.parent) {  
6.       break;  
7.   }  
8. }  
9. var SearchDialog = v.Agideo.Page.SearchDialog;  
10. </script>  
11. <script type="text/javascript">  
12.   var SearchGrid = function() {  
13.     var cm, ds, grid, btns, toolbar;  
14.     var fnCallBack = function() {  
15.       if(ds.getCount() > 0) {  
16.         grid.getSelectionModel().selectFirstRow();  
17.         btns.btn_choose.setDisabled(false);  
18.       }  
19.     };  
20.     var setValueForParent = function() {  
21.       var desc = grid.getSelectionModel().getSelected().data["desc"].replace(/<br\/>/g, "\r\n");  
22.       switch('<%= params[:c].downcase %>') {  
23.         case 'shipper':  
24.           SearchDialog.setShipper(desc);  
25.           break;  
26.         case 'consignee':  
27.           SearchDialog.setConsignee(desc);                
28.           break;  
29.         case 'notifyparty':  
30.           SearchDialog.setNotifyParty(desc);  
31.           break;  
32.         default:  
33.           break;  
34.       }  
35.     };  
36.   
37.     return {  
38.       init : function() {  
39.         if(!ds) {  
40.           ds =  new Ext.data.Store({  
41.             proxy: new Ext.data.ScriptTagProxy({  
42.               url: '<%= url_for(:controller => "booking_notes", :action => "get_search_json", :c => params[:c]) %>'  
43.             }),  
44.             baseParams: {q : ''},  
45.             reader: new Ext.data.JsonReader({  
46.               root: 'records',  
47.               totalProperty: 'total',  
48.               id: 'id'  
49.             },[{  
50.               name: 'desc', mapping: 'desc'  
51.             }])  
52.           })  
53.         }  
54.         if(!cm) {  
55.           cm = new Ext.grid.ColumnModel([{  
56.             header: '<%= l(:field_description) %>',  
57.             dataIndex: 'desc',  
58.             sortable: true  
59.           }]);  
60.           cm.defaultSortable = true;  
61.         }  
62.         if(!grid) {  
63.           grid = new Ext.grid.Grid('search_result_grid', {  
64.             ds: ds,  
65.             cm: cm,  
66.             selModel: new Ext.grid.RowSelectionModel({  
67.               singleSelect: true  
68.             }),  
69.             enableColLock: false,  
70.             monitorWindowResize: true,  
71.             fitToFrame:true,  
72.             loadMask: true,  
73.             height: 418,  
74.             autoSizeColumns: true  
75.           });  
76.         }  
77.         grid.on("dblclick", function(e) {  
78.           setValueForParent();  
79.         });  
80.         grid.render();  
81.           
82.         var gridFoot = grid.getView().getFooterPanel(true);  
83.         var paging = new Ext.PagingToolbar(gridFoot, ds, {  
84.           pageSize: 10,  
85.           displayInfo: true,  
86.           displayMsg: 'Displaying records {0} - {1} of {2}',  
87.           emptyMsg: "No records to display"  
88.         });  
89.   
90.         var gridHeader = grid.getView().getHeaderPanel(true);  
91.         toolbar = new Ext.Toolbar(gridHeader);  
92.         toolbar.add('<input id="search_question" οnkeypress="if(event.keyCode == 13){ SearchGrid.clickSearchButton(); }">', {  
93.           id: 'btn_search',  
94.           text: '<%= l(:button_search) %>',  
95.           icon: '/images/search_button.gif',  
96.           pressed: false,  
97.           repeat: false,  
98.           cls: "x-btn-text-icon",  
99.           handler: function() {  
100.             SearchGrid.reload(Ext.getDom('search_question').value);  
101.           }  
102.         }, {  
103.           id: 'btn_choose',  
104.           text: '<%= l(:button_ok) %>',  
105.           disabled: true,  
106.           icon: '/images/ok.png',  
107.           pressed: false,  
108.           repeat: false,  
109.           cls: "x-btn-text-icon",  
110.           handler: function() {  
111.             setValueForParent();  
112.           }  
113.         });  
114.         if(!btns) {  
115.           btns = toolbar.items.map;  
116.         }  
117.         SearchGrid.reload('');  
118.       },  
119.       reload : function(q) {  
120.         ds.baseParams.q = q;  
121.         ds.load({  
122.           params:{  
123.             start: 0, limit: 10  
124.           },  
125.           callback: fnCallBack  
126.         });  
127.       },  
128.       clickSearchButton : function() {  
129.         btns.btn_search.handler();  
130.       }  
131.     };  
132.   }();  
133.   Ext.onReady(function(){  
134.     SearchGrid.init();  
135.   });  
136. </script>  
137. <div id="search_result_grid" style="clear:both; height:100%;"></div>