最近公司新项目决定前台采用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("信息", "删除成功");
}
});
分享到：
相关推荐
### Ext JS 4.0 编码规范详解 #### 一、环境要求 Requirements ##### 1. 浏览器 Web Browsers Ext JS 4.0 支持主流浏览器，确保了良好的兼容性和广泛的用户覆盖。为了获得最佳的调试体验，推荐使用以下浏览器： - ...
Ext 4.0是Sencha公司开发的一个JavaScript框架的重要版本，专用于构建富客户端Web应用程序。这个框架基于组件模型，提供了丰富的用户界面组件和强大的数据管理能力，使得开发者能够创建功能强大、交互性强的Web应用...
ext js 4.0 api html格式
Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo
经典的Ext js4.0源码包，解压压缩包后放入tomactWebapps目录，运行tomact即可看到ext js事例展示，有很多种页面展示效果哦
在"ssh+extjs4.0grid增删改查"这个主题中，我们将深入探讨如何将SSH框架与Ext JS 4.0 Grid集成，实现数据的CRUD（Create, Read, Update, Delete）功能。 1. **Struts2整合Hibernate**： - 配置Struts2-Hibernate...
EXT4.0 SDK 正式版是针对EXT4文件系统的软件开发工具包，它为开发者提供了在Linux操作系统中创建、管理以及优化EXT4文件系统所需的工具和库。EXT4（Fourth Extended File System）是Linux内核中广泛使用的日志文件...
ext-4.0.rar ext-4.0.rar ext-4.0.rar
【标题】"ext4.0 ext4.0" 指的是EXT文件系统的一个特定版本——EXT4.0，这是Linux操作系统中广泛使用的日志文件系统。EXT4，全称Fourth Extended File System，是EXT3的后继者，旨在提供更高的性能、更大的文件系统...
ext-4.0
Ext4 是 Ext3 的改进版，修改了 Ext3 中部分重要的数据结构，而不仅仅像 Ext3 对 Ext2 那样，只是增加了一个日志功能而已。Ext4 可以提供更佳的性能和可靠性，还有更为丰富的功能：
在IT行业中，Ext JS是一个广泛使用的JavaScript库，用于构建富客户端Web应用程序。它提供了一套完整的组件模型，包括网格、表单、面板等，以及强大的数据绑定和布局管理功能。Ext4.0是该框架的一个重要版本，引入了...
都是项目开发中非常实用的技术点，本人精心整理，希望对从事ext4开发的童鞋有所帮助。
Ext4.0调试工具是专为开发者设计的用于优化和调试Ext JS 4.0应用程序的工具集合。这些工具能够帮助开发者深入理解代码运行过程，定位并修复潜在问题，提高应用性能。在本文中，我们将详细探讨Ext4.0调试工具的几个...
Ext4.0中文API是针对Ext JS 4.0框架的中文参考文档，它为开发者提供了详尽的API接口信息，使得在中国地区的开发者能够更好地理解和使用这个强大的JavaScript库。Ext JS是一个用于构建富互联网应用程序（RIA）的前端...
Ext JS 4.0是一个成熟的JavaScript框架，为构建丰富的Web应用提供了一整套解决方案。它适合有一定JavaScript基础，并希望创建具有高度交互性、良好视觉效果和高度定制化的Web应用程序的开发人员。无论是对于新手还是...
后台使用的是struts2生成Ext所需要的json，把webroot下的ext4下面加入ext的开发包，然后再把create.sql中的脚本在数据库中执行，代码就可以跑起来了，我用的是mysql数据库
EXT4.0.jsb2是与EXT4.0相关的JavaScript库或配置文件，可能是为了提供EXT4文件系统的API模拟或者开发工具的支持。Spket是一款强大的JavaScript开发工具，它提供了代码提示、语法高亮、自动完成等功能，极大地提高了...
EXT4.0是Ext JS框架的一个重要版本，它提供了丰富的用户界面组件和强大的数据管理功能，广泛应用于Web应用程序的开发。这篇指南将着重于EXT4.0的基础知识，帮助初学者快速入门EXT JS的开发。 1. **EXTJS基础** - ...
ext-4.0.0-gpl.zip EXT4.0共二卷 ext-4.0.0-gpl.zip EXT4.0第一卷