首页 > 技术文章 > 发一个 ExtJS 4.2.0 的页面源码(规则比对公式 的设置页面)

livon 2013-07-25 09:24 原文

页面图:

说明:

  1. 这是一个 规则比对公式 的设置页面。
  2. 双击规则行,则刷新规则项列表,双击规则项的行,则刷新项值列表。
  3. 规则 - rule ; 规则项 - ruleItem ; 项值 - ruleItemValue 。
  4. 三者均有查、增、改、删的功能。
  5. 待完善:删除时,应该同时删除下级内容。

jsp 文件:

 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>
View Code

js 文件:

   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 });
View Code

最后还是惯例,来张片片:

 

推荐阅读