Ext JS 4.0 Grid实战
最近公司新项目决定前台采用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 : ,// 加载行编辑插件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) { // 一般用于添加EMailreturn 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);// 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.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]