- 浏览: 53664 次
- 性别:
- 来自: 北京
文章分类
最新评论
/** * 默认页面 * * @author leaves.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中有如下语法: var object={ * paramter1:value1, paramter2:value2, paramter3:value3 } * object.paramter1可以直接获得value1 ##################################### * * ExtJS中所有空间创建方法都如上 * * Ext.create(String weightName,Mixed args) * 所以此处args相当于一个匿名对象(没有引用),但并非真的匿名对象 * */ // 初始化窗体的方法 init : function() { this.launcher = { text : 'Defaults Window', iconCls : 'icon-grid', // 调用createWindow方法 handler : this.createWindow, scope : this // this指向Ext.define(这个方法用来声明命名空间。)定义的命名空间 }; },// 初始化窗体的方法结束 // 创建窗体的方法 createWindow : function() { // 下面进行预定义。就好像C里面的 先定义后使用。不然后定义的在前面使用会认为未初始化。(猜测:可能不跟JS一样,属于ExtJS的语法) var dataPanel;// 预定义一个GridPanel,用来显示数据 var innerPanel;// 存放Panel的容器 var workerPanel; var westPanel; var deptStore; var moduleObj = this;// 创建windows窗体的时获取下本身的环境,此处不能确定,这个this是指向Ext.define还是指向创建的这个窗体 var desktop = this.app.getDesktop(); // 获取窗体,外部最大窗体,具体方法不清楚。 var win = desktop.getWindow('defaultsWindow-win'); // 创建按钮bar组件,是上面的几个按钮。 var buttonBar = 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 var theStore = 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组建 var pagebar = 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 var selectionModeltoGridPanel = Ext .create('Ext.selection.CheckboxModel'); // 想要能进行选择或者多选,就需要设置selModel属性这是设置selection的模型,创建一个模型Ext.selection.CheckboxModel // 初始化gridPanel dataPanel = Ext.create('Ext.ux.LiveSearchGridPanel', { title : '<font color=red>工程详细信息</font>', region : 'center', width : '100%', height : '96%', store : theStore, selModel : selectionModeltoGridPanel, // 一系列行,不解释,也可以var column=[`````````]然后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列的值 var id = 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("<font color=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();// 显示窗体。 return win;// 把窗体的句柄(相当于内存引用)返回 }, // 创建窗体的方法结束 // 显示一个对话框的方法,暂时带有一个用来判断是什么按钮的属性 proAction : function(btn, dataPanel, workerPanel) { var selectData;// 预设一个用来存放被选中的数据的变量 var innerPanel; // 如果选择的是复制 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) { var oneDate;// 预设一个用来存放一条数据进行操作的变量 var records = dataPanel.getSelectionModel().getSelection();// 先取出所有的记录组成的数组。 // 判断如果还没有选择任何行就提示并且返回方法 if (records.length == 0) { Ext.hx.msg("提示", "请先选择您要删除的行"); return; } // 遍历所有的数组然后设置里面的各种标志 var array = new Array();// 预设一个用来存放新的data的数组 for (var i = 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 }); // 下面是一个下来选择菜单,用来下拉选择部门。 var dptBox = 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)的时候)设置为“”(空字符串),否则分别取出选择行的每一个数据。作为默认数据, var projectIdField = Ext.create('Ext.form.field.Text', { fieldLabel : '项目号', x : 10, y : 20, value : selectData != null ? selectData.projectId : "" }); var projectCodeField = Ext.create('Ext.form.field.Text', { fieldLabel : '项目序号', x : 10, y : 50, value : selectData != null ? selectData.projectCode : "" }); var projectNameField = Ext.create('Ext.form.field.Text', { fieldLabel : '项目名称', allowBlank : false, blankText : '不可以为空', x : 10, y : 80, value : selectData != null ? selectData.projectName : "" }); var constructionUnitField = Ext.create('Ext.form.field.Text', { fieldLabel : '建设单位', x : 10, y : 110, value : selectData != null ? selectData.constructionUnit : "" }); var startDateField = Ext.create('Ext.form.field.Date', { format : 'Y-m-d h:m:s ', fieldLabel : '开工日期', blankText : '不可以为空', allowBlank : false, x : 10, y : 140, value : selectData != null ? selectData.startDate : new Date() }); var endDateField = Ext.create('Ext.form.field.Date', { format : 'Y-m-d h:m:s ', fieldLabel : '竣工日期', blankText : '不可以为空', allowBlank : false, x : 10, y : 170, value : selectData != null ? selectData.endDate : new Date() }); var qualityTargetField = Ext.create('Ext.form.field.Text', { fieldLabel : '质量目标', x : 10, y : 200, value : selectData != null ? selectData.qualityTarget : "" }); var projectLeaderField = Ext.create('Ext.form.field.Text', { fieldLabel : '项目负责人', x : 10, y : 230, value : selectData != null ? selectData.projectLeader : "" }); var projectStatusField = Ext.create('Ext.form.field.Text', { fieldLabel : '项目状态', x : 10, y : 260, value : selectData != null ? selectData.projectStatus : "" }); var qualificationField = Ext.create('Ext.form.field.Text', { fieldLabel : '需要资质', x : 10, y : 290, value : selectData != null ? selectData.projectStatus : "" }); var submitButton = Ext.create('Ext.button.Button', { text : '确定', x : 10, y : 320, value : selectData != null ? selectData.projectStatus : "", handler : function() { var arr = new Array(); // 上面说道的JS的定义对象的方法, /** * ####################################### 注意JS中有如下语法: var * object={ paramter1:value1, paramter2:value2, paramter3:value3 } * object.paramter1可以直接获得value1 * ##################################### */ var data = { 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("提示", "成功"); var dialog = Ext.getCmp('theDialog');// Ext.getCmp(String // comID);传入组件ID,返回组件句柄(内存引用) dataPanel.store.load(); // 刷新panel不解释 dialog.close();// 把窗体关闭(不显示) dialog.destroy();// 把窗体销毁(清空内存) }, failure : function(response) {// 失败提示 Ext.hx.msg("提示", "失败"); } }); } }); var resetButton = Ext.create('Ext.button.Button', { text : '重置', x : 70, y : 320, value : selectData != null ? selectData.projectStatus : "", handler : function() { /* * API上抄来的,不知道什么意思。 up( String selector ) : Container * Walks up the ownerCt axis looking for an ancestor * Container which matches the passed simple selector. */ 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,实际上是一个窗体 var dlalog = Ext.create('Ext.window.Window', { id : 'theDialog', title : '要点击之后显示的窗体', height : 500, width : 300, layout : 'fit', items : [innerPanel], modal : true // 模态窗体,显示的时候不允许操作后面的控件。 }); dlalog.show(); } // 显示一个对话框的方法结束 });
转自:http://www.iteye.com/topic/1118596
相关推荐
总的来说,"ExtJs教学管理系统"是一个结合了前端动态展示和后端业务处理的综合应用,对于理解和掌握Web开发,特别是ExtJs和.Net技术的整合运用,有着很好的实践价值。开发者需要具备扎实的JavaScript和C#编程能力,...
总结来说,"Extjs酒店管理系统"是一个综合运用了ASP.NET、C#和Extjs 2.0技术的高效解决方案,为酒店行业的日常运营提供了强大支持。通过其现代化的界面和灵活的数据处理能力,系统能够帮助酒店优化管理流程,提高...
总的来说,"extjs+asp.net后台管理系统页面"是一个综合运用前端和后端技术的实例,它结合了ExtJS的强大UI能力和ASP.NET的服务器端功能,为开发者提供了一个高效、易用的后台管理解决方案。通过学习和实践此类项目,...
【标题】"完整的JSP + ExtJS 学生信息...总之,"完整的JSP + ExtJS 学生信息管理系统"是一个集成了多种Web开发技术的综合应用,涵盖了后端处理、前端交互、数据管理等多个方面,展示了Java Web开发的实用性和灵活性。
总的来说,"ExtJS2.0管理后台框架"是一个综合性的项目,涵盖了Web开发中的许多关键技术,包括前端UI设计、数据管理、用户交互以及后台服务集成。通过深入理解和熟练运用这些技术,开发者能够构建出高效、易用且具备...
总结起来,"ExtJS图书管理系统"是一个综合运用了前端ExtJS框架、后端Java技术及MyEclipse和Tomcat服务器的Web应用实例。它展示了如何通过现代Web技术构建一个功能完备、用户体验良好的图书管理系统。无论是对初学者...
SSH + EXTJS_管理系统是一个基于SSH(Struts2、Spring、Hibernate)框架和EXTJS前端技术的综合管理系统项目。这个项目结合了后端强大的SSH框架和EXTJS的丰富交互界面,旨在提供一个高效、易用的企业级管理平台。 ...
综合以上技术,这个简单图书管理系统具备了数据持久化、业务逻辑处理、用户交互以及前端展示的能力。通过整合ExtJS的用户界面,Spring的依赖管理和事务处理,Hibernate的对象-关系映射,以及Struts的请求处理,...
总结起来,这个项目是一个综合运用Java、JSP和Extjs4.0技术的后台管理系统,具备完整的源码和二次开发能力,为企业提供了高效、易用的管理工具。对于开发者来说,这是一个学习和实践企业级应用开发的良好案例。
【标题】:“asp.net+...综上所述,“asp.net+MVC+Extjs 考试管理系统”是一个结合了现代Web开发技术和教育领域的实际需求的综合平台,其核心功能的实现涵盖了后端开发、前端交互、数据管理以及教育信息化的诸多方面。
综上所述,“用Extjs做到学生管理系统”是一个综合性的Web开发项目,涉及前端的ExtJS UI设计、后端的Java服务实现以及数据库操作。通过合理的架构设计和组件使用,可以构建出功能完善、操作流畅的学生管理系统。在...
最后,ExtJs2.0中文手册可能会包含一些案例研究,这些案例研究将展示如何将上述所有知识点综合起来构建出实际的应用程序。这些案例能够帮助开发者更好地理解框架的使用方法和最佳实践。 由于直接从图像内容中提取...
综合来看,"ExtJs与C#做的简易毕业设计论文管理系统"是一个融合了前端交互和后端处理的综合性项目,展现了Web开发中的多层面技术应用。它不仅锻炼了开发者在实际项目中的问题解决能力,还展示了如何将不同技术栈...
综合以上信息,这个项目是一个全面的酒店管理系统,涵盖了从前端用户交互到后端数据处理的各个层面。开发者可以通过研究这个实例,学习如何在.NET平台上使用C#和Extjs协同工作,构建具有专业级用户界面的Web应用程序...
1. **EXTJS框架**:EXTJS是一个用JavaScript编写的开源UI库,它提供了大量的可重用组件和布局管理,能够帮助开发者快速构建复杂的Web应用界面。它支持数据绑定、组件化开发、响应式设计以及丰富的图表和报表功能。 ...
标题中的“ExtJs+java(SSH)项目源码”指的是一个综合了前端ExtJs框架和后端Java SSH(Struts2、Spring、Hibernate)框架的实际项目源代码。这个项目源码提供了一个完整的开发实例,可以帮助开发者深入理解如何将这...
综上所述,这个项目提供了一种综合运用ExtJS和C#的技术方案,通过前端与后端的紧密协作,构建出高性能、用户体验良好的Web应用。开发者可以借此学习如何有效结合这两者,提升自己的Web开发技能。
综合以上内容,这个EXTJS项目提供了一整套解决方案,包括前端UI、动态数据交互以及后端数据处理。开发者可以利用这个项目快速构建具有动态树、菜单功能的Web应用,同时享受到SpringMVC带来的后端灵活性和JDBC提供的...
总结来说,"ExtJS2.2 图书管理系统"是一个结合了前端JavaScript框架、后端Java技术和数据库管理系统的综合项目,它展示了Web应用开发的核心技术和流程,对于学习者来说,这是一个很好的实践案例,可以帮助他们理解...
总结来说,"JSP信息办公类实例开发源码——ExtJS 图书管理系统.zip"是一个涵盖了JSP编程、ExtJS前端开发以及图书管理业务逻辑的综合学习资源。通过深入研究这个项目,开发者不仅可以提升JSP和ExtJS的技术能力,还能...