`
诸葛蛋疼
  • 浏览: 36799 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
阅读更多
/**
 * 菜单管理
 */
var menuMgr = function() {

	var menuForm;// 菜单表单
	var window;// 窗口
	var gridPanel;// 表格
	var dataStore;// 数据集
	return {

		init : function() {
			var Menu = new Ext.data.Record.create([ {
				name : 'idno'
			}, {
				name : 'name'
			}, {
				name : 'img'
			}, {
				name : 'url'
			}, {
				name : 'parentid'
			}, {
				name : 'sort'
			}, {
				name : 'oper'
			}]);
			// var fields = ['idno', 'name', 'img', 'url', 'parentid',
			// 'sort','oper'];

			// 顶部工具栏
			var topBar = new Ext.Toolbar([ {
				text : '新增菜单',
				iconCls : 'add',
				handler : menuMgr.showAddMenuWindow
			// 注意函数名后不能加()
					}, {
						text : '查看修改',
						iconCls : 'edit',
						handler : menuMgr.showEditMenuWindow
					}, {
						text : '删除菜单',
						iconCls : 'delete',
						handler : menuMgr.delMenu
					}

			]);

			var sm = new Ext.grid.CheckboxSelectionModel();// 定义复选框选择模式
			var columnModel = new Ext.grid.ColumnModel([sm, {
				header : "idno",
				dataIndex : "idno",
				sortable : true
			}, {
				header : "菜单名称",
				dataIndex : "name",
				sortable : true
			}, {
				header : "图片",
				dataIndex : "img",
				width : 40,
				align : 'center',
				// 渲染
					renderer : function(imgUrl) {
						return "<img src='../../images/" + imgUrl + "'/>"
					}
				}, {
					header : "url",
					dataIndex : "url",
					width : 150,
					sortable : false
				}, {
					header : "上级菜单",
					dataIndex : "parentid",
					sortable : true
				}, {
					header : "排序",
					dataIndex : "sort",
					sortable : true
				}, {
					header : "备注",
					dataIndex : "oper"
				}]);

			var storeCfg = {};// 数据集配置对象
			storeCfg['url'] = 'server.jsp';
			storeCfg['recordName'] = "Menu";
			storeCfg['record'] = Menu;

			dataStore = Ext.dream.createStore(storeCfg);

			var gridCfg = {};// 表格配置对象
			// cfg['fields'] = fields;
			gridCfg['dataStore'] = dataStore;
			gridCfg['tbar'] = topBar;
			gridCfg['columnModel'] = columnModel;
			gridCfg['pageSize'] = 4;
			gridCfg['sm'] = sm;
			gridPanel = Ext.dream.createGridPanel(gridCfg);
			Ext.main.createViewPort(gridPanel);
		},

		/**
		 * 创建增加、修改公共菜单
		 */
		createMenuWindow : function() {

			var cfg = {};// 组合框配置
			cfg['fieldLabel'] = '父菜单';
			cfg['url'] = 'comboServer.jsp';
			cfg['recordType'] = 'Menu', cfg['fields'] = ['name', 'idno'];
			cfg['name'] = 'parentid';
			var parentMenu = Ext.combo.createComboBox(cfg);
			window = new Ext.Window( {

				title : '<div align="left">增加菜单</div>',
				x : 150,
				y : 100,
				frame : true,
				modal : true,
				closable : true,
				animCollapse : true,// 可关闭
				// 设置面板可展开收缩
				collapsible : false,
				resizable : false,
				// 配置登录表单
				items : [menuForm = new Ext.form.FormPanel( {
					id : 'menuForm',
					width : 400,
					frame : true,
					border : false,
					labelAlign : 'right',
					items : [new Ext.form.TextField( {
						name : 'idno',
						value : '0',
						inputType : 'hidden'

					}),

					new Ext.form.TextField( {
						fieldLabel : '菜单名称',
						id : 'name',
						name : 'name',
						allowBlank : false,
						blankText : '菜单名称不能为空',
						width : 200,
						msgTarget : 'side'

					}), new Ext.form.TextField( {
						fieldLabel : '图片名称',
						id : 'img',
						name : 'img',
						allowBlank : false,
						blankText : '图片名称不能为空',
						width : 200,
						msgTarget : 'side'

					}), new Ext.form.TextField( {
						fieldLabel : '链接地址',
						id : 'url',
						name : 'url',
						allowBlank : false,
						blankText : '链接地址不能为空',
						width : 200,
						msgTarget : 'side'

					}), parentMenu, new Ext.form.TextField( {
						fieldLabel : '排序',
						id : 'sort',
						name : 'sort',
						allowBlank : true,
						width : 200,
						msgTarget : 'side'

					}), new Ext.form.TextField( {
						fieldLabel : '备注',
						id : 'oper',
						name : 'oper',
						allowBlank : true,
						width : 200,
						msgTarget : 'side'

					})]

				})]
				,// 表单设置结束

			});// window结束
		},

		/**
		 * 显示增加菜单窗口
		 */
		showAddMenuWindow : function() {
			menuMgr.createMenuWindow();
			window.addButton(new Ext.Button( {
				text : '提交',
				// 点击提交执行的函数
					handler : menuMgr.addMenu
				}));
			window.show();
		},

		/**
		 * 显示查看修改菜单窗口
		 */
		showEditMenuWindow : function() {
			menuMgr.createMenuWindow();
			window.addButton(new Ext.Button( {
				text : '提交',
				// 点击提交执行修改的函数
					handler : menuMgr.updateMenu
				}));
			if (Ext.validate.noSelected(gridPanel)) {// 未选中任何记录
				return;
			} else {
				if (Ext.validate.selectedMore(gridPanel)) {// 选中多条
					return;
				} else {
					var idno = "";
					idno = Ext.validate.getSelected(gridPanel, 'idno');
					var cfg = {};
					cfg['form'] = menuForm;
					cfg['url'] = 'loadForm.jsp?idno=' + idno;
					Ext.dao.loadFormData(cfg);
					window.show();
				}
			}
		},

		/**
		 * 提交增加菜单表单
		 */
		addMenu : function() {
			var Menu = {};
			Menu = Ext.dao.getObjFromForm(menuForm);
			MenuManager.addMenu(Menu, function(success) {
				window.close();
				if (success) {
					// 重新加载数据
					dataStore.reload(dataStore);
					Ext.MessageBox.alert("提示", "增加菜单成功");
					// Msg.suggest("提示","增加菜单成功");
				} else {
					Ext.MessageBox.alert("提示", "增加菜单失败");
				}
			});
		},

		/**
		 * 更新菜单
		 */
		updateMenu : function() {
			var Menu = {};
			Menu = Ext.dao.getObjFromForm(menuForm);
			MenuManager.updateMenu(Menu, function(success) {
				window.close();
				if (success) {
					// 先清空再重新加载数据
					dataStore.removeAll();
					dataStore.reload();
					Ext.MessageBox.alert("提示", "更新菜单成功");
				} else {
					Ext.MessageBox.alert("提示", "更新菜单失败");
				}
			});
		},

		/**
		 * 删除菜单
		 */
		delMenu : function() {
			if (Ext.validate.noSelected(gridPanel)) {// 未选中任何记录
				return;
			} else {
				Ext.Msg.confirm('<font color="red">提示</font>', '你确定要删除选中的菜单吗?',
						menuMgr.deleteOrNot);
			};
		},

		/**
		 * 是否删除
		 */
		deleteOrNot : function(id) {
			if (id == "yes") {
				var idnos = "";
				idnos = Ext.validate.getSelected(gridPanel, 'idno');
				MenuManager.batchDelMenuByPKs(idnos, function(success) {
					if (success) {
						// 服务器端删除后,客户端同步更新
						// 获取选中的复选框所表示的对象数组
						var records = gridPanel.getSelectionModel()
								.getSelections();
						for (i = 0;i < records.length; i++) {
							dataStore.remove(records[i]);
						}
						Ext.MessageBox.alert("提示", "删除菜单成功");
					} else {
						Ext.MessageBox.alert("提示", "删除菜单失败");
					}
				})
			} else {
				return;
			}
		}

	}
}();
Ext.onReady(menuMgr.init, menuMgr, true);
分享到:
评论

相关推荐

    dummy-ext-crud:ExtJS 6 CRUD的简单示例

    这个"dummy-ext-crud"项目是一个关于ExtJS 6中的CRUD(创建、读取、更新和删除)操作的基础示例。在本文中,我们将深入探讨ExtJS 6的关键组件和CRUD操作的工作原理。 首先,让我们了解一下CRUD操作。CRUD是数据库...

    搭建简单的EXT-GWT(GXT)的开发环境(三)gxt结合spring和hibernate进行数据操作

    EXT-GWT(GXT)是一种基于Google Web Toolkit (GWT) 的高级用户界面库,它提供了丰富的组件和样式,使得开发者能够构建出复杂的、企业级的Web应用。本篇文章将聚焦于如何在EXT-GWT中整合Spring框架和Hibernate ORM,...

    ext-direct-pack.zip

    Ext Direct通常用于需要大量异步交互的Web应用,比如CRUD(创建、读取、更新、删除)操作,图表和数据网格的实时刷新,以及复杂的表单处理。它适合那些需要高性能、低延迟且易于维护的前后端交互的项目。 7. **...

    EXT-4.1.1框架

    模型和存储结合使用,提供了数据的CRUD操作和分页、过滤、排序等功能。 4. **Ajax通信**:EXTJS内置了AJAX通信机制,通过Ajax请求与服务器进行异步数据交互。它支持JSONP、XML、CSV等多种数据格式,并且可以处理...

    ext-postgrest-crud:基于Ext.js的电子表格样式的网格,用于针对Postgres数据库的CreateReadUpdateDelete,该数据库前面具有PostgREST API

    Ext.js CRUD 一个Ext.js支持的,电子表格样式的网格,用于针对数据库的创建/读取/更新/删除操作,该数据库前面具有 。 利用 。 安装 使用安装Sencha CMD 克隆此存储库 在此存储库中,通过npm install安装依赖项 ...

    ext scheduler -java

    在前端,EXT Scheduler会发送Ajax请求到后端,后端则通过Spring MVC的控制器处理这些请求,执行相应的CRUD操作。数据通常以JSON格式交换,便于前后端之间的通信。 总的来说,"EXT Scheduler - Java"项目结合了EXTJS...

    ext3+struts2+hibernate+spring的CRUD+分页

    "ext3+struts2+hibernate+spring的CRUD+分页"是一个典型的Java Web开发组合,用于实现全面的数据管理功能。这个组合充分利用了各个框架的优势,提供了一个强大的后端数据处理和前端展示的解决方案。 首先,EXT3是一...

    api-crud-states-cities:具有州和城市CRUD的API

    API CRUD州城市建立在Laravel 7上并由Swagger记录的State and City CRUD API ••• •• :laptop: 技术 :person_running: 开始...Clonegit clone https://github.com/tarcisioaraujo/api-crud-states-cities.git# Acc

    vue-quasar-crud:Quasar Crud for Rest Apis

    基于QTable的Quasar Crud组件,使用Axios API来获取远程数据...quasar ext add crud 卸载 quasar ext remove crud 演示版 未来... 资讯 使用Quasar默认类星体灭绝模板 您必须提供axios依赖关系 外部依赖 作为HTTP客户端

    Ext-Gwt(GWT)开发实例(整合Spring +Hibernate)

    标题 "Ext-Gwt(GWT)开发实例(整合Spring +Hibernate)" 涉及到的是一个实际项目开发的教程,其中结合了三个重要的技术框架:Google Web Toolkit (GWT),Spring 和 Hibernate。这个实例旨在展示如何在Web应用开发中...

    EXT CRUD和login

    EXT CRUD和Login是Web开发中的两个重要概念,主要在基于EXTJS或类似前端框架的项目中常见。EXTJS是一个强大的JavaScript库,用于构建富客户端的桌面级Web应用程序。CRUD代表创建(Create)、读取(Read)、更新...

    ext4-与-mvc

    **示例项目loiane-ext4-crud-mvc-a444c4e** 这个项目很可能是EXTJS的一个示例,演示了如何使用EXTJS的MVC模式实现基本的CRUD操作。项目可能包含了以下内容: - 示例模型(Model):定义数据结构。 - 示例存储...

    Ext+struts2+spring+hibernate做的一个CRUD实例

    用EXT+struts2+spring+hibernate做的一个增删改查实例,主要用到了EXTjs里面的部分组件,用JSON与服务端交互,实现一个增删改查的功能!本地MYsql数据库,sql文件在根目录下面,建好库既可以运行!当然,还是需要在...

    EXT JS结合MVC操作数据库实例DirectCenter c#

    这包括添加、删除、修改数据等CRUD操作。 4. **事件驱动编程**:EXT JS的组件之间通过事件进行通信,当用户在界面上执行操作,如点击按钮、填写表单,都会触发相应的事件。Controller监听这些事件,调用Direct API...

    Spring mvc +ext 4mvc 颗粒模块化设计简单的CRUD

    在这个项目中,"ext4-crud-mvc-master"可能包含了以下组件和文件: 1. **控制器(Controller)**:Spring MVC的Java类,定义了处理HTTP请求的方法,如`save`, `read`, `update` 和 `delete` 方法。 2. **模型...

    EXT-permission.zip_企业管理_C#_

    开发者可能会使用ADO.NET,C#中的数据访问技术,来与SQL Server进行交互,实现数据的CRUD(创建、读取、更新、删除)操作。 此外,C#作为.NET框架的主要编程语言,提供了丰富的类库和工具,使得开发企业级应用变得...

    python-crud

    from sqlalchemy.ext.declarative import declarative_base Base = declarative_base() class User(Base): __tablename__ = 'users' id = Column(Integer, primary_key=True) username = Column(String) email...

    @@@java+struts2+ext+json(完整的示例程序)实现CRUD

    在CRUD操作中,EXT负责前端的数据展示和用户交互,通过AJAX与后台进行异步通信。 4. **JSON(JavaScript Object Notation)**:JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在...

    EXT框架基本组件

    此文档包含了EXTjs最基本的组件类型的总结

    EXT-AirTable-CMS-TYPO3:一组用于创建页面模板,内容元素,用于处理记录的模型(CRUD)的工具,以及用于查看,导出和导入系统中的记录的模块

    EXT:AirTable(CMS TYPO3) 一组用于基于类注释创建网站的工具。 适用于TYPO3 v7,v8,v9,v10和v11版本。 此扩展程序的设计以最小可行产品格式(MVP)表示。 相反,它是用于基于单一标准开发网站的概念。 一些...

Global site tag (gtag.js) - Google Analytics