前段时间公司让我们学习ExtJS,学习了一个礼拜,完成了个小练习,思来想去决定做个总结,但是又懒得敲word,于是就在代码上每行都加上注释,以后忘记了就翻开来看看。
在这里给出代码。
完成的功能如图所示。
- /**
- *默认页面
- *
- *@authorleaves.qq:1330771552
- */
- Ext.define('SupplyManagementDesktop.defaultsWindow',{
- extend:'Ext.ux.desktop.Module',
- requires:['Ext.data.ArrayStore','Ext.util.Format','Ext.grid.Panel',
- 'Ext.grid.RowNumberer','Ext.ux.LiveSearchGridPanel'],
- id:'defaultsWindow-win',
- /***************************************************************************
- *ExtJS控件使用按照如下规则。首先,创建控件,调用Ext.create
- *weightName:空间命名空间,args:空间参数,用{}包围,当做对象传入
- *
- *#######################################注意JS中有如下语法:varobject={
- *paramter1:value1,paramter2:value2,paramter3:value3}
- *object.paramter1可以直接获得value1#####################################
- *
- *ExtJS中所有空间创建方法都如上
- *
- *Ext.create(StringweightName,Mixedargs)
- *所以此处args相当于一个匿名对象(没有引用),但并非真的匿名对象
- *
- */
- //初始化窗体的方法
- init:function(){
- this.launcher={
- text:'DefaultsWindow',
- iconCls:'icon-grid',
- //调用createWindow方法
- handler:this.createWindow,
- scope:this
- //this指向Ext.define(这个方法用来声明命名空间。)定义的命名空间
- };
- },//初始化窗体的方法结束
- //创建窗体的方法
- createWindow:function(){
- //下面进行预定义。就好像C里面的先定义后使用。不然后定义的在前面使用会认为未初始化。(猜测:可能不跟JS一样,属于ExtJS的语法)
- vardataPanel;//预定义一个GridPanel,用来显示数据
- varinnerPanel;//存放Panel的容器
- varworkerPanel;
- varwestPanel;
- vardeptStore;
- varmoduleObj=this;//创建windows窗体的时获取下本身的环境,此处不能确定,这个this是指向Ext.define还是指向创建的这个窗体
- vardesktop=this.app.getDesktop();
- //获取窗体,外部最大窗体,具体方法不清楚。
- varwin=desktop.getWindow('defaultsWindow-win');
- //创建按钮bar组件,是上面的几个按钮。
- varbuttonBar=Ext.create('Ext.toolbar.Toolbar',{
- dock:'top',
- items:[{
- xtype:'button',
- text:'新建',
- iconCls:'add',
- handler:function(){
- //自行新建操作,传入一个create字符串用来标示是什么按钮事件,传入dataPanel(注意:上面没有var
- //dataPanel;此处会报错。)因为后面的新建需要用到表格显示的数据(dataPanel.getSelectionModel().getSelection())
- moduleObj.proAction("create",dataPanel,
- workerPanel);
- }
- },{
- //分隔符,不解释。
- xtype:'tbseparator'
- },{
- xtype:'button',
- text:'删除',
- iconCls:'remove',
- handler:function(){
- moduleObj.proAction("delete",dataPanel);
- }
- },{
- xtype:'tbseparator'
- },{
- xtype:'button',
- text:'复制',
- iconCls:'copy',
- handler:function(){
- moduleObj.proAction("copy",dataPanel,workerPanel);
- }
- },{
- xtype:'button',
- text:'重置检索',
- iconCls:'reset',
- handler:function(){
- dataPanel.resetSearch();
- }
- }]
- });//创建按钮bar组件结束
- //临时创建的一个用来展示的store
- vartheStore=Ext.create('Ext.data.Store',{
- fields:[{
- name:'projectId',
- type:'String'
- },{
- name:'projectCode',
- type:'String'
- },{
- name:'projectName',
- type:'String'
- },{
- name:'startDate',
- type:'String'
- },{
- name:'endDate',
- type:'string'
- },{
- name:'qualityTarget',
- type:'string'
- },{
- name:'projectLeader',
- type:'string'
- },{
- name:'projectStatus',
- type:'string'
- },{
- name:'qualification',
- type:'string'
- },{
- name:'constructionUnit',
- type:'string'
- }],
- pageSize:20,//每页显示数量。此处设置可以在向后台申请数据的时候“自动”传参一个
- //limit和satrt,start不需要指定ExtJS会自动计算,然后传值。
- proxy:{
- type:'ajax',//使用传输方式为ajax(ajax是异步执行的操作,即不需要刷新页面即可申请后台资源。)
- method:'POST',//post和get是HTML中表单(form)提交两种方式,get会在地址栏显示参数,post不显示
- url:'/Training/myProjectInfoController/getAllProjectInfo.action?deptId='
- +0,
- reader:{//设置读取方式属性
- type:'json',//设置读取方式格式为:json字符串
- root:'root',//设置根元素,即读取上面fields种的name中对应值的元素,此处多为元素组,json字符串如:{A:a,B:[{},{},{},………………]}
- totalProperty:'totalProperty'//设置总页码
- }
- },
- autoLoad:true
- //自动读取,即显示绑定该store的组件的时候直接读取数据
- });
- //创建临时Store结束
- //创建分页bar组建
- varpagebar=Ext.create('Ext.toolbar.Paging',{
- pageSize:20,
- store:theStore,
- dock:'bottom',
- setActive:false,
- refresh:false,
- displayInfo:true,
- plugins:Ext.create('Ext.ux.ProgressBarPager',{})
- });
- //创建分页bar组建结束
- //为theGirdPanel创建一个SelectionModel
- varselectionModeltoGridPanel=Ext
- .create('Ext.selection.CheckboxModel');//想要能进行选择或者多选,就需要设置selModel属性这是设置selection的模型,创建一个模型Ext.selection.CheckboxModel
- //初始化gridPanel
- dataPanel=Ext.create('Ext.ux.LiveSearchGridPanel',{
- title:'<fontcolor=red>工程详细信息</font>',
- region:'center',
- width:'100%',
- height:'96%',
- store:theStore,
- selModel:selectionModeltoGridPanel,
- //一系列行,不解释,也可以varcolumn=[`````````]然后columns:column
- iconCls:'remove',
- columns:[{
- dataIndex:'projectId',
- width:80,
- text:'项目号'
- },{
- dataIndex:'projectCode',
- width:80,
- text:'项目序号'
- },{
- dataIndex:'projectName',
- width:100,
- text:'项目名称'
- },{
- dataIndex:'constructionUnit',
- width:100,
- text:'建设单位'
- },{
- dataIndex:'startDate',
- width:80,
- text:'开工日期'
- },{
- dataIndex:'endDate',
- width:80,
- text:'竣工日期'
- },{
- dataIndex:'qualityTarget',
- width:100,
- text:'质量目标'
- },{
- dataIndex:'projectLeader',
- width:100,
- text:'项目负责人'
- },{
- dataIndex:'projectStatus',
- width:80,
- text:'项目状态'
- },{
- dataIndex:'qualification',
- width:80,
- text:'需要资质'
- }],
- dockedItems:[buttonBar,pagebar]
- });
- //绑定dataPanel鼠标双击事件。
- dataPanel.on('itemdblclick',function(){
- moduleObj.proAction("update",dataPanel,workerPanel);
- });
- //初始化gridPanel结束
- //为下面的部门信息分类栏(grid)创建一个store数据用jsonu读取/Training/DeptInfoController/getAllDeptInfo.action地址申请到的资源。
- deptStore=Ext.create('Ext.data.Store',{
- fields:[{
- name:'deptId',
- type:'String'
- },{
- name:'deptName',
- type:'String'
- }],
- proxy:{
- type:'ajax',
- method:'POST',
- url:'/Training/DeptInfoController/getAllDeptInfo.action',
- reader:{
- type:'json',//用json字符串
- root:'root'
- }
- },
- autoLoad:true
- });
- //创建部门信息分类栏,
- workerPanel=Ext.create('Ext.grid.Panel',{
- title:'部门信息',
- border:false,
- store:deptStore,
- hideHeaders:true,
- columns:[{
- dataIndex:'deptId',
- hidden:true,
- sortable:false,
- width:180
- },{
- dataIndex:'deptName',
- sortable:false,
- width:180
- }]
- });
- //给部门信息的grid绑定事件,当单击的时候触发事件,此事件用来刷新右侧列表
- workerPanel.on('itemclick',function(grid,record){
- //获取当前行的deptId列的值
- varid=record.data.deptId;
- //dataPanel.store:获取dataPanel的store属性的值,dataPanel.store.proxy获取数据来源属性,ataPanel.store.proxy.url获取数据来源属性的URL,
- //这个方法用来重新设置数据来源的地址,
- //注意:后面的?deptId是HTML传参方法,地址栏传参。跟form直接传参一样,后台可以接受。
- dataPanel.store.proxy.url='/Training/myProjectInfoController/getAllProjectInfo.action?deptId='
- +id;
- dataPanel
- .setTitle("<fontcolor=red>"
- +(workerPanel.getSelectionModel().getSelection())[0].data.deptName
- +"</font>部门信息");//ExtJS中的标题等字符串属性支持HTML语言,直接设置格式。
- dataPanel.store.load();//dataPanel.store:获取dataPanel的store属性的值,dataPanel.store.load():调用取得的值的load()方法,用来重新加载store数据,实现grid刷新
- });
- //初始工人信息Panel,同下
- workerPane2=Ext.create('Ext.grid.Panel',{//Ext.grid.Panel可以直接显示grid的panel不需要create一个Grid放置panel中
- title:'BBBBBB',//随便取标题
- border:false,//没有边框
- store:theStore,
- hideHeaders:true,
- columns:[{
- dataIndex:'projectName',
- sortable:false,//不能排序
- width:180
- }]
- });
- //初始工人信息Panel,用来实现折叠效果的panel
- workerPanel3=Ext.create('Ext.grid.Panel',{//Ext.grid.Panel可以直接显示grid的panel不需要create一个Grid放置panel中
- title:'CCCCCCC',//随便取标题
- border:false,//没有边框
- store:theStore,
- hideHeaders:true,//隐藏grid每列数据的标题
- columns:[{
- dataIndex:'projectName',
- sortable:false,//不能排序
- width:180
- }]
- });
- //左边伸缩栏
- westPanel=Ext.create("Ext.panel.Panel",{
- collapsible:true,//这个属性设置此panel容易可以隐藏(最小化)
- title:'分类查看',
- layout:'accordion',//这个属性设置此panel容易可以实现折叠效果
- width:200,
- region:'west',
- iconCls:'reset',
- items:[workerPanel,workerPane2,workerPanel3]
- //放置三个小panel容器,如上定义
- });
- //创建容器,用来存放整个窗体的组件,并且在下面直接放置到win中。
- theContainer=Ext.create('Ext.container.Container',{
- layout:'border',
- items:[dataPanel,westPanel]
- });
- //判断是否已经创建最外边窗体,如果创建了,(JS是弱类型语言,认为null相当于false)
- if(!win){
- win=desktop.createWindow({//所以此处的目的是:如果win已经初始化存在了,那么就不新创建窗体,直接调用下面的show()方法
- //下面属性不具体解释,详细可以查看API手册
- id:'defaultsWindow-win',
- title:'工程详细信息设置',
- width:1100,
- height:600,
- iconCls:'icon-grid',
- animCollapse:false,
- constrainHeader:true,
- layout:'fit',
- items:[theContainer]
- //把创建好存放所有组件的窗体放置到外围窗体中
- });
- }
- win.show();//显示窗体。
- returnwin;//把窗体的句柄(相当于内存引用)返回
- },
- //创建窗体的方法结束
- //显示一个对话框的方法,暂时带有一个用来判断是什么按钮的属性
- proAction:function(btn,dataPanel,workerPanel){
- varselectData;//预设一个用来存放被选中的数据的变量
- varinnerPanel;
- //如果选择的是复制
- if("copy"==btn){
- if(dataPanel.getSelectionModel().getSelection().length==0){
- Ext.hx.msg("提示","请先选择您要复制的行");
- return;
- }
- selectData=(dataPanel.getSelectionModel().getSelection())[dataPanel
- .getSelectionModel().getCount()
- -1].data;//如果是删除的话需要读取被选中的数据,就初始化被selectData。
- }
- //如果选择的是新建
- if("create"==btn){
- //新建的时候设置选择的行为null,没有值。也就不会在创建的panel中显示当前行。此处是因为在复制的时候会去读取。
- selectData=null;
- }
- //如果选择的是复制
- if("update"==btn){
- selectData=(dataPanel.getSelectionModel().getSelection())[0].data;//先取出所有的记录组成的数组。
- }
- //如果选择的是删除
- if("delete"==btn){
- varoneDate;//预设一个用来存放一条数据进行操作的变量
- varrecords=dataPanel.getSelectionModel().getSelection();//先取出所有的记录组成的数组。
- //判断如果还没有选择任何行就提示并且返回方法
- if(records.length==0){
- Ext.hx.msg("提示","请先选择您要删除的行");
- return;
- }
- //遍历所有的数组然后设置里面的各种标志
- vararray=newArray();//预设一个用来存放新的data的数组
- for(vari=0;i<records.length;i++){
- oneDate=records[i].data;//取出其中一条
- oneDate.deleteFlg=true;//设置删除标志
- array.push(oneDate);//放置到数组中
- }
- //用ajax来进行后台交互
- Ext.Ajax.request({
- url:'/Training/myProjectInfoController/deleteProjectInfo.action',
- method:'POST',
- success:function(res,opts){//交互成功的时候
- Ext.hx.msg("提示",'删除成功!');//提示
- dataPanel.store.load();//表格数据刷新
- },
- failure:function(res,opts){
- Ext.hx.msg("提示",'删除失败!');
- },
- params:{
- jsonString:Ext.JSON.encode(array)
- //调用ExtJS内置对象的方法,把数组转换成json字符串
- },
- scope:this
- //作用范围本页。//具体不知道,没用。、
- });
- return;//执行完成操作马上返回,不执行下面代码。
- }
- /*下面定义一系列用来输入的文本框*/
- deptBoxStore=Ext.create('Ext.data.Store',{
- fields:[{
- name:'deptId',
- type:'String'
- },{
- name:'deptName',
- type:'String'
- }],
- proxy:{
- type:'ajax',
- method:'POST',
- url:'/Training/DeptInfoController/getAllDeptInfo.action',
- reader:{
- type:'json',//用json字符串
- root:'root'
- }
- },
- autoLoad:true
- });
- //下面是一个下来选择菜单,用来下拉选择部门。
- vardptBox=Ext.create("Ext.form.field.ComboBox",{
- fieldLabel:'部门选择',
- store:deptBoxStore,
- displayField:'deptName',
- valueField:'deptId',
- allowBlank:false,//不允许为空
- editable:false,//不允许编辑
- x:10,
- y:20
- });
- //设置上面部门选择的Combox默认值
- deptBoxStore.load({
- callback:function(records){
- dptBox.setValue(workerPanel.getSelectionModel().getSelection().length==0?null:(workerPanel.getSelectionModel().getSelection())[0].data.deptId);
- }
- });
- //各种输入框,制定value(默认值)在没有selectData是null(即if("create"==
- //btn)的时候)设置为“”(空字符串),否则分别取出选择行的每一个数据。作为默认数据,
- varprojectIdField=Ext.create('Ext.form.field.Text',{
- fieldLabel:'项目号',
- x:10,
- y:20,
- value:selectData!=null?selectData.projectId:""
- });
- varprojectCodeField=Ext.create('Ext.form.field.Text',{
- fieldLabel:'项目序号',
- x:10,
- y:50,
- value:selectData!=null?selectData.projectCode:""
- });
- varprojectNameField=Ext.create('Ext.form.field.Text',{
- fieldLabel:'项目名称',
- allowBlank:false,
- blankText:'不可以为空',
- x:10,
- y:80,
- value:selectData!=null?selectData.projectName:""
- });
- varconstructionUnitField=Ext.create('Ext.form.field.Text',{
- fieldLabel:'建设单位',
- x:10,
- y:110,
- value:selectData!=null
- ?selectData.constructionUnit
- :""
- });
- varstartDateField=Ext.create('Ext.form.field.Date',{
- format:'Y-m-dh:m:s',
- fieldLabel:'开工日期',
- blankText:'不可以为空',
- allowBlank:false,
- x:10,
- y:140,
- value:selectData!=null
- ?selectData.startDate
- :newDate()
- });
- varendDateField=Ext.create('Ext.form.field.Date',{
- format:'Y-m-dh:m:s',
- fieldLabel:'竣工日期',
- blankText:'不可以为空',
- allowBlank:false,
- x:10,
- y:170,
- value:selectData!=null
- ?selectData.endDate
- :newDate()
- });
- varqualityTargetField=Ext.create('Ext.form.field.Text',{
- fieldLabel:'质量目标',
- x:10,
- y:200,
- value:selectData!=null?selectData.qualityTarget:""
- });
- varprojectLeaderField=Ext.create('Ext.form.field.Text',{
- fieldLabel:'项目负责人',
- x:10,
- y:230,
- value:selectData!=null?selectData.projectLeader:""
- });
- varprojectStatusField=Ext.create('Ext.form.field.Text',{
- fieldLabel:'项目状态',
- x:10,
- y:260,
- value:selectData!=null?selectData.projectStatus:""
- });
- varqualificationField=Ext.create('Ext.form.field.Text',{
- fieldLabel:'需要资质',
- x:10,
- y:290,
- value:selectData!=null?selectData.projectStatus:""
- });
- varsubmitButton=Ext.create('Ext.button.Button',{
- text:'确定',
- x:10,
- y:320,
- value:selectData!=null?selectData.projectStatus:"",
- handler:function(){
- vararr=newArray();
- //上面说道的JS的定义对象的方法,
- /**
- *#######################################注意JS中有如下语法:var
- *object={paramter1:value1,paramter2:value2,paramter3:value3}
- *object.paramter1可以直接获得value1
- *#####################################
- */
- vardata={
- projectId:projectIdField.getValue(),
- projectCode:projectCodeField.getValue(),
- projectName:projectNameField.getValue(),
- constructionUnit:constructionUnitField.getValue(),
- startDate:startDateField.getValue(),
- endDate:endDateField.getValue(),
- qualityTarget:qualityTargetField.getValue(),
- projectLeader:projectLeaderField.getValue(),
- projectStatus:projectStatusField.getValue(),
- qualification:qualificationField.getValue(),
- deptId:dptBox.getValue(),
- modifyFlg:"update"==btn?true:false
- };
- //上面定义的data有了projectId,projectCode,······deptId,modifyFlg这些属性,可以直接data.modifyFlg取得值。
- if(!confirm("确定?")){//confirm("确定?")弹出对话框,显示确定?点击是的时候返回true,此处判断如果端机否,直接返回方法不执行下面语句。
- return;
- }
- arr.push(data);//把设置好属性的data对象放置到arr数组中。
- //用AJAX跟后台交互。
- Ext.Ajax.request({
- url:'/Training/myProjectInfoController/saveProjectInfo.action',
- params:{
- jsonString:Ext.JSON.encode(arr)
- },
- success:function(response){
- Ext.hx.msg("提示","成功");
- vardialog=Ext.getCmp('theDialog');//Ext.getCmp(String
- //comID);传入组件ID,返回组件句柄(内存引用)
- dataPanel.store.load();//刷新panel不解释
- dialog.close();//把窗体关闭(不显示)
- dialog.destroy();//把窗体销毁(清空内存)
- },
- failure:function(response){//失败提示
- Ext.hx.msg("提示","失败");
- }
- });
- }
- });
- varresetButton=Ext.create('Ext.button.Button',{
- text:'重置',
- x:70,
- y:320,
- value:selectData!=null?selectData.projectStatus:"",
- handler:function(){
- /*
- *API上抄来的,不知道什么意思。up(Stringselector):Container
- *WalksuptheownerCtaxislookingforanancestor
- *Containerwhichmatchesthepassedsimpleselector.
- */
- this.up('form').getForm().reset();//查找form上面的form(记住这么用吧,说不清楚。仔细看
- //innerPanel=
- //Ext.create('Ext.form.Panel',
- //{
- //这句就知道了。)向上找form元素获取form表单,然后重置
- }
- });
- //创建用来进行输入的文本框数组
- /**
- *此处使用的是Ext.form.Panel目的是为了上面的this.up('form').getForm().reset();
- */
- innerPanel=Ext.create('Ext.form.Panel',{//创建一个表单控件,
- id:'innerPanel',
- height:"100%",
- width:"100%",
- layout:{
- type:'absolute'
- },
- id:'innerPanel',
- waitMsgTarget:true,//显示错误提示的小叹号
- fieldDefaults:{
- labelWidth:85,
- msgTarget:'side'//错误提示的字体
- },
- items:[dptBox,projectCodeField,projectNameField,
- constructionUnitField,startDateField,endDateField,
- qualityTargetField,projectLeaderField,projectStatusField,
- qualificationField,submitButton,resetButton]
- });
- //准备好一个用来显示窗体的dialog,实际上是一个窗体
- vardlalog=Ext.create('Ext.window.Window',{
- id:'theDialog',
- title:'要点击之后显示的窗体',
- height:500,
- width:300,
- layout:'fit',
- items:[innerPanel],
- modal:true
- //模态窗体,显示的时候不允许操作后面的控件。
- });
- dlalog.show();
- }
- //显示一个对话框的方法结束
- });