/**
* 菜单管理
*/
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(创建、读取、更新和删除)操作的基础示例。在本文中,我们将深入探讨ExtJS 6的关键组件和CRUD操作的工作原理。 首先,让我们了解一下CRUD操作。CRUD是数据库...
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
EXT-GWT(GXT)是一种基于Google Web Toolkit (GWT) 的高级用户界面库,它提供了丰富的组件和样式,使得开发者能够构建出复杂的、企业级的Web应用。本篇文章将聚焦于如何在EXT-GWT中整合Spring框架和Hibernate ORM,...
Ext Direct通常用于需要大量异步交互的Web应用,比如CRUD(创建、读取、更新、删除)操作,图表和数据网格的实时刷新,以及复杂的表单处理。它适合那些需要高性能、低延迟且易于维护的前后端交互的项目。 7. **...
模型和存储结合使用,提供了数据的CRUD操作和分页、过滤、排序等功能。 4. **Ajax通信**:EXTJS内置了AJAX通信机制,通过Ajax请求与服务器进行异步数据交互。它支持JSONP、XML、CSV等多种数据格式,并且可以处理...
Ext.js CRUD 一个Ext.js支持的,电子表格样式的网格,用于针对数据库的创建/读取/更新/删除操作,该数据库前面具有 。 利用 。 安装 使用安装Sencha CMD 克隆此存储库 在此存储库中,通过npm install安装依赖项 ...
在前端,EXT Scheduler会发送Ajax请求到后端,后端则通过Spring MVC的控制器处理这些请求,执行相应的CRUD操作。数据通常以JSON格式交换,便于前后端之间的通信。 总的来说,"EXT Scheduler - Java"项目结合了EXTJS...
"ext3+struts2+hibernate+spring的CRUD+分页"是一个典型的Java Web开发组合,用于实现全面的数据管理功能。这个组合充分利用了各个框架的优势,提供了一个强大的后端数据处理和前端展示的解决方案。 首先,EXT3是一...
基于QTable的Quasar Crud组件,使用Axios API来获取远程数据...quasar ext add crud 卸载 quasar ext remove crud 演示版 未来... 资讯 使用Quasar默认类星体灭绝模板 您必须提供axios依赖关系 外部依赖 作为HTTP客户端
标题 "Ext-Gwt(GWT)开发实例(整合Spring +Hibernate)" 涉及到的是一个实际项目开发的教程,其中结合了三个重要的技术框架:Google Web Toolkit (GWT),Spring 和 Hibernate。这个实例旨在展示如何在Web应用开发中...
EXT CRUD和Login是Web开发中的两个重要概念,主要在基于EXTJS或类似前端框架的项目中常见。EXTJS是一个强大的JavaScript库,用于构建富客户端的桌面级Web应用程序。CRUD代表创建(Create)、读取(Read)、更新...
**示例项目loiane-ext4-crud-mvc-a444c4e** 这个项目很可能是EXTJS的一个示例,演示了如何使用EXTJS的MVC模式实现基本的CRUD操作。项目可能包含了以下内容: - 示例模型(Model):定义数据结构。 - 示例存储...
用EXT+struts2+spring+hibernate做的一个增删改查实例,主要用到了EXTjs里面的部分组件,用JSON与服务端交互,实现一个增删改查的功能!本地MYsql数据库,sql文件在根目录下面,建好库既可以运行!当然,还是需要在...
这包括添加、删除、修改数据等CRUD操作。 4. **事件驱动编程**:EXT JS的组件之间通过事件进行通信,当用户在界面上执行操作,如点击按钮、填写表单,都会触发相应的事件。Controller监听这些事件,调用Direct API...
在这个项目中,"ext4-crud-mvc-master"可能包含了以下组件和文件: 1. **控制器(Controller)**:Spring MVC的Java类,定义了处理HTTP请求的方法,如`save`, `read`, `update` 和 `delete` 方法。 2. **模型...
开发者可能会使用ADO.NET,C#中的数据访问技术,来与SQL Server进行交互,实现数据的CRUD(创建、读取、更新、删除)操作。 此外,C#作为.NET框架的主要编程语言,提供了丰富的类库和工具,使得开发企业级应用变得...
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...
在CRUD操作中,EXT负责前端的数据展示和用户交互,通过AJAX与后台进行异步通信。 4. **JSON(JavaScript Object Notation)**:JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在...
此文档包含了EXTjs最基本的组件类型的总结
EXT:AirTable(CMS TYPO3) 一组用于基于类注释创建网站的工具。 适用于TYPO3 v7,v8,v9,v10和v11版本。 此扩展程序的设计以最小可行产品格式(MVP)表示。 相反,它是用于基于单一标准开发网站的概念。 一些...