最近公司新项目决定前台采用ExtJS4，于是小弟只有。。。
说明：
小弟编写的这个模块，表单数据CRUD都在一个表单上完成，没有创建新的窗口，用户查询结果共用了一个grid。
ExtJS4环境需要加载的东东不多，详见我JSP文件及图。
返回数据形式：
{'totalCount': 27,'result':[{"uum0401":103,"uum0402":"a81","uum0405":false,"uum0406":false},{"uum0401":104,"uum0402":"9","uum0405":false,"uum0406":false},{"uum0401":105,"uum0402":"a9","uum0405":false,"uum0406":false},{"uum0401":127,"uum0402":"2","uum0405":false,"uum0406":false},{"uum0401":122,"uum0402":"aa"},{"uum0401":123,"uum0402":"ok"},{"uum0401":124,"uum0402":"asas"},{"uum0401":125,"uum0402":"aaa","uum0405":false,"uum0406":false},{"uum0401":129,"uum0402":"a1","uum0405":false,"uum0406":false},{"uum0401":130,"uum0402":"a2","uum0405":false,"uum0406":false}]}
为了方便大虾路过方便过目，最后只贴出js源码，其余东东附件提供，good luck。项目繁忙，就不多说了，有问题短我吧，我会尽力尽快回复，大家见谅。
/**
* @author cnyangqi@126.com
* @version 1.0
* @since 1.0
*/
Ext.Loader.setConfig({
enabled : true
});
Ext.Loader.setPath('Ext.ux', '../js/extjs4/ux/');
Ext.require(['Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.toolbar.Paging',
'Ext.ModelManager', 'Ext.tip.QuickTipManager',
'Ext.ux.ProgressBarPager']);
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
// 定义领域模型
Ext.define('Ecwuum04', {
extend : 'Ext.data.Model',
fields : ['uum0401', 'uum0402', 'uum0403', 'uum0404',
'uum0405', 'uum0406'],
idProperty : 'uum0401'// 实体主键
});
var itemsPerPage = 10;
var key;// 搜索关键字
// 创建数据仓库
var store = Ext.create('Ext.data.Store', {
autoDestroy : true,
model : 'Ecwuum04',
proxy : {
type : 'ajax',
url : 'ecwuum04!list.action',
reader : {
type : 'json',
root : 'result',// JSON数组对象名
totalProperty : 'totalCount'// 数据集记录总数
}
},
pageSize : itemsPerPage,
autoLoad : true
});
// beforeload( Ext.data.Store store, Ext.data.Operation operation)
store.on('beforeload', function(s, o) {
if (Ext.getCmp('key').getValue()) {
key = Ext.getCmp('key').getValue();
} else {
key = 'undefined';
}
s.proxy.extraParams['key'] = key;
});
var selModel = Ext.create('Ext.selection.CheckboxModel');
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
// clicksToEdit : 2,//默认双击修改行数据
clicksToMoveEditor : 1,
autoCancel : false
});
// 创建表格
var grid = Ext.create('Ext.grid.Panel', {
width : 650,
height : 300,
title : '角色信息',
frame : true,
disableSelection : false, // 允许选择行 *
selType : 'rowmodel', // 选择类型设置为：行选择
plugins : [rowEditing],// 加载行编辑插件
listeners : {
'selectionchange' : function(sm, selections) {
grid.down('#removeButton').setDisabled(selections.length == 0);
}
},
selModel : selModel,
store : store,
columns : [{
text : "角色编号",
dataIndex : "uum0401"
}, {
text : "角色名称",
dataIndex : 'uum0402',
sortable : true, // 此列数据可排序
hideable : false, // 此列数据不可隐藏
renderer : function(value) { // 一般用于添加EMail
return Ext.String.format(
'<a href="mailto:{0}@qq.com">{1}</a>', value,
value);
},
field : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "角色类型",
dataIndex : 'uum0403',
sortable : true,
field : {
xtype : 'textfield'
}
}, {
text : "关联业务系统",
dataIndex : 'uum0404',
sortable : true
}, {
text : "标记",
dataIndex : 'uum0405',
sortable : true
}, {
text : "默认角色",
dataIndex : "uum0406"
}],
// bbar : bbar,
dockedItems : [{
xtype : 'toolbar',
dock : 'top',
items : [{
xtype : 'button',
text : '添加',
tooltip : '添加角色',
iconCls : 'add',
handler : function() {
var r = Ext.ModelManager.create({
uum0402 : '',
uum0403 : '',
uum0404 : '',
uum0405 : '',
uum0406 : ''
}, 'Ecwuum04');
store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, '-', {
xtype : 'button',
text : '修改',
tooltip : '修改选择的角色',
iconCls : 'option',
handler : function() {
var sm = grid.getSelectionModel();
rowEditing.startEdit(sm.getSelection()[0],
0);// records
}
}, '-', {
itemId : 'removeButton',
xtype : 'button',
text : '删除',
tooltip : '删除选择的角色',
iconCls : 'remove',
handler : function() {
var sm = grid.getSelectionModel();
var records = sm.getSelection();
rowEditing.cancelEdit();
store.remove(records);
sm.select(0);
for (var i = 0; i < records.length; i++) {
delEcwuum04(records[i].data['uum0401']);
}
},
disabled : true
}, '->', {
xtype : "label",
text : "角色名称："
}, {
xtype : "textfield",
id : "key"
}, {
text : "搜索",
iconCls : 'search',
handler : function() {
// searchEcwuum04();
store.load();
}
}]
}, {
xtype : 'pagingtoolbar',
id : 'pt',
store : store, // 分页store与grid一致
dock : 'bottom',
displayInfo : true,
plugins : Ext.create('Ext.ux.ProgressBarPager', {})
}],
iconCls : 'icon-grid',
renderTo : 'grid'
});
grid.on('edit', onEdit, this);
function onEdit(e) {
e.record.commit();
Ext.Ajax.request({
url : 'ecwuum04!save.action',
params : {
"ecwUum04.uum0401" : e.record.data['uum0401'],
"ecwUum04.uum0402" : e.record.data['uum0402'],
"ecwUum04.uum0403" : e.record.data['uum0403'],
"ecwUum04.uum0404" : e.record.data['uum0404'],
"ecwUum04.uum0405" : e.record.data['uum0405'],
"ecwUum04.uum0406" : e.record.data['uum0406']
},
success : function(response) {
var text = response.responseText;
alert(text);
}
});
store.load();
};
function delEcwuum04(id) {
Ext.Ajax.request({
url : 'ecwuum04!delete.action',
params : {
"ecwUum04.uum0401" : id
},
success : function(response) {
}
});
store.load();
Ext.MessageBox.alert("信息", "删除成功");
}
});
分享到：
相关推荐
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
1、文件内容：perl-Locale-Maketext-1.23-3.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/perl-Locale-Maketext-1.23-3.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
免费JAVA毕业设计 2024成品源码+论文+录屏+启动教程 启动教程：https://www.bilibili.com/video/BV1SzbFe7EGZ 项目讲解视频：https://www.bilibili.com/video/BV1Tb421n72S 二次开发教程：https://www.bilibili.com/video/BV18i421i7Dx
1、文件内容：pcre2-utf16-10.23-2.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/pcre2-utf16-10.23-2.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
资源说明： 1：csdn平台资源详情页的文档预览若发现'异常'，属平台多文档切片混合解析和叠加展示风格，请放心使用。 2：29页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署，保姆级图文详解)，旨在为更多的人甚至零基础的人也能运行、使用和学习。 3：配套毕业论文，万字长文，word文档，支持二次编辑。 4：范例参考答辩ppt，pptx格式，支持二次编辑。 5：工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6：资源项目源码均已通过严格测试验证，保证能够正常运行，本项目仅用作交流学习参考，请切勿用于商业用途。 7：项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通。 内容概要： 本系统基于B/S网络结构，在IDEA中开发。服务端用Java并借Spring Boot框架搭建后台。前台采用支持HTML5的VUE框架。用MySQL存储数据，可靠性强。 能学到什么： 使用Spring Boot搭建后台。VUE框架构建前端交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。
免费JAVA毕业设计 2024成品源码+论文+录屏+启动教程 启动教程：https://www.bilibili.com/video/BV1SzbFe7EGZ 项目讲解视频：https://www.bilibili.com/video/BV1Tb421n72S 二次开发教程：https://www.bilibili.com/video/BV18i421i7Dx
资源说明： 1：csdn平台资源详情页的文档预览若发现'异常'，属平台多文档切片混合解析和叠加展示风格，请放心使用。 2：29页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署，保姆级图文详解)，旨在为更多的人甚至零基础的人也能运行、使用和学习。 3：范例参考毕业论文，万字长文，word文档，支持二次编辑。 4：范例参考答辩ppt，pptx格式，支持二次编辑。 5：工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6：资源项目源码均已通过严格测试验证，保证能够正常运行，本项目仅用作交流学习参考，请切勿用于商业用途。 7：项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通。 内容概要： 本系统基于B/S网络结构，在IDEA中开发。服务端用Java并借Spring Boot框架搭建后台。前台采用支持HTML5的VUE框架。用MySQL存储数据，可靠性强。 能学到什么： 使用Spring Boot搭建后台。VUE框架构建前端交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。
电脑调音软件下载是专为汽车音响爱好者和专业人士设计的一款强大工具， 这款软件的主要功能在于帮助用户对车载音频系统进行精确的数字信号处理，以提升音乐播放效果，提供更丰富的听觉体验。
1、文件内容：perl-IO-Compress-2.061-2.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/perl-IO-Compress-2.061-2.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
MATLAB仿真实验：电动汽车有序充放电的机组组合与最优潮流算法研究——基于MILP与二阶锥松弛技术,MATLAB代码：考虑电动汽车有序充放电的机组组合和最优潮流 关键词：电动汽车 MILP 最优潮流 参考文档：《A bi-layer optimization based temporal and spatial scheduling for large-scale electric vehicles》 仿真平台：MATLAB YALMIP GUROBI 主要内容：机组组合采用原文相同的线性化方法 最优潮流采用二阶锥松弛替代原文算法 结果完全相同 ,电动汽车; MILP; 最优潮流; 二阶锥松弛; 线性化方法,基于MILP与二阶锥松弛的电动汽车有序充放电最优潮流仿真研究
基于麻雀搜索算法优化SVR回归预测模型：以身体脂肪含量数据集的精准预测为研究对象,基于麻雀搜索算法优化SVR回归预测模型 输入不限，单输出 数据选用：身体脂肪含量数据集 针对SVR回归预测模型采用麻雀搜索算法 ,基于麻雀搜索算法; SVR回归预测模型优化; 身体脂肪含量数据集; 算法优化SVR模型,基于麻雀搜索算法优化SVR预测身体脂肪含量模型
资源说明： 1：csdn平台资源详情页的文档预览若发现'异常'，属平台多文档切片混合解析和叠加展示风格，请放心使用。 2：29页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署，保姆级图文详解)，旨在为更多的人甚至零基础的人也能运行、使用和学习。 3：配套毕业论文，万字长文，word文档，支持二次编辑。 4：范例参考答辩ppt，pptx格式，支持二次编辑。 5：工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6：资源项目源码均已通过严格测试验证，保证能够正常运行，本项目仅用作交流学习参考，请切勿用于商业用途。 7：项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通。 内容概要： 本系统基于B/S网络结构，在IDEA中开发。服务端用Java并借Spring Boot框架搭建后台。前台采用支持HTML5的VUE框架。用MySQL存储数据，可靠性强。 能学到什么： 使用Spring Boot搭建后台。VUE框架构建前端交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。
deepseek janus本地部署资料
1、文件内容：perl-Env-1.04-2.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/perl-Env-1.04-2.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
基于蒙特卡洛模拟法的风光场景生成与削减：深度解析风光出力模型及其实证研究,21-基于蒙特卡洛模拟法的风光场景生成与削减 摘要：代码主要做的是风光场景的生成与削减，首先对风光出力概率分布模型进行建模，分布以Beta模型以及Weibull分布模型描述光伏和风电出力的形状参数，并继而根据蒙特卡洛法模拟出1000次风光出力场景，最后通过概率距离对场景进行削减，直至生成5个场景。 本代码几乎一行一注释，相关公式我已经整理成文档供参考，绝对是目前最为细致的风光场景生成与削减的学习资料，欢迎来辨注释程度、出图效果可以见下图哦 优质服务：1、代码非常精品，注释几乎一行一注释； 5、本代码不提供本代码不提供 6、代码买前问清楚，一经不 不一经不 不 ,基于蒙特卡洛模拟法的风光场景生成与削减; 风光出力概率分布模型; Beta模型; Weibull分布模型; 蒙特卡洛法模拟; 场景削减; 注释详细的代码; 出图效果。,基于蒙特卡洛模拟法的风光场景生成与削减技术详解
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
1、文件内容：perl-HTTP-Date-6.02-8.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/perl-HTTP-Date-6.02-8.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
globalmousekeyhook InputSimulator