发一个 ExtJS 4.2.0 的页面源码(规则比对公式 的设置页面)
页面图:
说明:
- 这是一个 规则比对公式 的设置页面。
- 双击规则行,则刷新规则项列表,双击规则项的行,则刷新项值列表。
- 规则 - rule ; 规则项 - ruleItem ; 项值 - ruleItemValue 。
- 三者均有查、增、改、删的功能。
- 待完善:删除时,应该同时删除下级内容。
jsp 文件:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <%@ page language="java" pageEncoding="UTF-8"%> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 5 <% 6 String pointNumbers = request.getParameter( "pointNumbers" ) ; 7 8 if ( pointNumbers == (null) || pointNumbers.equals("")){ 9 // 从 Session 中读取 。 10 pointNumbers = "0" ; 11 } 12 13 14 15 %> 16 17 <!-- 18 19 2013 0706 Livon 20 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 21 @ 本页的访问地址: 22 http://localhost:8080/squadronMonitor/monitor/main.jsp?groupCode=category 23 24 --> 25 26 <html> 27 <head> 28 29 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 30 <meta http-equiv="Access-Control-Allow-Origin" content="*"> 31 32 <%@ include file="../inc/link_ExtJS.jsp" %> 33 <%@ include file="../inc/css.jsp" %> 34 35 <script type="text/javascript" > 36 var parameters = {} ; 37 var strParam = '<%=pointNumbers %>' ; 38 consoleLog( strParam ) ; 39 parameters.pointNumbers = strParam.split(",") ; 40 41 consoleLog( parameters.pointNumbers ) ; 42 43 consoleLog( parameters.pointNumbers[0] ) ; 44 consoleLog( parameters.pointNumbers[1] ) ; 45 consoleLog( parameters.pointNumbers[2] ) ; 46 consoleLog( parameters.pointNumbers[3] ) ; 47 </script> 48 49 <script type="text/javascript" src="main.js" charset="UTF-8"></script> 50 51 <title>规则管理页</title> 52 53 </head> 54 <body> 55 56 <!-- loading ... --> 57 58 59 <div id="surveil_point_info_picture_panel" class="x-hide-display" 60 style=" padding: 5px ; "> 61 62 <a id="surveil_point_info_picture_1_a" href="" target="_blank"> 63 <img id="surveil_point_info_picture_1" width="390" height="390" src=""/></a> 64 <a id="surveil_point_info_picture_2_a" href="" target="_blank"> 65 <img id="surveil_point_info_picture_2" width="390" height="390" src="" /></a> 66 </div> 67 68 69 <div id="chart_panel" style="height: 600px;"></div> 70 <div id="chart_panel1" style="height: 600px;"></div> 71 72 <div id="west" style="height: 600px;"></div> 73 74 <div id="panel_车辆信息" style="padding: 5px;"> 75 76 <p> 77 车辆品牌 :中华<br /> 78 车辆型号 :骏捷<br /> 79 登记日期 :2013年3月30日<br /> 80 车身颜色 :银白<br /> 81 报废日期 :(未报废) 82 </p> 83 84 </div> 85 86 87 <div id="panel_帮助说明"> 88 <p>定义规则</p> 89 <p style="color: gray ;">[ surveil_data/main.jsp ]</p> 90 </div> 91 92 </body> 93 </html>
js 文件:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 /* 2 * ================ 规则管理 ======================= 3 */ 4 5 var url = { 6 7 // 规则 8 rule : { 9 proxy : '../rule!selectList.action' , 10 insertAction : '../rule!insert.action' , 11 updateAction : '../rule!update.action' , 12 deleteAction : '../rule!delete.action' , 13 } , 14 15 // 规则项 16 ruleItem : { 17 proxy : '../ruleItem!selectList.action' , 18 insertAction : '../ruleItem!insert.action' , 19 updateAction : '../ruleItem!update.action' , 20 deleteAction : '../ruleItem!delete.action' , 21 } , 22 23 // 项值 24 ruleItemValue : { 25 proxy : '../ruleItemValue!selectList.action' , 26 insertAction : '../ruleItemValue!insert.action' , 27 updateAction : '../ruleItemValue!update.action' , 28 deleteAction : '../ruleItemValue!delete.action' , 29 } , 30 31 } ; // url 32 33 34 35 var common = { 36 37 pageSize : { 38 grid : 25 , 39 combo : 10 40 } 41 , 42 pagingToolBar : { 43 displayMsg: '记录: {0} - {1} ,共 {2} 条', 44 emptyMsg: '(无数据)' 45 } 46 , 47 columnWidth : { 48 id : 40 , 49 number : 80 , 50 telephoneNumber : 120 , 51 mobilePhoneNumber : 120 52 } 53 , 54 exampleHtml : '<p>some html content.</p>' 55 , 56 gridHeight : 240 57 , 58 59 } 60 ; // common 61 62 var proxy = { 63 64 extraParams : { 'bean.id' : 0 } , // extraParams 65 actionMethods : { read : 'POST' } , 66 reader : { 67 type : 'json', 68 root : 'rowList', 69 totalProperty : 'rowsCount' 70 } , 71 // 规则 72 rule : { 73 Proxy : null , 74 create : function(){ 75 this.Proxy = { 76 type : 'ajax', 77 url : url.rule.proxy , 78 extraParams : proxy.extraParams , 79 actionMethods : proxy.actionMethods , 80 reader : proxy.reader 81 } ; 82 } 83 } 84 , 85 // 规则项 86 ruleItem : { 87 Proxy : null , 88 create : function(){ 89 this.Proxy = { 90 type : 'ajax', 91 url : url.ruleItem.proxy , 92 extraParams : proxy.extraParams , 93 actionMethods : proxy.actionMethods , 94 reader : proxy.reader 95 } ; 96 } 97 } , 98 // 项值 99 ruleItemValue : { 100 Proxy : null , 101 create : function(){ 102 this.Proxy = { 103 type : 'ajax', 104 url : url.ruleItemValue.proxy , 105 extraParams : proxy.extraParams , 106 actionMethods : proxy.actionMethods , 107 reader : proxy.reader 108 } ; 109 } 110 } , 111 112 create : function(){ 113 this.rule.create() ; 114 this.ruleItem.create() ; 115 this.ruleItemValue.create() ; 116 } 117 } ; // proxy 118 119 proxy.create() ; 120 121 122 123 var model = { 124 // 规则 125 rule : { 126 fields : [ 127 { 128 name: 'id', 129 type: 'int' 130 }, 131 { 132 name: 'rowNumber', 133 type: 'int' 134 }, 135 { 136 name: 'number', 137 type: 'string' 138 }, 139 { 140 name: 'name', 141 type: 'string' 142 } 143 ] , 144 145 define : function() { 146 Ext.define( 'ruleGridDataModel' , { 147 extend: 'Ext.data.Model' , 148 fields: this.fields 149 } ) ; 150 } 151 } , 152 // 规则项 153 ruleItem : { 154 fields : [ 155 { 156 name: 'id', 157 type: 'int' 158 }, 159 { 160 name: 'rowNumber', 161 type: 'int' 162 }, 163 { 164 name: 'fieldName', 165 type: 'string' 166 }, 167 { 168 name: 'comment', 169 type: 'string' 170 } 171 ] , 172 173 define : function() { 174 Ext.define( 'ruleItemGridDataModel' , { 175 extend: 'Ext.data.Model' , 176 fields: this.fields 177 } ) ; 178 } 179 } , 180 // 项值 181 ruleItemValue : { 182 fields : [ 183 { 184 name: 'id', 185 type: 'int' 186 }, 187 { 188 name: 'rowNumber', 189 type: 'int' 190 }, 191 { 192 name: 'comparisonType', 193 type: 'string' 194 }, 195 { 196 name: 'itemValue', 197 type: 'string' 198 }, 199 { 200 name: 'valueMinimum', 201 type: 'string' 202 }, 203 { 204 name: 'valueMaximum', 205 type: 'string' 206 } 207 ] , 208 209 define : function() { 210 Ext.define( 'ruleItemValueGridDataModel' , { 211 extend: 'Ext.data.Model' , 212 fields: this.fields 213 } ) ; 214 } 215 } , 216 217 define : function() { 218 this.rule.define() ; 219 this.ruleItem.define() ; 220 this.ruleItemValue.define() ; 221 } // define 222 223 } // model 224 ; 225 226 model.define() ; 227 228 229 230 231 var store = { 232 233 rule : { 234 Store : null , 235 create : function(){ 236 237 this.Store = Ext.create('Ext.data.Store', { 238 pageSize : common.pageSize.grid , 239 model : 'ruleGridDataModel', 240 proxy : proxy.rule.Proxy 241 }) ; 242 } 243 } , 244 245 ruleItem : { 246 Store : null , 247 create : function(){ 248 249 this.Store = Ext.create('Ext.data.Store', { 250 pageSize : common.pageSize.grid , 251 model : 'ruleItemGridDataModel', 252 proxy : proxy.ruleItem.Proxy 253 }) ; 254 } 255 } , 256 257 ruleItemValue : { 258 Store : null , 259 create : function(){ 260 261 this.Store = Ext.create('Ext.data.Store', { 262 pageSize : common.pageSize.grid , 263 model : 'ruleItemValueGridDataModel', 264 proxy : proxy.ruleItemValue.Proxy 265 }) ; 266 } 267 } , 268 269 // create 270 create : function(){ 271 272 this.rule.create(); 273 this.ruleItem.create(); 274 this.ruleItemValue.create() ; 275 276 } // create 277 , 278 load : function(){ 279 this.rule.Store.load() ; 280 } // load 281 282 } // store 283 ; 284 285 store.create() ; 286 287 288 289 var toolBar = { 290 291 rule : { 292 grid : { 293 toolBar : { 294 xtype: 'toolbar', 295 items : [ { 296 text:'添加新记录', 297 tooltip: '点击后,在弹出的窗口中添加新记录。', 298 iconCls:'add', 299 handler: function(){ fn.rule.insert() ; } 300 } , 301 { 302 text:'修改', 303 tooltip: '点击后,在弹出的窗口中修改所选择的第一条记录。', 304 iconCls:'add', 305 handler: function(){ fn.rule.update() ; } 306 } , 307 { 308 text:'删除', 309 tooltip: '点击后,经确认,将删除所选择的记录,且不可恢复!', 310 iconCls:'add', 311 handler: function(){ fn.rule.del() ; } 312 } 313 ] 314 } , 315 pagingToolBar : null , 316 createPagingToolBar : function(){ 317 this.pagingToolBar = Ext.create('Ext.PagingToolbar', { 318 store: store.rule.Store , 319 displayInfo: true, 320 displayMsg: common.pagingToolBar.displayMsg , 321 emptyMsg: common.pagingToolBar.emptyMsg 322 }); 323 } 324 } 325 , 326 form : { 327 toolBar : {} , 328 } 329 , 330 } , 331 332 ruleItem : { 333 grid : { 334 toolBar : { 335 xtype: 'toolbar', 336 items : [ { 337 text:'添加新记录', 338 tooltip: '点击后,在弹出的窗口中添加新记录。', 339 iconCls:'add', 340 handler: function(){ fn.ruleItem.insert() ; } 341 } , 342 { 343 text:'修改', 344 tooltip: '点击后,在弹出的窗口中修改所选择的第一条记录。', 345 iconCls:'add', 346 handler: function(){ fn.ruleItem.update() ; } 347 } , 348 { 349 text:'删除', 350 tooltip: '点击后,经确认,将删除所选择的记录,且不可恢复!', 351 iconCls:'add', 352 handler: function(){ fn.ruleItem.del() ; } 353 } 354 ] 355 } , 356 pagingToolBar : null , 357 createPagingToolBar : function(){ 358 this.pagingToolBar = Ext.create('Ext.PagingToolbar', { 359 store: store.ruleItem.Store , 360 displayInfo: true, 361 displayMsg: common.pagingToolBar.displayMsg , 362 emptyMsg: common.pagingToolBar.emptyMsg 363 }); 364 } 365 } 366 } , 367 368 ruleItemValue : { 369 grid : { 370 toolBar : { 371 xtype: 'toolbar', 372 items : [ { 373 text:'添加新记录', 374 tooltip: '点击后,在弹出的窗口中添加新记录。', 375 iconCls:'add', 376 handler: function(){ fn.ruleItemValue.insert() ; } 377 } , 378 { 379 text:'修改', 380 tooltip: '点击后,在弹出的窗口中修改所选择的第一条记录。', 381 iconCls:'add', 382 handler: function(){ fn.ruleItemValue.update() ; } 383 } , 384 { 385 text:'删除', 386 tooltip: '点击后,经确认,将删除所选择的记录,且不可恢复!', 387 iconCls:'add', 388 handler: function(){ fn.ruleItemValue.del() ; } 389 } 390 ] 391 } , 392 pagingToolBar : null , 393 createPagingToolBar : function(){ 394 this.pagingToolBar = Ext.create('Ext.PagingToolbar', { 395 store: store.ruleItemValue.Store , 396 displayInfo: true, 397 displayMsg: common.pagingToolBar.displayMsg , 398 emptyMsg: common.pagingToolBar.emptyMsg 399 }); 400 } 401 } 402 } , 403 createPagingToolBar : function(){ 404 this.rule.grid.createPagingToolBar() ; 405 this.ruleItem.grid.createPagingToolBar() ; 406 this.ruleItemValue.grid.createPagingToolBar() ; 407 } 408 409 } // toolBar 410 ; 411 412 toolBar.createPagingToolBar( ) ; 413 414 415 var grid = { 416 417 rule : { 418 Grid : null , 419 onCellClick : function( grid, td, cellIndex, record, tr, rowIndex, e, eOpts ) { 420 421 } 422 , 423 onCellDblClick : function( grid, td, cellIndex, record, tr, rowIndex, e, eOpts ) { 424 var id = record.getData().id ; 425 if ( id > 0 ){ 426 fn.ruleItemReload( id ); 427 fn.ruleItemValueReload( 0 ); 428 } 429 } 430 , 431 432 columns : [ 433 434 { 435 text : '行号', 436 width : common.columnWidth.id , 437 // flex : 1, 438 //sortable : true, 439 //renderer : time_render , 440 dataIndex: 'rowNumber' 441 } , 442 443 { 444 text : '编号', 445 width : common.columnWidth.number , 446 //renderer : time_render , 447 dataIndex: 'number' 448 }, 449 450 { 451 text : '名称', 452 // width : 70, 453 flex : 1, 454 //renderer : time_render , 455 dataIndex: 'name' 456 }, 457 ] , 458 create : function(){ 459 460 this.Grid = Ext.create('Ext.grid.Panel', { 461 462 title: '规则', 463 // height: common.gridHeight , 464 // id : 'grid' , 465 region: 'west', 466 flex: 1, 467 store: store.rule.Store , 468 stateful: true , 469 // collapsible: true , 470 multiSelect: true , 471 stateId: 'stateGrid' , 472 selModel: Ext.create('Ext.selection.CheckboxModel') , 473 autoScroll: true , 474 dockedItems: [ 475 toolBar.rule.grid.toolBar 476 ], // end of dockedItems 477 478 columns: this.columns , 479 viewConfig: grid.viewConfig , 480 bbar : toolBar.rule.grid.pagingToolBar 481 482 }); // ruleGrid 483 } 484 } 485 , 486 487 ruleItem : { 488 Grid : null , 489 onCellClick : function( grid, td, cellIndex, record, tr, rowIndex, e, eOpts ) { 490 491 } 492 , 493 onCellDblClick : function( grid, td, cellIndex, record, tr, rowIndex, e, eOpts ) { 494 var id = record.getData().id ; 495 if ( id > 0 ){ 496 fn.ruleItemValueReload( id ) ; 497 } 498 } 499 , 500 501 columns : [ 502 503 { 504 text : '行号', 505 width : common.columnWidth.id , 506 // flex : 1, 507 //sortable : true, 508 //renderer : time_render , 509 dataIndex: 'rowNumber' 510 } , 511 512 { 513 text : '字段名称', 514 width : 100 , 515 //renderer : time_render , 516 dataIndex: 'fieldName' 517 }, 518 519 { 520 text : '备注', 521 // width : 70, 522 flex : 1, 523 //renderer : time_render , 524 dataIndex: 'comment' 525 }, 526 ] 527 , 528 create : function(){ 529 this.Grid = Ext.create('Ext.grid.Panel', { 530 531 title: '规则项', 532 // height: common.gridHeight , 533 // id : 'grid' , 534 region: 'center', 535 flex: 1, 536 store: store.ruleItem.Store , 537 stateful: true , 538 // collapsible: true , 539 multiSelect: true , 540 stateId: 'stateGrid' , 541 selModel: Ext.create('Ext.selection.CheckboxModel') , 542 autoScroll: true , 543 dockedItems: [ 544 toolBar.ruleItem.grid.toolBar 545 ], // end of dockedItems 546 547 columns: this.columns , 548 viewConfig: grid.viewConfig , 549 bbar : toolBar.ruleItem.grid.pagingToolBar 550 551 }); // ruleGrid 552 } 553 } 554 , 555 556 ruleItemValue : { 557 Grid : null , 558 onCellClick : function( grid, td, cellIndex, record, tr, rowIndex, e, eOpts ) { 559 560 } 561 , 562 onCellDblClick : function( grid, td, cellIndex, record, tr, rowIndex, e, eOpts ) { 563 form.ruleItemValue.fillUpdateform() ; 564 win.ruleItemValue.updateWindow.show() ; 565 } 566 , 567 568 columns : [ 569 570 { 571 text : '行号', 572 width : common.columnWidth.id , 573 // flex : 1, 574 //sortable : true, 575 //renderer : time_render , 576 dataIndex: 'rowNumber' 577 } , 578 579 { 580 text : '比对类型', 581 width : 70, 582 //renderer : time_render , 583 dataIndex: 'comparisonType' 584 }, 585 586 { 587 text : '值', 588 width : 70, 589 // flex : 1, 590 //renderer : time_render , 591 dataIndex: 'itemValue' 592 }, 593 594 { 595 text : '最小值', 596 width : 70, 597 // flex : 1, 598 //renderer : time_render , 599 dataIndex: 'valueMinimum' 600 }, 601 602 { 603 text : '最大值', 604 width : 70, 605 // flex : 1, 606 //renderer : time_render , 607 dataIndex: 'valueMaximum' 608 } 609 ] 610 , 611 create : function(){ 612 this.Grid = Ext.create('Ext.grid.Panel', { 613 614 title: '项值', 615 // height: common.gridHeight , 616 // id : 'grid' , 617 region: 'east', 618 flex: 1, 619 store: store.ruleItemValue.Store , 620 stateful: true , 621 // collapsible: true , 622 multiSelect: true , 623 stateId: 'stateGrid' , 624 selModel: Ext.create('Ext.selection.CheckboxModel') , 625 autoScroll: true , 626 dockedItems: [ 627 toolBar.ruleItemValue.grid.toolBar 628 ], // end of dockedItems 629 630 columns: this.columns , 631 viewConfig: grid.viewConfig , 632 bbar : toolBar.ruleItemValue.grid.pagingToolBar 633 634 }); // ruleGrid 635 } 636 } 637 , 638 639 viewConfig: { 640 stripeRows: true, 641 enableTextSelection: true , 642 listeners: { 643 refresh: function( gridview ) { 644 } 645 } 646 } 647 , 648 649 create : function(){ 650 651 this.rule.create() ; 652 this.ruleItem.create() ; 653 this.ruleItemValue.create() ; 654 655 } 656 } // grid 657 ; 658 659 grid.create() ; 660 661 662 var form = { 663 664 rule : { 665 insertForm : null , 666 updateForm : null , 667 items : [ 668 { 669 xtype: 'textfield', 670 name: 'bean.id', 671 hidden: true 672 } , 673 { 674 xtype: 'textfield', 675 fieldLabel: '编号', 676 name: 'bean.number' 677 } , 678 { 679 xtype: 'textfield', 680 fieldLabel: '名称', 681 name: 'bean.name' 682 } ] , 683 684 fillUpdateForm : function(){ 685 686 687 var msg = '' ; 688 689 var rows = grid.rule.Grid.getSelectionModel().getSelection(); 690 for( var i = 0; i < rows.length; i++){ 691 msg = msg + rows[i].get('name') + '\n'; 692 } 693 694 consoleLog( rows ) ; 695 696 if ( rows.length < 1) { 697 msg = msg + '尚未选择!' ; 698 } else { 699 700 var f = this.updateForm.form ; 701 702 f.setValues( { 'bean.id' : rows[0].get('id') } ); 703 f.setValues( { 'bean.number' : rows[0].get('number') } ); 704 f.setValues( { 'bean.name' : rows[0].get('name') } ); 705 706 } ; 707 } 708 , 709 createInsertForm : function(){ 710 711 this.insertForm = Ext.create('Ext.form.Panel', { 712 713 title: '' , 714 // renderTo: 'newFormContainer', 715 bodyPadding: 5, 716 // width: 350, 717 // margin : '5 0 5 0' , 718 border: 0, 719 shadow: false , 720 721 // Any configuration items here will be automatically passed along to 722 // the Ext.form.Basic instance when it gets created. 723 724 // The form will submit an AJAX request to this URL when submitted 725 url: url.rule.insertAction , 726 727 728 // inline buttons 729 dockedItems: [ 730 { 731 xtype: 'toolbar', 732 items: [ 733 { 734 text:'确认', 735 tooltip:'单击提交,将产生一条新记录。', 736 iconCls:'add' , 737 738 handler: function() { 739 // The getForm() method returns the Ext.form.Basic instance: 740 var form = this.up('form').getForm() ; 741 742 if ( form.isValid() ) { 743 // Submit the Ajax request and handle the response 744 form.submit({ 745 success: function( form, action ) { 746 consoleLog( action ) ; 747 Ext.Msg.alert('添加成功!', '记录已经添加。' ); 748 749 // newRecord.window.close(); 750 win.rule.insertWindow.close() ; 751 752 form.reset(); 753 // gridPagingToolbar.doRefresh() ; 754 toolBar.rule.grid.pagingToolBar.doRefresh() ; 755 756 }, 757 failure: function(form, action) { 758 Ext.Msg.alert("提示", "方法调用失败" ); 759 } 760 }); 761 } 762 } 763 764 },'-',{ 765 itemId: 'resetButton', 766 text:'重置', 767 tooltip:'Remove the selected item', 768 iconCls:'remove' 769 // disabled: true 770 , 771 handler: function() { 772 fn.resetForm( this.up('form').getForm() ) ; 773 } // handler 774 } 775 , 776 777 { 778 text:'隐藏这个窗口', 779 tooltip:'单击提交,将产生一条新记录。', 780 iconCls:'add' , 781 782 handler: function() { 783 win.rule.insertWindow.hide() ; 784 } 785 786 } 787 788 ] 789 }], 790 791 layout: 'anchor', 792 defaults: { 793 anchor: '100%' 794 }, 795 796 items: form.rule.items 797 798 }); // Ext.create 799 } , 800 801 createUpdateForm : function(){ 802 803 804 this.updateForm = Ext.create('Ext.form.Panel', { 805 806 title: '' , 807 // renderTo: 'newFormContainer', 808 bodyPadding: 5, 809 width: 350, 810 //margin : '5 0 5 0' , 811 border: 0, 812 shadow: false , 813 814 url: url.rule.updateAction , 815 816 dockedItems: [ 817 { 818 xtype: 'toolbar', 819 items: [ 820 { 821 text:'确认', 822 tooltip:'单击提交,将执行修改操作。', 823 iconCls:'edit' , 824 825 handler: function() { 826 var form = this.up('form').getForm(); 827 828 if ( form.isValid() ) { 829 form.submit({ 830 success: function( form, action ) { 831 832 Ext.Msg.show({ 833 title: '修改成功', 834 msg: '修改操作成功', 835 width: 500, 836 buttons: Ext.Msg.OKCANCEL, 837 // multiline: true, 838 fn: function( btn, text ){ 839 if ( btn == 'ok') { 840 win.rule.updateWindow.close( ) ; 841 toolBar.rule.grid.pagingToolBar.doRefresh() ; 842 } 843 }, 844 // animateTarget: 'addAddressBtn', 845 icon: Ext.window.MessageBox.INFO 846 }); 847 848 849 }, 850 failure: function(form, action) { 851 // Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response'); 852 Ext.Msg.alert("提示", "方法调用失败" ); 853 } 854 }); 855 } 856 } 857 858 },'-',{ 859 itemId: 'resetButton', 860 text:'重置', 861 tooltip:'Remove the selected item', 862 iconCls:'remove' , 863 handler: function() { 864 fn.resetForm( this.up('form').getForm() ) ; 865 } // handler 866 } 867 , 868 869 { 870 text:'隐藏这个窗口', 871 tooltip:'单击提交,将产生一条新记录。', 872 iconCls:'add' , 873 874 handler: function() { 875 win.rule.updateWindow.hide() ; 876 } 877 878 } 879 880 ] 881 }], 882 883 items: form.rule.items 884 885 }); // Ext.create 886 887 } , 888 } 889 , 890 891 ruleItem : { 892 insertForm : null , 893 updateForm : null , 894 items : [ 895 { 896 xtype: 'textfield', 897 name: 'bean.id', 898 hidden: true 899 } , 900 { 901 xtype: 'textfield', 902 name: 'bean.ruleId', 903 hidden: true 904 } , 905 906 { 907 xtype : 'combo', 908 fieldLabel : '字段', 909 // id : 'warningLevel', 910 store :[['licenseNumber','号牌号码'],['pointNumber','卡口编号']], 911 // width:100, 912 // value:'', 913 triggerAction: "all", 914 mode: "local", 915 allowBlank:false, 916 name: 'bean.fieldName' 917 } 918 , 919 { 920 xtype: 'textfield', 921 fieldLabel: '备注', 922 name: 'bean.comment' 923 } ] , 924 925 fillUpdateForm : function(){ 926 927 var msg = '' ; 928 929 var rows = grid.ruleItem.Grid.getSelectionModel().getSelection(); 930 for( var i = 0; i < rows.length; i++){ 931 msg = msg + rows[i].get('name') + '\n'; 932 } 933 934 consoleLog( rows ) ; 935 936 if ( rows.length < 1) { 937 msg = msg + '尚未选择!' ; 938 } else { 939 940 var f = this.updateForm.form ; 941 942 f.setValues( { 'bean.id' : rows[0].get('id') } ); 943 f.setValues( { 'bean.fieldName' : rows[0].get('fieldName') } ); 944 f.setValues( { 'bean.comment' : rows[0].get('comment') } ); 945 946 } ; 947 } 948 , 949 createInsertForm : function(){ 950 951 this.insertForm = Ext.create('Ext.form.Panel', { 952 953 title: '' , 954 bodyPadding: 5, 955 border: 0, 956 shadow: false , 957 url: url.ruleItem.insertAction , 958 // inline buttons 959 dockedItems: [ 960 { 961 xtype: 'toolbar', 962 items: [ 963 { 964 text:'确认', 965 tooltip:'单击提交,将产生一条新记录。', 966 iconCls:'add' , 967 968 handler: function() { 969 // The getForm() method returns the Ext.form.Basic instance: 970 var form = this.up('form').getForm(); 971 972 if ( form.isValid() ) { 973 // Submit the Ajax request and handle the response 974 form.submit({ 975 success: function( form, action ) { 976 consoleLog( action ) ; 977 Ext.Msg.alert('添加成功!', '记录已经添加。' ); 978 979 // newRecord.window.close(); 980 win.ruleItem.insertWindow.close() ; 981 982 form.reset(); 983 // gridPagingToolbar.doRefresh() ; 984 toolBar.ruleItem.grid.pagingToolBar.doRefresh() ; 985 986 }, 987 failure: function(form, action) { 988 Ext.Msg.alert("提示", "方法调用失败" ) ; 989 } 990 }); 991 } 992 } 993 994 },'-',{ 995 itemId: 'resetButton', 996 text:'重置', 997 tooltip:'Remove the selected item', 998 iconCls:'remove' 999 // disabled: true 1000 , 1001 handler: function() { 1002 var form = this.up('form').getForm(); 1003 fn.resetForm(form) ; 1004 } // handler 1005 } 1006 , 1007 1008 { 1009 text:'隐藏这个窗口', 1010 tooltip:'单击提交,将产生一条新记录。', 1011 iconCls:'add' , 1012 1013 handler: function() { 1014 win.ruleItem.insertWindow.hide() ; 1015 } 1016 1017 } 1018 1019 ] 1020 }], 1021 1022 layout: 'anchor', 1023 defaults: { 1024 anchor: '100%' 1025 }, 1026 1027 items: this.items 1028 1029 }); // Ext.create 1030 } , 1031 1032 createUpdateForm : function(){ 1033 1034 1035 this.updateForm = Ext.create('Ext.form.Panel', { 1036 1037 title: '' , 1038 // renderTo: 'newFormContainer', 1039 bodyPadding: 5, 1040 width: 350, 1041 //margin : '5 0 5 0' , 1042 border: 0, 1043 shadow: false , 1044 1045 url: url.ruleItem.updateAction , 1046 1047 dockedItems: [ 1048 { 1049 xtype: 'toolbar', 1050 items: [ 1051 { 1052 text:'确认', 1053 tooltip:'单击提交,将执行修改操作。', 1054 iconCls:'edit' , 1055 1056 handler: function() { 1057 var form = this.up('form').getForm(); 1058 1059 if ( form.isValid() ) { 1060 form.submit({ 1061 success: function( form, action ) { 1062 1063 Ext.Msg.show({ 1064 title: '修改成功', 1065 msg: '修改操作成功', 1066 width: 500, 1067 buttons: Ext.Msg.OKCANCEL, 1068 // multiline: true, 1069 fn: function( btn, text ){ 1070 if ( btn == 'ok') { 1071 win.ruleItem.updateWindow.close( ) ; 1072 toolBar.ruleItem.grid.pagingToolBar.doRefresh() ; 1073 } 1074 }, 1075 // animateTarget: 'addAddressBtn', 1076 icon: Ext.window.MessageBox.INFO 1077 }); 1078 1079 1080 }, 1081 failure: function(form, action) { 1082 // Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response'); 1083 Ext.Msg.alert("提示", "方法调用失败" ); 1084 } 1085 }); 1086 } 1087 } 1088 1089 },'-',{ 1090 itemId: 'resetButton', 1091 text:'重置', 1092 tooltip:'Remove the selected item', 1093 iconCls:'remove' 1094 // disabled: true 1095 , 1096 handler: function() { 1097 var form = this.up('form').getForm(); 1098 fn.resetForm(form) ; 1099 } // handler 1100 } 1101 , 1102 1103 { 1104 text:'隐藏这个窗口', 1105 tooltip:'单击提交,将产生一条新记录。', 1106 iconCls:'add' , 1107 1108 handler: function() { 1109 win.ruleItem.updateWindow.hide() ; 1110 } 1111 1112 } 1113 1114 ] 1115 }], 1116 1117 items: this.items 1118 1119 }); // Ext.create 1120 1121 } , 1122 1123 } 1124 , 1125 1126 1127 ruleItemValue : { 1128 insertForm : null , 1129 updateForm : null , 1130 items : [ 1131 { 1132 xtype: 'textfield', 1133 name: 'bean.id', 1134 hidden: true 1135 } , 1136 { 1137 xtype: 'textfield', 1138 name: 'bean.ruleItemId', 1139 hidden: true 1140 } , 1141 1142 { 1143 xtype : 'combo', 1144 fieldLabel : '比对类型', 1145 // id : 'warningLevel', 1146 store :[['等于','等于'],['区间','区间']], 1147 // width:100, 1148 // value:'', 1149 triggerAction: "all", 1150 mode: "local", 1151 allowBlank:false, 1152 name: 'bean.comparisonType' 1153 } 1154 , 1155 { 1156 xtype: 'textfield', 1157 fieldLabel: '值', 1158 name: 'bean.itemValue' 1159 } , 1160 { 1161 xtype: 'textfield', 1162 fieldLabel: '最小值', 1163 name: 'bean.valueMinimum' 1164 } , 1165 { 1166 xtype: 'textfield', 1167 fieldLabel: '最大值', 1168 name: 'bean.valueMaximum' 1169 } , 1170 { 1171 xtype: 'textfield', 1172 fieldLabel: '备注', 1173 name: 'bean.comment' 1174 } ] , 1175 1176 fillUpdateform : function(){ 1177 1178 1179 var msg = '' ; 1180 1181 var rows = grid.ruleItemValue.Grid.getSelectionModel().getSelection(); 1182 for( var i = 0; i < rows.length; i++){ 1183 msg = msg + rows[i].get('name') + '\n'; 1184 } 1185 1186 consoleLog( rows ) ; 1187 1188 if ( rows.length < 1) { 1189 msg = msg + '尚未选择!' ; 1190 } else { 1191 1192 var f = this.updateForm.form ; 1193 1194 f.setValues( { 'bean.id' : rows[0].get('id') } ); 1195 f.setValues( { 'bean.comparisonType' : rows[0].get('comparisonType') } ); 1196 f.setValues( { 'bean.itemValue' : rows[0].get('itemValue') } ); 1197 f.setValues( { 'bean.valueMinimum' : rows[0].get('valueMinimum') } ); 1198 f.setValues( { 'bean.valueMaximum' : rows[0].get('valueMaximum') } ); 1199 f.setValues( { 'bean.comment' : rows[0].get('comment') } ); 1200 1201 } ; 1202 } 1203 , 1204 1205 1206 createInsertForm : function(){ 1207 1208 this.insertForm = Ext.create('Ext.form.Panel', { 1209 1210 title: '' , 1211 bodyPadding: 5, 1212 border: 0, 1213 shadow: false , 1214 url: url.ruleItemValue.insertAction , 1215 1216 1217 // inline buttons 1218 dockedItems: [ 1219 { 1220 xtype: 'toolbar', 1221 items: [ 1222 { 1223 text:'确认', 1224 tooltip:'单击提交,将产生一条新记录。', 1225 iconCls:'add' , 1226 1227 handler: function() { 1228 // The getForm() method returns the Ext.form.Basic instance: 1229 var form = this.up('form').getForm(); 1230 1231 if ( form.isValid() ) { 1232 // Submit the Ajax request and handle the response 1233 form.submit({ 1234 success: function( form, action ) { 1235 consoleLog( action ) ; 1236 Ext.Msg.alert('添加成功!', '记录已经添加。' ); 1237 1238 // newRecord.window.close(); 1239 win.ruleItemValue.insertWindow.close() ; 1240 1241 form.reset(); 1242 // gridPagingToolbar.doRefresh() ; 1243 toolBar.ruleItemValue.grid.pagingToolBar.doRefresh() ; 1244 1245 }, 1246 failure: function(form, action) { 1247 Ext.Msg.alert("提示", "方法调用失败" ) ; 1248 } 1249 }); 1250 } 1251 } 1252 1253 },'-',{ 1254 itemId: 'resetButton', 1255 text:'重置', 1256 tooltip:'Remove the selected item', 1257 iconCls:'remove' 1258 // disabled: true 1259 , 1260 handler: function() { 1261 fn.resetForm() ; 1262 } // handler 1263 } 1264 , 1265 1266 { 1267 text:'隐藏这个窗口', 1268 tooltip:'单击提交,将产生一条新记录。', 1269 iconCls:'add' , 1270 1271 handler: function() { 1272 win.ruleItemValue.insertWindow.hide() ; 1273 } 1274 1275 } 1276 1277 ] 1278 }], 1279 1280 layout: 'anchor', 1281 defaults: { 1282 anchor: '100%' 1283 }, 1284 1285 items: this.items 1286 1287 }); // Ext.create 1288 } , 1289 1290 createUpdateForm : function(){ 1291 1292 1293 this.updateForm = Ext.create('Ext.form.Panel', { 1294 1295 title: '' , 1296 // renderTo: 'newFormContainer', 1297 bodyPadding: 5, 1298 width: 350, 1299 //margin : '5 0 5 0' , 1300 border: 0, 1301 shadow: false , 1302 1303 url: url.ruleItemValue.updateAction , 1304 1305 dockedItems: [ 1306 { 1307 xtype: 'toolbar', 1308 items: [ 1309 { 1310 text:'确认', 1311 tooltip:'单击提交,将执行修改操作。', 1312 iconCls:'edit' , 1313 1314 handler: function() { 1315 var form = this.up('form').getForm(); 1316 1317 if ( form.isValid() ) { 1318 form.submit({ 1319 success: function( form, action ) { 1320 1321 Ext.Msg.show({ 1322 title: '修改成功', 1323 msg: '修改操作成功', 1324 width: 500, 1325 buttons: Ext.Msg.OKCANCEL, 1326 // multiline: true, 1327 fn: function( btn, text ){ 1328 if ( btn == 'ok') { 1329 win.ruleItemValue.updateWindow.close( ) ; 1330 toolBar.ruleItemValue.grid.pagingToolBar.doRefresh() ; 1331 } 1332 }, 1333 // animateTarget: 'addAddressBtn', 1334 icon: Ext.window.MessageBox.INFO 1335 }); 1336 1337 1338 }, 1339 failure: function(form, action) { 1340 // Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response'); 1341 Ext.Msg.alert("提示", "方法调用失败" ); 1342 } 1343 }); 1344 } 1345 } 1346 1347 },'-',{ 1348 itemId: 'resetButton', 1349 text:'重置', 1350 tooltip:'Remove the selected item', 1351 iconCls:'remove' 1352 // disabled: true 1353 , 1354 handler: function() { 1355 fn.resetForm( this.up('form').getForm() ) ; 1356 } // handler 1357 } 1358 , 1359 1360 { 1361 text:'隐藏这个窗口', 1362 tooltip:'单击提交,将产生一条新记录。', 1363 iconCls:'add' , 1364 1365 handler: function() { 1366 win.ruleItemValue.updateWindow.hide() ; 1367 } 1368 1369 } 1370 1371 ] 1372 }], 1373 1374 items: this.items 1375 1376 }); // Ext.create 1377 1378 } , 1379 1380 1381 } 1382 , 1383 1384 create : function(){ 1385 1386 this.rule.createInsertForm() ; 1387 this.rule.createUpdateForm() ; 1388 this.ruleItem.createInsertForm() ; 1389 this.ruleItem.createUpdateForm() ; 1390 this.ruleItemValue.createInsertForm() ; 1391 this.ruleItemValue.createUpdateForm() ; 1392 1393 } // create 1394 } // form 1395 ; 1396 1397 form.create() ; 1398 1399 1400 var viewport = { 1401 1402 viewport : null , 1403 1404 north : { 1405 1406 region: 'north', 1407 xtype: 'box', 1408 margin: '5 0 5 0', 1409 padding: 5, 1410 html: '<b ><span id="groupNameSpan"></span>规则管理页面 </b><span id="surveil_point_device_number" style="color: gray;"> </span>' 1411 1412 } 1413 , // north 1414 1415 // center : grid.surveilGrid , 1416 center : { 1417 region: 'center' , 1418 layout: { 1419 type: 'border', 1420 padding: 0 1421 }, 1422 border : 0 , 1423 autoScroll: true , 1424 defaults: { 1425 padding: 1 1426 } , 1427 // defaults: { 1428 // layout: 'anchor', 1429 // defaults: { 1430 // anchor: '100%' 1431 // } 1432 // } , 1433 items: [ grid.rule.Grid, grid.ruleItem.Grid, grid.ruleItemValue.Grid ] , 1434 1435 } 1436 , // center 1437 1438 east : { 1439 region: 'east', 1440 autoScroll:true, 1441 collapsible: true, 1442 collapsed: true , 1443 floatable: true, 1444 split: true, 1445 width: 390 , 1446 minWidth: 120, 1447 minHeight: 140, 1448 title: '右边栏' , 1449 layout: { 1450 type: 'vbox' , 1451 padding: 5 , 1452 align: 'stretch' 1453 } , 1454 items: [ 1455 1456 { 1457 title: '帮助说明', 1458 collapsible: true, 1459 collapsed: false, 1460 contentEl: 'panel_帮助说明', 1461 //margin: '5 5 5 5', 1462 //bodyPadding: '5 5 5 5' , 1463 bodyPadding: 5 , 1464 } 1465 1466 ] 1467 } , 1468 1469 create : function(){ 1470 1471 // grid.create() ; 1472 1473 this.viewport = Ext.create('Ext.Viewport', { 1474 1475 layout: { 1476 type: 'border', 1477 padding: 0 1478 }, 1479 defaults: { 1480 split: true 1481 }, 1482 1483 items:[ 1484 1485 this.north , 1486 // grid.surveilGrid , // center 1487 this.center , 1488 this.east 1489 1490 ], 1491 }); // i.viewport.viewport 1492 1493 } // create 1494 } // viewport 1495 ; 1496 1497 1498 1499 var win = { 1500 1501 configs : { 1502 1503 height: 500, 1504 width: 800, 1505 // autoScroll : true , 1506 layout: 'fit', // 内部元素布局方式{absolute accordion anchor border card column fit form table} 1507 maximizable: true, //是否可以最大化 1508 // minimizable: true, //是否可以最小化 1509 closable: true, // 是否可以关闭 1510 closeAction: 'hide', //窗口关闭的方式:hide/close 1511 modal: false, //是否为模态窗口 1512 resizable: true //是否可以改变窗口大小 1513 } , 1514 1515 rule : { 1516 insertWindow : null , 1517 updateWindow : null , 1518 createInsert : function(){ 1519 1520 win.configs.title = '添加规则' ; 1521 win.configs.items = [ form.rule.insertForm ] ; 1522 this.insertWindow = Ext.create( 'Ext.window.Window', win.configs ) ; 1523 } , 1524 createUpdate : function(){ 1525 1526 win.configs.title = '修改规则' ; 1527 win.configs.items = [ form.rule.updateForm ] ; 1528 this.updateWindow = Ext.create( 'Ext.window.Window', win.configs ) ; 1529 } , 1530 } , 1531 1532 ruleItem : { 1533 insertWindow : null , 1534 updateWindow : null , 1535 createInsert : function(){ 1536 1537 win.configs.title = '添加规则项' ; 1538 win.configs.items = [ form.ruleItem.insertForm ] ; 1539 this.insertWindow = Ext.create( 'Ext.window.Window', win.configs ) ; 1540 } , 1541 createUpdate : function(){ 1542 1543 win.configs.title = '修改规则项' ; 1544 win.configs.items = [ form.ruleItem.updateForm ] ; 1545 this.updateWindow = Ext.create( 'Ext.window.Window', win.configs ) ; 1546 } , 1547 } , 1548 1549 ruleItemValue : { 1550 insertWindow : null , 1551 updateWindow : null , 1552 createInsert : function(){ 1553 1554 win.configs.title = '添加项值' ; 1555 win.configs.items = [ form.ruleItemValue.insertForm ] ; 1556 this.insertWindow = Ext.create( 'Ext.window.Window', win.configs ) ; 1557 } , 1558 createUpdate : function(){ 1559 1560 win.configs.title = '修改项值' ; 1561 win.configs.items = [ form.ruleItemValue.updateForm ] ; 1562 this.updateWindow = Ext.create( 'Ext.window.Window', win.configs ) ; 1563 } , 1564 } , 1565 1566 create : function() { 1567 1568 this.rule.createInsert() ; 1569 this.rule.createUpdate() ; 1570 this.ruleItem.createInsert() ; 1571 this.ruleItem.createUpdate() ; 1572 this.ruleItemValue.createInsert() ; 1573 this.ruleItemValue.createUpdate() ; 1574 1575 } 1576 1577 } // window 1578 ; 1579 1580 win.create() ; 1581 1582 1583 var task = { 1584 1585 run : function() { 1586 1587 setTimeout( function(){ 1588 store.surveilGrid[0].load() ; 1589 fn.pictureReload( 0 ); 1590 }, 0 ) ; 1591 setTimeout( function(){ store.matchGrid[0].load() ; }, 3000 ) ; 1592 setTimeout( function(){ store.uploadGrid[0].load() ; }, 6000 ) ; 1593 1594 setTimeout( function(){ store.surveilGrid[1].load() ; fn.pictureReload( 1 );}, 9000 ) ; 1595 setTimeout( function(){ store.matchGrid[1].load() ; }, 12000 ) ; 1596 setTimeout( function(){ store.uploadGrid[1].load() ; }, 15000 ) ; 1597 1598 setTimeout( function(){ store.surveilGrid[2].load() ; fn.pictureReload( 2 );}, 18000 ) ; 1599 setTimeout( function(){ store.matchGrid[2].load() ; }, 21000 ) ; 1600 setTimeout( function(){ store.uploadGrid[2].load() ; }, 24000 ) ; 1601 1602 1603 }, 1604 interval : 27000 1605 // interval : function(){ return Ext.fly('config_interval_seconds').value ; } 1606 // 1 second 1607 1608 }; 1609 1610 1611 var fn = { 1612 1613 rule : { 1614 1615 insert : function(){ 1616 win.rule.insertWindow.show( ) ; 1617 } , 1618 1619 update : function(){ 1620 1621 var rows = grid.rule.Grid.getSelectionModel().getSelection() ; 1622 1623 if ( rows.length < 1) { 1624 Ext.Msg.alert("信息提示","请选择需要修改的数据!"); 1625 } else { 1626 // consoleLog( rows ) ; 1627 form.rule.fillUpdateForm() ; 1628 win.rule.updateWindow.show() ; 1629 } 1630 } , 1631 1632 del : function(){ 1633 1634 1635 var rows = grid.rule.Grid.getSelectionModel().getSelection(); 1636 1637 if ( rows.length < 1) { 1638 // msg = msg + '尚未选择!' ; 1639 Ext.Msg.alert("信息提示","请选择需要删除的数据!"); 1640 } else { 1641 1642 1643 Ext.Msg.show({ 1644 title: '请您确认', 1645 msg: '确定要删除吗?确定请按“OK”键,且不可恢复 !', 1646 width: 500, 1647 buttons: Ext.Msg.OKCANCEL, 1648 // multiline: true, 1649 fn: function( btn, text ){ 1650 if ( btn == 'ok') { 1651 consoleLog( btn ) ; 1652 var ids = '0' ; 1653 for( var i = 0; i < rows.length; i++){ 1654 ids = ids + ',' + rows[i].get('id') ; 1655 } ; 1656 consoleLog( ids ) ; 1657 1658 Ext.Ajax.request({ 1659 url: url.rule.deleteAction , 1660 method: 'POST' , 1661 params: { 1662 'bean.ids' : ids 1663 }, 1664 success: function(response){ 1665 consoleLog( response.responseText ) ; 1666 // process server response here 1667 1668 toolBar.rule.grid.pagingToolBar.doRefresh() ; 1669 1670 } 1671 }); // request 1672 } 1673 }, // fn 1674 // animateTarget: 'addAddressBtn', 1675 icon: Ext.window.MessageBox.INFO 1676 }); // Msg.show() 1677 1678 } ; 1679 } 1680 } , 1681 1682 ruleItem :{ 1683 insert : function() { 1684 1685 var p = store.ruleItem.Store.proxy.extraParams ; 1686 var ruleId = p['bean.ruleId'] ; 1687 1688 if ( typeof( ruleId ) == 'undefined' || ruleId < 1) { 1689 Ext.Msg.alert('错误', '请您先在左侧的列表中选择一条规则,以产生数据关联!' ); 1690 } else { 1691 var f = form.ruleItem.insertForm.form ; 1692 f.setValues( { 'bean.ruleId' : ruleId } ); 1693 win.ruleItem.insertWindow.show() ; 1694 } ; 1695 } , 1696 update : function() { 1697 1698 var rows = grid.ruleItem.Grid.getSelectionModel().getSelection(); 1699 1700 if ( rows.length < 1) { 1701 Ext.Msg.alert("信息提示","请选择需要修改的数据!"); 1702 } else { 1703 form.ruleItem.fillUpdateForm() ; 1704 win.ruleItem.updateWindow.show() ; 1705 } 1706 } , 1707 del : function() { 1708 1709 var rows = grid.ruleItem.Grid.getSelectionModel().getSelection(); 1710 1711 if ( rows.length < 1) { 1712 // msg = msg + '尚未选择!' ; 1713 Ext.Msg.alert("信息提示","请选择需要删除的数据!"); 1714 } else { 1715 1716 Ext.Msg.show({ 1717 title: '请您确认', 1718 msg: '确定要删除吗?确定请按“OK”键,且不可恢复 !', 1719 width: 500, 1720 buttons: Ext.Msg.OKCANCEL, 1721 // multiline: true, 1722 fn: function( btn, text ){ 1723 if ( btn == 'ok') { 1724 consoleLog( btn ) ; 1725 var ids = '0' ; 1726 for( var i = 0; i < rows.length; i++){ 1727 ids = ids + ',' + rows[i].get('id') ; 1728 } ; 1729 consoleLog( ids ) ; 1730 1731 Ext.Ajax.request({ 1732 url: url.ruleItem.deleteAction , 1733 method: 'POST' , 1734 params: { 1735 'bean.ids' : ids 1736 }, 1737 success: function(response){ 1738 toolBar.ruleItem.grid.pagingToolBar.doRefresh() ; 1739 } 1740 }); // request 1741 } 1742 }, // fn 1743 // animateTarget: 'addAddressBtn', 1744 icon: Ext.window.MessageBox.INFO 1745 }); // Msg.show() 1746 1747 } ; 1748 } 1749 } , 1750 1751 ruleItemValue :{ 1752 insert : function() { 1753 1754 var p = store.ruleItemValue.Store.proxy.extraParams ; 1755 var ruleItemId = p['bean.ruleItemId'] ; 1756 1757 if ( typeof( ruleItemId ) == 'undefined' || ruleItemId < 1) { 1758 Ext.Msg.alert('错误', '请您先在左侧的列表中选择一条规则,以产生数据关联!' ); 1759 } else { 1760 var f = form.ruleItemValue.insertForm.form ; 1761 f.setValues( { 'bean.ruleItemId' : ruleItemId } ); 1762 win.ruleItemValue.insertWindow.show() ; 1763 } ; 1764 } , 1765 update : function() { 1766 1767 var rows = grid.ruleItemValue.Grid.getSelectionModel().getSelection(); 1768 1769 if ( rows.length < 1) { 1770 Ext.Msg.alert("信息提示","请选择需要修改的数据!"); 1771 } else { 1772 form.ruleItemValue.fillUpdateform() ; 1773 win.ruleItemValue.updateWindow.show() ; 1774 } 1775 } , 1776 del : function() { 1777 1778 var rows = grid.ruleItemValue.Grid.getSelectionModel().getSelection(); 1779 1780 if ( rows.length < 1) { 1781 // msg = msg + '尚未选择!' ; 1782 Ext.Msg.alert("信息提示","请选择需要删除的数据!"); 1783 } else { 1784 1785 1786 Ext.Msg.show({ 1787 title: '请您确认', 1788 msg: '确定要删除吗?确定请按“OK”键,且不可恢复 !', 1789 width: 500, 1790 buttons: Ext.Msg.OKCANCEL, 1791 // multiline: true, 1792 fn: function( btn, text ){ 1793 if ( btn == 'ok') { 1794 consoleLog( btn ) ; 1795 var ids = '0' ; 1796 for( var i = 0; i < rows.length; i++){ 1797 ids = ids + ',' + rows[i].get('id') ; 1798 } ; 1799 consoleLog( ids ) ; 1800 1801 Ext.Ajax.request({ 1802 url: url.ruleItemValue.deleteAction , 1803 method: 'POST' , 1804 params: { 1805 'bean.ids' : ids 1806 }, 1807 success: function(response){ 1808 consoleLog( response.responseText ) ; 1809 // process server response here 1810 1811 toolBar.ruleItemValue.grid.pagingToolBar.doRefresh() ; 1812 1813 } 1814 }); // request 1815 } 1816 }, // fn 1817 // animateTarget: 'addAddressBtn', 1818 icon: Ext.window.MessageBox.INFO 1819 }); // Msg.show() 1820 1821 } ; 1822 } 1823 } , 1824 1825 showRuleUpdateWindow : function( record ){ 1826 fn.ruleItemReload( record.getData().id ) ; 1827 fn.ruleItemValueReload( 0 ) ; 1828 } 1829 , 1830 1831 1832 ruleItemReload : function( i ){ 1833 1834 store.ruleItem.Store.proxy.extraParams = { 1835 'bean.ruleId' : i , 1836 } ; 1837 store.ruleItem.Store.load() ; 1838 1839 } 1840 , 1841 ruleItemValueReload : function( i ){ 1842 1843 store.ruleItemValue.Store.proxy.extraParams = { 1844 'bean.ruleItemId' : i , 1845 } ; 1846 store.ruleItemValue.Store.load( ) ; 1847 1848 } 1849 , 1850 resetForm: function( form ) { 1851 1852 // http://localhost:8080/ExtJS/docs/index.html#!/api/Ext.window.MessageBox-method-show 1853 Ext.Msg.show({ 1854 title: '请您确认', 1855 msg: '确定要重置表单吗? 选择“OK”后,所有填写内容将被清空,且不可恢复 !', 1856 width: 500, 1857 buttons: Ext.Msg.OKCANCEL, 1858 // multiline: true, 1859 fn: function( btn, text ){ 1860 if ( btn == 'ok') form.reset() ; 1861 consoleLog( btn ) ; 1862 }, 1863 // animateTarget: 'addAddressBtn', 1864 icon: Ext.window.MessageBox.INFO 1865 }); 1866 1867 } // handler 1868 1869 } 1870 ; 1871 1872 var listener = { 1873 init: function(){ 1874 // 1875 grid.rule.Grid.on({ 1876 'cellclick' : grid.rule.onCellClick , 1877 'celldblclick' : grid.rule.onCellDblClick 1878 }) 1879 ; 1880 grid.ruleItem.Grid.on({ 1881 'cellclick' : grid.ruleItem.onCellClick , 1882 'celldblclick' : grid.ruleItem.onCellDblClick 1883 }) 1884 ; 1885 grid.ruleItemValue.Grid.on({ 1886 'cellclick' : grid.ruleItemValue.onCellClick , 1887 'celldblclick' : grid.ruleItemValue.onCellDblClick 1888 }) 1889 ; 1890 } 1891 } 1892 ; 1893 1894 1895 var start = function(){ 1896 1897 1898 var bd = Ext.getBody( ) ; 1899 var loadingText = bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'}); 1900 1901 // Ext.tip.QuickTipManager.init() ; 1902 1903 viewport.create() ; 1904 1905 store.rule.Store.load() ; 1906 1907 1908 // store.ruleItemGrid.load() ; 1909 1910 // Ext.TaskManager.start( task ); 1911 1912 loadingText.remove() ; 1913 1914 listener.init() ; 1915 1916 } ; // start 1917 1918 1919 1920 1921 Ext.onReady( function () { 1922 start() ; 1923 });
最后还是惯例,来张片片: