ext 做后台的经验

 

先说一下功能，点击“菜单”打开“标签页“标签页里显示表格，表格可增加，编辑（直接双击编辑或选中行在新建面中编辑），删除数据。以下是关键代码。

 

效果：

 

点编辑后的状态

与添加唯一不同的只是添加初始为空白

management.htm 引入ext必需的JS 和下面提到的Js页面

 

菜单部分代码

 

<p> <a class="btnOfList" id="users" href="#" mce_href="#">管理员列表</a> </p> <p> <a class="btnOfList" id="adminoperationlog" href="#" mce_href="#">管理员操作日志</a> </p> <p> <a class="btnOfList" id="customerInfo" href="#" mce_href="#">客户列表</a> </p> <p> <a class="btnOfList" id="products" href="#" mce_href="#">产品列表</a> </p> <p> <a class="btnOfList" id="payDetails" href="#" mce_href="#">客户交易列表</a> </p> <p> <a class="btnOfList" id="transferRecords" href="#" mce_href="#">客户划帐列表</a> </p> <p> <a class="btnOfList" id="notice" href="#" mce_href="#">系统公告列表</a> </p> <p> <a class="btnOfList" id="area" href="#" mce_href="#">区域列表</a> </p>

 

pub.js

Ext.onReady(function() { $(".btnOfList").click(function() { openTab(this.id, this.innerHTML, null, eval("init" + this.id + "Grid")); }); }); //生成一个容器 function getContainer(flag) { if ($("#editor-grid-" + flag)[0]) return false; var container = $("#centerContainer" + flag)[0]; if (!container) { container = document.createElement("div"); container.id = "centerContainer" + flag; Ext.getBody().appendChild(container); } var editorgrid = document.createElement("div"); editorgrid.id = "editor-grid-" + flag; container.appendChild(editorgrid); return editorgrid.id; } //生成一个标签 function openTab(flag, tabTitle, icon, callF,idstr,rowObj) { var containerid = getContainer(flag); if (containerid) { callF(containerid, idstr, rowObj); //初始化 tabs.add({ contentEl: containerid, id: flag + '_tab', title: tabTitle, iconCls: icon ? icon : "", closable: true, autoDestroy: false, viewConfig: { forceFit: true } }).show(); } tabs.activate(flag + '_tab'); }

 

 

ext_add_admin.js

 

