ExtJS做的一个信息管理界面

前段时间公司让我们学习ExtJS,学习了一个礼拜,完成了个小练习,思来想去决定做个总结,但是又懒得敲word,于是就在代码上每行都加上注释,以后忘记了就翻开来看看。

在这里给出代码。

完成的功能如图所示。

 

Js代码  收藏代码
  1. /** 
  2.  * 默认页面 
  3.  *  
  4.  * @author leaves.qq:1330771552 
  5.  */  
  6.   
  7. Ext.define('SupplyManagementDesktop.defaultsWindow', {  
  8.     extend : 'Ext.ux.desktop.Module',  
  9.   
  10.     requires : ['Ext.data.ArrayStore''Ext.util.Format''Ext.grid.Panel',  
  11.             'Ext.grid.RowNumberer''Ext.ux.LiveSearchGridPanel'],  
  12.   
  13.     id : 'defaultsWindow-win',  
  14.   
  15.     /*************************************************************************** 
  16.      * ExtJS控件使用按照如下规则。 首先,创建控件,调用Ext.create 
  17.      * weightName:空间命名空间,args:空间参数,用{}包围,当做对象传入 
  18.      *  
  19.      * ####################################### 注意JS中有如下语法: var object={ 
  20.      * paramter1:value1, paramter2:value2, paramter3:value3 } 
  21.      * object.paramter1可以直接获得value1 ##################################### 
  22.      *  
  23.      * ExtJS中所有空间创建方法都如上 
  24.      *  
  25.      * Ext.create(String weightName,Mixed args) 
  26.      * 所以此处args相当于一个匿名对象(没有引用),但并非真的匿名对象 
  27.      *  
  28.      */  
  29.     // 初始化窗体的方法  
  30.     init : function() {  
  31.         this.launcher = {  
  32.             text : 'Defaults Window',  
  33.             iconCls : 'icon-grid',  
  34.             // 调用createWindow方法  
  35.             handler : this.createWindow,  
  36.             scope : this  
  37.             // this指向Ext.define(这个方法用来声明命名空间。)定义的命名空间  
  38.         };  
  39.     },// 初始化窗体的方法结束  
  40.   
  41.     // 创建窗体的方法  
  42.     createWindow : function() {  
  43.         // 下面进行预定义。就好像C里面的 先定义后使用。不然后定义的在前面使用会认为未初始化。(猜测:可能不跟JS一样,属于ExtJS的语法)  
  44.         var dataPanel;// 预定义一个GridPanel,用来显示数据  
  45.         var innerPanel;// 存放Panel的容器  
  46.         var workerPanel;  
  47.         var westPanel;  
  48.         var deptStore;  
  49.         var moduleObj = this;// 创建windows窗体的时获取下本身的环境,此处不能确定,这个this是指向Ext.define还是指向创建的这个窗体  
  50.         var desktop = this.app.getDesktop();  
  51.   
  52.         // 获取窗体,外部最大窗体,具体方法不清楚。  
  53.         var win = desktop.getWindow('defaultsWindow-win');  
  54.   
  55.         // 创建按钮bar组件,是上面的几个按钮。  
  56.         var buttonBar = Ext.create('Ext.toolbar.Toolbar', {  
  57.             dock : 'top',  
  58.             items : [{  
  59.                         xtype : 'button',  
  60.                         text : '新建',  
  61.                         iconCls : 'add',  
  62.                         handler : function() {  
  63.                             // 自行新建操作,传入一个create字符串用来标示是什么按钮事件,传入dataPanel(注意:上面没有var  
  64.                             // dataPanel;此处会报错。)因为后面的新建需要用到表格显示的数据(dataPanel.getSelectionModel().getSelection())  
  65.                             moduleObj.proAction("create", dataPanel,  
  66.                                     workerPanel);  
  67.                         }  
  68.                     }, {  
  69.                         // 分隔符,不解释。  
  70.                         xtype : 'tbseparator'  
  71.                     }, {  
  72.                         xtype : 'button',  
  73.                         text : '删除',  
  74.                         iconCls : 'remove',  
  75.                         handler : function() {  
  76.                             moduleObj.proAction("delete", dataPanel);  
  77.                         }  
  78.                     }, {  
  79.                         xtype : 'tbseparator'  
  80.                     }, {  
  81.                         xtype : 'button',  
  82.                         text : '复制',  
  83.                         iconCls : 'copy',  
  84.                         handler : function() {  
  85.                             moduleObj.proAction("copy", dataPanel, workerPanel);  
  86.                         }  
  87.                     }, {  
  88.                         xtype : 'button',  
  89.                         text : '重置检索',  
  90.                         iconCls : 'reset',  
  91.                         handler : function() {  
  92.                             dataPanel.resetSearch();  
  93.                         }  
  94.                     }]  
  95.         });// 创建按钮bar组件结束  
  96.   
  97.         // 临时创建的一个用来展示的store  
  98.         var theStore = Ext.create('Ext.data.Store', {  
  99.             fields : [{  
  100.                         name : 'projectId',  
  101.                         type : 'String'  
  102.                     }, {  
  103.                         name : 'projectCode',  
  104.                         type : 'String'  
  105.                     }, {  
  106.                         name : 'projectName',  
  107.                         type : 'String'  
  108.                     }, {  
  109.                         name : 'startDate',  
  110.                         type : 'String'  
  111.                     }, {  
  112.                         name : 'endDate',  
  113.                         type : 'string'  
  114.                     }, {  
  115.                         name : 'qualityTarget',  
  116.                         type : 'string'  
  117.                     }, {  
  118.                         name : 'projectLeader',  
  119.                         type : 'string'  
  120.                     }, {  
  121.                         name : 'projectStatus',  
  122.                         type : 'string'  
  123.                     }, {  
  124.                         name : 'qualification',  
  125.                         type : 'string'  
  126.                     }, {  
  127.                         name : 'constructionUnit',  
  128.                         type : 'string'  
  129.                     }],  
  130.             pageSize : 20,// 每页显示数量。此处设置可以在向后台申请数据的时候“自动”传参一个  
  131.             // limit和satrt,start不需要指定ExtJS会自动计算,然后传值。  
  132.             proxy : {  
  133.                 type : 'ajax',// 使用传输方式为ajax(ajax是异步执行的操作,即不需要刷新页面即可申请后台资源。)  
  134.                 method : 'POST',// post和get是HTML中表单(form)提交两种方式,get会在地址栏显示参数,post不显示  
  135.                 url : '/Training/myProjectInfoController/getAllProjectInfo.action?deptId='  
  136.                         + 0,  
  137.   
  138.                 reader : {// 设置读取方式属性  
  139.                     type : 'json',// 设置读取方式格式为:json字符串  
  140.                     root : 'root',// 设置根元素,即读取上面fields种的name中对应值的元素,此处多为元素组,json字符串如:{A:a,B:[{},{},{},………………]}  
  141.                     totalProperty : 'totalProperty'// 设置总页码  
  142.                 }  
  143.             },  
  144.             autoLoad : true  
  145.                 // 自动读取,即显示绑定该store的组件的时候直接读取数据  
  146.         });  
  147.         // 创建临时Store结束  
  148.   
  149.         // 创建分页bar组建  
  150.         var pagebar = Ext.create('Ext.toolbar.Paging', {  
  151.                     pageSize : 20,  
  152.                     store : theStore,  
  153.                     dock : 'bottom',  
  154.                     setActive : false,  
  155.                     refresh : false,  
  156.                     displayInfo : true,  
  157.                     plugins : Ext.create('Ext.ux.ProgressBarPager', {})  
  158.                 });  
  159.         // 创建分页bar组建结束  
  160.   
  161.         // 为theGirdPanel创建一个SelectionModel  
  162.         var selectionModeltoGridPanel = Ext  
  163.                 .create('Ext.selection.CheckboxModel'); // 想要能进行选择或者多选,就需要设置selModel属性这是设置selection的模型,创建一个模型Ext.selection.CheckboxModel  
  164.         // 初始化gridPanel  
  165.         dataPanel = Ext.create('Ext.ux.LiveSearchGridPanel', {  
  166.                     title : '<font color=red>工程详细信息</font>',  
  167.                     region : 'center',  
  168.                     width : '100%',  
  169.                     height : '96%',  
  170.                     store : theStore,  
  171.                     selModel : selectionModeltoGridPanel,  
  172.                     // 一系列行,不解释,也可以var column=[`````````]然后columns:column  
  173.                     iconCls : 'remove',  
  174.                     columns : [{  
  175.                                 dataIndex : 'projectId',  
  176.                                 width : 80,  
  177.                                 text : '项目号'  
  178.                             }, {  
  179.                                 dataIndex : 'projectCode',  
  180.                                 width : 80,  
  181.                                 text : '项目序号'  
  182.                             }, {  
  183.                                 dataIndex : 'projectName',  
  184.                                 width : 100,  
  185.                                 text : '项目名称'  
  186.                             }, {  
  187.                                 dataIndex : 'constructionUnit',  
  188.                                 width : 100,  
  189.                                 text : '建设单位'  
  190.                             }, {  
  191.                                 dataIndex : 'startDate',  
  192.                                 width : 80,  
  193.                                 text : '开工日期'  
  194.                             }, {  
  195.                                 dataIndex : 'endDate',  
  196.                                 width : 80,  
  197.                                 text : '竣工日期'  
  198.                             }, {  
  199.                                 dataIndex : 'qualityTarget',  
  200.                                 width : 100,  
  201.                                 text : '质量目标'  
  202.                             }, {  
  203.                                 dataIndex : 'projectLeader',  
  204.                                 width : 100,  
  205.                                 text : '项目负责人'  
  206.                             }, {  
  207.                                 dataIndex : 'projectStatus',  
  208.                                 width : 80,  
  209.                                 text : '项目状态'  
  210.                             }, {  
  211.                                 dataIndex : 'qualification',  
  212.                                 width : 80,  
  213.                                 text : '需要资质'  
  214.                             }],  
  215.                     dockedItems : [buttonBar, pagebar]  
  216.                 });  
  217.   
  218.         // 绑定dataPanel鼠标双击事件。  
  219.         dataPanel.on('itemdblclick'function() {  
  220.                     moduleObj.proAction("update", dataPanel, workerPanel);  
  221.   
  222.                 });  
  223.         // 初始化gridPanel结束  
  224.   
  225.         // 为下面的部门信息分类栏(grid)创建一个store数据用jsonu读取/Training/DeptInfoController/getAllDeptInfo.action地址申请到的资源。  
  226.         deptStore = Ext.create('Ext.data.Store', {  
  227.                     fields : [{  
  228.                                 name : 'deptId',  
  229.                                 type : 'String'  
  230.                             }, {  
  231.                                 name : 'deptName',  
  232.                                 type : 'String'  
  233.                             }],  
  234.                     proxy : {  
  235.                         type : 'ajax',  
  236.                         method : 'POST',  
  237.                         url : '/Training/DeptInfoController/getAllDeptInfo.action',  
  238.                         reader : {  
  239.                             type : 'json',// 用json字符串  
  240.                             root : 'root'  
  241.                         }  
  242.                     },  
  243.                     autoLoad : true  
  244.                 });  
  245.   
  246.         // 创建部门信息分类栏,  
  247.         workerPanel = Ext.create('Ext.grid.Panel', {  
  248.                     title : '部门信息',  
  249.                     border : false,  
  250.                     store : deptStore,  
  251.                     hideHeaders : true,  
  252.                     columns : [{  
  253.                                 dataIndex : 'deptId',  
  254.                                 hidden : true,  
  255.                                 sortable : false,  
  256.                                 width : 180  
  257.                             }, {  
  258.                                 dataIndex : 'deptName',  
  259.                                 sortable : false,  
  260.                                 width : 180  
  261.                             }]  
  262.                 });  
  263.   
  264.         // 给部门信息的grid绑定事件,当单击的时候触发事件,此事件用来刷新右侧列表  
  265.         workerPanel.on('itemclick'function(grid, record) {  
  266.             // 获取当前行的deptId列的值  
  267.             var id = record.data.deptId;  
  268.             // dataPanel.store:获取dataPanel的store属性的值,dataPanel.store.proxy获取数据来源属性,ataPanel.store.proxy.url获取数据来源属性的URL,  
  269.             // 这个方法用来重新设置数据来源的地址,  
  270.             // 注意:后面的?deptId是HTML传参方法,地址栏传参。跟form直接传参一样,后台可以接受。  
  271.             dataPanel.store.proxy.url = '/Training/myProjectInfoController/getAllProjectInfo.action?deptId='  
  272.                     + id;  
  273.             dataPanel  
  274.                     .setTitle("<font color=red>"  
  275.                             + (workerPanel.getSelectionModel().getSelection())[0].data.deptName  
  276.                             + "</font>部门信息");// ExtJS中的标题等字符串属性支持HTML语言,直接设置格式。  
  277.             dataPanel.store.load();// dataPanel.store:获取dataPanel的store属性的值,dataPanel.store.load():调用取得的值的load()方法,用来重新加载store数据,实现grid刷新  
  278.         });  
  279.   
  280.         // 初始工人信息Panel,同下  
  281.         workerPane2 = Ext.create('Ext.grid.Panel', {// Ext.grid.Panel可以直接显示grid的panel不需要create一个Grid放置panel中  
  282.             title : 'BBBBBB',// 随便取标题  
  283.             border : false,// 没有边框  
  284.             store : theStore,  
  285.             hideHeaders : true,  
  286.             columns : [{  
  287.                         dataIndex : 'projectName',  
  288.                         sortable : false,// 不能排序  
  289.                         width : 180  
  290.                     }]  
  291.         });  
  292.         // 初始工人信息Panel,用来实现折叠效果的panel  
  293.         workerPanel3 = Ext.create('Ext.grid.Panel', {// Ext.grid.Panel可以直接显示grid的panel不需要create一个Grid放置panel中  
  294.             title : 'CCCCCCC',// 随便取标题  
  295.             border : false,// 没有边框  
  296.             store : theStore,  
  297.             hideHeaders : true,// 隐藏grid每列数据的标题  
  298.             columns : [{  
  299.                         dataIndex : 'projectName',  
  300.                         sortable : false,// 不能排序  
  301.                         width : 180  
  302.                     }]  
  303.         });  
  304.   
  305.         // 左边伸缩栏  
  306.         westPanel = Ext.create("Ext.panel.Panel", {  
  307.             collapsible : true,// 这个属性设置此panel容易可以隐藏(最小化)  
  308.             title : '分类查看',  
  309.             layout : 'accordion',// 这个属性设置此panel容易可以实现折叠效果  
  310.             width : 200,  
  311.             region : 'west',  
  312.             iconCls : 'reset',  
  313.             items : [workerPanel, workerPane2, workerPanel3]  
  314.                 // 放置三个小panel容器,如上定义  
  315.             });  
  316.   
  317.         // 创建容器,用来存放整个窗体的组件,并且在下面直接放置到win中。  
  318.         theContainer = Ext.create('Ext.container.Container', {  
  319.                     layout : 'border',  
  320.                     items : [dataPanel, westPanel]  
  321.                 });  
  322.   
  323.         // 判断是否已经创建最外边窗体,如果创建了,(JS是弱类型语言,认为null相当于false)  
  324.         if (!win) {  
  325.             win = desktop.createWindow({ // 所以此处的目的是:如果win已经初始化存在了,那么就不新创建窗体,直接调用下面的show()方法  
  326.                 // 下面属性不具体解释,详细可以查看API手册  
  327.                 id : 'defaultsWindow-win',  
  328.                 title : '工程详细信息设置',  
  329.                 width : 1100,  
  330.                 height : 600,  
  331.                 iconCls : 'icon-grid',  
  332.                 animCollapse : false,  
  333.                 constrainHeader : true,  
  334.                 layout : 'fit',  
  335.                 items : [theContainer]  
  336.                     // 把创建好存放所有组件的窗体放置到外围窗体中  
  337.             });  
  338.         }  
  339.         win.show();// 显示窗体。  
  340.         return win;// 把窗体的句柄(相当于内存引用)返回  
  341.     },  
  342.     // 创建窗体的方法结束  
  343.   
  344.     // 显示一个对话框的方法,暂时带有一个用来判断是什么按钮的属性  
  345.     proAction : function(btn, dataPanel, workerPanel) {  
  346.         var selectData;// 预设一个用来存放被选中的数据的变量  
  347.         var innerPanel;  
  348.         // 如果选择的是复制  
  349.         if ("copy" == btn) {  
  350.             if (dataPanel.getSelectionModel().getSelection().length == 0) {  
  351.                 Ext.hx.msg("提示""请先选择您要复制的行");  
  352.                 return;  
  353.             }  
  354.   
  355.             selectData = (dataPanel.getSelectionModel().getSelection())[dataPanel  
  356.                     .getSelectionModel().getCount()  
  357.                     - 1].data;// 如果是删除的话需要读取被选中的数据,就初始化被selectData。  
  358.         }  
  359.         // 如果选择的是新建  
  360.         if ("create" == btn) {  
  361.             // 新建的时候设置选择的行为null,没有值。也就不会在创建的panel中显示当前行。此处是因为在复制的时候会去读取。  
  362.             selectData = null;  
  363.         }  
  364.   
  365.         // 如果选择的是复制  
  366.         if ("update" == btn) {  
  367.             selectData = (dataPanel.getSelectionModel().getSelection())[0].data;// 先取出所有的记录组成的数组。  
  368.         }  
  369.   
  370.         // 如果选择的是删除  
  371.         if ("delete" == btn) {  
  372.             var oneDate;// 预设一个用来存放一条数据进行操作的变量  
  373.             var records = dataPanel.getSelectionModel().getSelection();// 先取出所有的记录组成的数组。  
  374.             // 判断如果还没有选择任何行就提示并且返回方法  
  375.             if (records.length == 0) {  
  376.                 Ext.hx.msg("提示""请先选择您要删除的行");  
  377.                 return;  
  378.             }  
  379.   
  380.             // 遍历所有的数组然后设置里面的各种标志  
  381.             var array = new Array();// 预设一个用来存放新的data的数组  
  382.             for (var i = 0; i < records.length; i++) {  
  383.                 oneDate = records[i].data;// 取出其中一条  
  384.                 oneDate.deleteFlg = true;// 设置删除标志  
  385.                 array.push(oneDate);// 放置到数组中  
  386.             }  
  387.   
  388.             // 用ajax来进行后台交互  
  389.             Ext.Ajax.request({  
  390.                 url : '/Training/myProjectInfoController/deleteProjectInfo.action',  
  391.                 method : 'POST',  
  392.                 success : function(res, opts) {// 交互成功的时候  
  393.                     Ext.hx.msg("提示"'删除成功!');// 提示  
  394.                     dataPanel.store.load();// 表格数据刷新  
  395.                 },  
  396.                 failure : function(res, opts) {  
  397.                     Ext.hx.msg("提示"'删除失败!');  
  398.                 },  
  399.                 params : {  
  400.                     jsonString : Ext.JSON.encode(array)  
  401.                     // 调用ExtJS内置对象的方法,把数组转换成json字符串  
  402.                 },  
  403.                 scope : this  
  404.                     // 作用范围本页。//具体不知道,没用。、  
  405.             });  
  406.   
  407.             return;// 执行完成操作马上返回,不执行下面代码。  
  408.         }  
  409.   
  410.         /* 下面定义一系列用来输入的文本框 */  
  411.         deptBoxStore=Ext.create('Ext.data.Store', {  
  412.                     fields : [{  
  413.                                 name : 'deptId',  
  414.                                 type : 'String'  
  415.                             }, {  
  416.                                 name : 'deptName',  
  417.                                 type : 'String'  
  418.                             }],  
  419.                     proxy : {  
  420.                         type : 'ajax',  
  421.                         method : 'POST',  
  422.                         url : '/Training/DeptInfoController/getAllDeptInfo.action',  
  423.                         reader : {  
  424.                             type : 'json',// 用json字符串  
  425.                             root : 'root'  
  426.                         }  
  427.                     },  
  428.                     autoLoad : true  
  429.                 });  
  430.         // 下面是一个下来选择菜单,用来下拉选择部门。  
  431.         var dptBox = Ext.create("Ext.form.field.ComboBox", {  
  432.             fieldLabel : '部门选择',  
  433.             store :deptBoxStore ,  
  434.             displayField : 'deptName',  
  435.             valueField : 'deptId',  
  436.             allowBlank : false,// 不允许为空  
  437.             editable : false,// 不允许编辑  
  438.             x : 10,  
  439.             y : 20  
  440.         });  
  441.         //设置上面部门选择的Combox默认值  
  442.         deptBoxStore.load({   
  443.         callback : function(records) {  
  444.             dptBox.setValue(workerPanel.getSelectionModel().getSelection().length==0?null:(workerPanel.getSelectionModel().getSelection())[0].data.deptId);   
  445.         }   
  446.     });  
  447.           
  448.         // 各种输入框,制定value(默认值)在没有selectData是null(即if ("create" ==  
  449.         // btn)的时候)设置为“”(空字符串),否则分别取出选择行的每一个数据。作为默认数据,  
  450.         var projectIdField = Ext.create('Ext.form.field.Text', {  
  451.                     fieldLabel : '项目号',  
  452.                       
  453.                     x : 10,  
  454.                     y : 20,  
  455.                     value : selectData != null ? selectData.projectId : ""  
  456.                 });  
  457.         var projectCodeField = Ext.create('Ext.form.field.Text', {  
  458.                     fieldLabel : '项目序号',  
  459.                       
  460.                     x : 10,  
  461.                     y : 50,  
  462.                     value : selectData != null ? selectData.projectCode : ""  
  463.                 });  
  464.         var projectNameField = Ext.create('Ext.form.field.Text', {  
  465.                     fieldLabel : '项目名称',  
  466.                     allowBlank : false,  
  467.                     blankText : '不可以为空',  
  468.                       
  469.                     x : 10,  
  470.                     y : 80,  
  471.                     value : selectData != null ? selectData.projectName : ""  
  472.                 });  
  473.         var constructionUnitField = Ext.create('Ext.form.field.Text', {  
  474.                     fieldLabel : '建设单位',  
  475.                       
  476.                     x : 10,  
  477.                     y : 110,  
  478.                     value : selectData != null  
  479.                             ? selectData.constructionUnit  
  480.                             : ""  
  481.                 });  
  482.         var startDateField = Ext.create('Ext.form.field.Date', {  
  483.                     format : 'Y-m-d h:m:s ',  
  484.                     fieldLabel : '开工日期',  
  485.                     blankText : '不可以为空',  
  486.                     allowBlank : false,  
  487.                       
  488.                     x : 10,  
  489.                     y : 140,  
  490.                     value : selectData != null  
  491.                             ? selectData.startDate  
  492.                             : new Date()  
  493.                 });  
  494.         var endDateField = Ext.create('Ext.form.field.Date', {  
  495.                     format : 'Y-m-d h:m:s ',  
  496.                     fieldLabel : '竣工日期',  
  497.                     blankText : '不可以为空',  
  498.                     allowBlank : false,  
  499.                       
  500.                     x : 10,  
  501.                     y : 170,  
  502.                     value : selectData != null  
  503.                             ? selectData.endDate  
  504.                             : new Date()  
  505.                 });  
  506.         var qualityTargetField = Ext.create('Ext.form.field.Text', {  
  507.                     fieldLabel : '质量目标',  
  508.                       
  509.                     x : 10,  
  510.                     y : 200,  
  511.                     value : selectData != null ? selectData.qualityTarget : ""  
  512.                 });  
  513.         var projectLeaderField = Ext.create('Ext.form.field.Text', {  
  514.                     fieldLabel : '项目负责人',  
  515.                       
  516.                     x : 10,  
  517.                     y : 230,  
  518.                     value : selectData != null ? selectData.projectLeader : ""  
  519.                 });  
  520.         var projectStatusField = Ext.create('Ext.form.field.Text', {  
  521.                     fieldLabel : '项目状态',  
  522.                       
  523.                     x : 10,  
  524.                     y : 260,  
  525.                     value : selectData != null ? selectData.projectStatus : ""  
  526.                 });  
  527.         var qualificationField = Ext.create('Ext.form.field.Text', {  
  528.                     fieldLabel : '需要资质',  
  529.                       
  530.                     x : 10,  
  531.                     y : 290,  
  532.                     value : selectData != null ? selectData.projectStatus : ""  
  533.                 });  
  534.   
  535.         var submitButton = Ext.create('Ext.button.Button', {  
  536.             text : '确定',  
  537.             x : 10,  
  538.             y : 320,  
  539.             value : selectData != null ? selectData.projectStatus : "",  
  540.             handler : function() {  
  541.                 var arr = new Array();  
  542.                 // 上面说道的JS的定义对象的方法,  
  543.                 /** 
  544.                  * ####################################### 注意JS中有如下语法: var 
  545.                  * object={ paramter1:value1, paramter2:value2, paramter3:value3 } 
  546.                  * object.paramter1可以直接获得value1 
  547.                  * ##################################### 
  548.                  */  
  549.                 var data = {  
  550.                     projectId : projectIdField.getValue(),  
  551.                     projectCode : projectCodeField.getValue(),  
  552.                     projectName : projectNameField.getValue(),  
  553.                     constructionUnit : constructionUnitField.getValue(),  
  554.                     startDate : startDateField.getValue(),  
  555.                     endDate : endDateField.getValue(),  
  556.                     qualityTarget : qualityTargetField.getValue(),  
  557.                     projectLeader : projectLeaderField.getValue(),  
  558.                     projectStatus : projectStatusField.getValue(),  
  559.                     qualification : qualificationField.getValue(),  
  560.                     deptId : dptBox.getValue(),  
  561.                     modifyFlg : "update" == btn ? true : false  
  562.                 };  
  563.   
  564.                 // 上面定义的data有了projectId,projectCode,······deptId,modifyFlg这些属性,可以直接data.modifyFlg取得值。  
  565.                 if (!confirm("确定?")) {// confirm("确定?")弹出对话框,显示确定?点击是的时候返回true,此处判断如果端机否,直接返回方法不执行下面语句。  
  566.                     return;  
  567.                 }  
  568.                 arr.push(data);// 把设置好属性的data对象放置到arr数组中。  
  569.   
  570.                 // 用AJAX跟后台交互。  
  571.                 Ext.Ajax.request({  
  572.                     url : '/Training/myProjectInfoController/saveProjectInfo.action',  
  573.                     params : {  
  574.                         jsonString : Ext.JSON.encode(arr)  
  575.                     },  
  576.                     success : function(response) {  
  577.                         Ext.hx.msg("提示""成功");  
  578.                         var dialog = Ext.getCmp('theDialog');// Ext.getCmp(String  
  579.                         // comID);传入组件ID,返回组件句柄(内存引用)  
  580.                         dataPanel.store.load(); // 刷新panel不解释  
  581.                         dialog.close();// 把窗体关闭(不显示)  
  582.                         dialog.destroy();// 把窗体销毁(清空内存)  
  583.                     },  
  584.                     failure : function(response) {// 失败提示  
  585.                         Ext.hx.msg("提示""失败");  
  586.                     }  
  587.                 });  
  588.             }  
  589.         });  
  590.         var resetButton = Ext.create('Ext.button.Button', {  
  591.                     text : '重置',  
  592.                     x : 70,  
  593.                     y : 320,  
  594.                     value : selectData != null ? selectData.projectStatus : "",  
  595.                     handler : function() {  
  596.                         /* 
  597.                          * API上抄来的,不知道什么意思。 up( String selector ) : Container 
  598.                          * Walks up the ownerCt axis looking for an ancestor 
  599.                          * Container which matches the passed simple selector. 
  600.                          */  
  601.                         this.up('form').getForm().reset();// 查找form上面的form(记住这么用吧,说不清楚。仔细看  
  602.                         // innerPanel =  
  603.                         // Ext.create('Ext.form.Panel',  
  604.                         // {  
  605.                         // 这句就知道了。)向上找form元素获取form表单,然后重置  
  606.                     }  
  607.                 });  
  608.   
  609.         // 创建用来进行输入的文本框数组  
  610.         /** 
  611.          * 此处使用的是Ext.form.Panel目的是为了上面的this.up('form').getForm().reset(); 
  612.          */  
  613.         innerPanel = Ext.create('Ext.form.Panel', {// 创建一个表单控件,  
  614.             id : 'innerPanel',  
  615.             height : "100%",  
  616.             width : "100%",  
  617.             layout : {  
  618.                 type : 'absolute'  
  619.             },  
  620.             id : 'innerPanel',  
  621.             waitMsgTarget : true,// 显示错误提示的小叹号  
  622.   
  623.             fieldDefaults : {  
  624.                 labelWidth : 85,  
  625.                 msgTarget : 'side'// 错误提示的字体  
  626.             },  
  627.             items : [dptBox, projectCodeField, projectNameField,  
  628.                     constructionUnitField, startDateField, endDateField,  
  629.                     qualityTargetField, projectLeaderField, projectStatusField,  
  630.                     qualificationField, submitButton, resetButton]  
  631.         });  
  632.   
  633.         // 准备好一个用来显示窗体的dialog,实际上是一个窗体  
  634.         var dlalog = Ext.create('Ext.window.Window', {  
  635.             id : 'theDialog',  
  636.             title : '要点击之后显示的窗体',  
  637.             height : 500,  
  638.             width : 300,  
  639.             layout : 'fit',  
  640.             items : [innerPanel],  
  641.             modal : true  
  642.                 // 模态窗体,显示的时候不允许操作后面的控件。  
  643.             });  
  644.         dlalog.show();  
  645.     }  
  646.         // 显示一个对话框的方法结束  
  647. });  

 


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页