var adminAddPostUrl = "/management/procrequest/Proc_admin.ashx?action=add"; var adminUpdatePostUrl = "/management/procrequest/Proc_admin.ashx?action=update"; function initAddadminForm(containerid, idstr,rowObj) { if (!idstr) idstr = containerid; var adminForm = new Ext.FormPanel({ labelWidth: 100, // label settings here cascade unless overridden url: adminAddPostUrl, frame: true, bodyStyle: 'padding:5px 5px 0', autoWidth: true, defaults: { width: '350' }, defaultType: 'textfield', renderTo: containerid, items: [ { xtype: 'hidden', name: 'adminid', id: 'adminid' + idstr, value: null == rowObj ? null : rowObj.get("adminid"), readOnly: true } ,{ xtype: 'textfield', fieldLabel: 'passport', height: 20, name: 'passport', value: null == rowObj ? null : rowObj.get("passport"), id: 'passport' + idstr } ,{ xtype: 'textfield', fieldLabel: 'password', height: 20, name: 'password', value: null == rowObj ? null : rowObj.get("password"), id: 'password' + idstr } ], buttons: [{ text: '保存', handler: function() { if (!adminForm.form.isValid()) return; adminForm.form.submit({ meghod: 'post', url: !isNaN(idstr) && parseInt(idstr) > 0 ? adminUpdatePostUrl : adminAddPostUrl, waitMsg: '正在保存,请稍候...', success: function() { Ext.MessageBox.show({ title: '保存结果', msg: '保存成功', buttons: Ext.MessageBox.OK, icon: Ext.MessageBox.INFO }); }, failure: function() { Ext.MessageBox.show({ title: '保存结果', msg: '保存失败', buttons: Ext.MessageBox.OK, icon: Ext.MessageBox.ERROR }); } }); } }] }); }

 

ext_editgrid_admin.js

var admingrid; var adminstore; var adminlimit = 25; //每页显示条数 var adminListPostUrl = "/management/procrequest/Proc_admin.ashx?action=getlist"; var adminModifyPostUrl = "/management/procrequest/Proc_admin.ashx?action=modify"; var adminDeletePostUrl = "/management/procrequest/Proc_admin.ashx?action=del"; function initadminGrid(containerid) { Ext.menu.RangeMenu.prototype.icons = { gt: 'images/greater_then.png', lt: 'images/less_then.png', eq: 'images/equals.png' }; Ext.grid.filter.StringFilter.prototype.icon = 'images/find.png'; Ext.QuickTips.init(); function formatDate(value) { return value ? value.dateFormat('M d, Y') : ''; }; var fm = Ext.form; var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ sm, { id:'adminid', header: 'adminid', dataIndex: 'adminid', sortable: true, width:70, editor: new fm.NumberField({ allowBlank: false, allowNegative: false }) }, { header: 'passport', dataIndex: 'passport', sortable: true, width:120, editor: new fm.TextField({ allowBlank: false, allowNegative: false }) }, { header: 'password', dataIndex: 'password', sortable: true, width:120, editor: new fm.TextField({ allowBlank: false, allowNegative: false }) } ]); cm.defaultSortable = true; /* var Plant = Ext.data.Record.create([ ]); */ adminstore = new Ext.data.JsonStore({ root: 'list', totalProperty: 'totalCount', idProperty: 'adminid', remoteSort: true, fields: [ {name: 'adminid' },{name: 'passport' },{name: 'password' } ], proxy: new Ext.data.ScriptTagProxy({ url: adminListPostUrl }) }); adminstore.setDefaultSort('adminid', 'desc'); var filters = new Ext.grid.GridFilters({ filters: [ { type: 'string', dataIndex: 'adminid' }, { type: 'string', dataIndex: 'passport' }, { type: 'string', dataIndex: 'password' } ] }); var pagingBar = new Ext.PagingToolbar({ pageSize: adminlimit, store: adminstore, displayInfo: true, displayMsg: '第 {0} - {1} 条记录,总共 {2} 条记录', emptyMsg: "没有记录" }); admingrid = new Ext.grid.EditorGridPanel({ store: adminstore, cm: cm, sm: sm, bodyStyle: 'width:100%', autoWidth: true, height: 620, renderTo: containerid, autoExpandColumn: 'adminid', frame: true, clicksToEdit: 2, plugins: [filters], loadMask: true, enableTabScroll: true, tbar: [{ text: '添加', tooltip: '添加新记录', iconCls: 'add', handler:function(){ openTab("addadmin", "添加admin", null, initAddadminForm); } }, '-', { text: '编辑', tooltip: '编辑选中记录', iconCls: 'option', handler: function() { var selectedRow = admingrid.getSelectionModel().getSelections(); if (selectedRow) { var obj = selectedRow[0]; if (!obj) return; var id = obj.get("adminid"); openTab("editadmin", "编辑admin", null, initAddadminForm, id, obj); } } }, '-', { text: '删除', tooltip: '删除选中记录', iconCls: 'remove', handler: function() { var selectedRow = admingrid.getSelectionModel().getSelections(); Ext.MessageBox.confirm('Confirm', '你确定要删除你所选定的' + selectedRow.length + "项吗？", function(btn) { if (btn == 'yes') { if (selectedRow) { for (var i = 0; i < selectedRow.length; i++) { var obj = selectedRow[i]; var id = obj.get("adminid"); adminstore.remove(obj); $.ajax({ type: "POST", url: adminDeletePostUrl, dataType: "json", data: "recordid=" + id, success: function(msg) { if (msg[0] && msg[0].string != "success") adminstore.reload(); } }); } } } }); } }], bbar: pagingBar }); adminstore.load({ params: { start: 0, limit: adminlimit} }); admingrid.on("afteredit", afterEdit, admingrid); function afterEdit(obj) { var r = obj.record; //获取被修改的行 var fildname = obj.field; //获取被修改的列 var id = r.get("adminid"); var fildval = obj.value; $.ajax({ type: "POST", url: adminModifyPostUrl, dataType: "json", data: { action: 'modify', fildname: fildname, id: id, fildval: fildval }, complete: function() { }, success: function(msg) { } }); } }