下载文档原格式
ExtJs 4 中的数据操作讲师：风舞烟目录：1.Ext.Ajax2.Ext.data.Proxy3.Ext.data.Model4.Ext.data.Store5.综合示例内容：1.Ext.Ajaxajax几个常用的参数如下:success Function 指定当Ajax请求执行成功后执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。
failure Function指定当请求出现错误时执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request 方法时的options对象。
scope Object 指定回调函数的作用域，默认为浏览器window。
form Object/String 指定要提交的表单id或表单数据对象。
isUpload Boolean 指定要提交的表单是否是文件上传表单，默认情况下会自动检查。
headers Object 指定请求的Header信息。
xmlData Object 指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。
jsonData Object/String 指定需要发送给服务器端的JSON数据。
如果指定了该属性则其它的地方设置的要发送的参数值将无效。
disableCaching Boolean 是否禁止cache。
例1通过客户端向服务端发送Ajax请求，可以“直接”调用MVC的action方法，并传递参数，action返回值可以是普通字符串，也可以是json对象。
请求可以添加自定义头信息Ext.onReady(function() {new Ext.Button({renderTo: "div1",text: "后台Ajax提交",handler: function() {Ext.Ajax.request({url: 'Ajax_Func1',headers: {'userHeader': 'userMsg' },params: { a: 10, b: 20 },method: 'GET',success: function(response, options) {Ext.MessageBox.alert('成功', '从服务端获取结果: ' +response.responseText);},failure: function(response, options) {Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);}});},id: "bt1" });});后台返回的数据如：{success:true,msg:"ok"}例2异步请求，返回json结果Ext.onReady(function() {new Ext.Button({renderTo: "div1",text: "后台Ajax提交方式2返回JSON",handler: function() {Ext.Ajax.request({url: 'Ajax_Func2',params: { n: 10 },method: 'POST',callback: function(options, success, response) {if(success) {var responseJson = Ext.JSON.decode(response.responseText);Ext.Msg.alert("成功", options.params.n + "的平方是：<font color='red'>" + responseJson.n1 + "</font><br />"+ options.params.n + "的累加是：<fontcolor='red'>" + responseJson.n2 + "</font>");} else{Ext.Msg.confirm('失败','请求超时或网络故障,错误编号：[' +response.status + ']是否要重新发送？', function(btn) {if (btn == 'yes') {Ext.Ajax.request(options);}});}}});}});});服务端返回数据形如：{ success:true,n1:100,n2:20}例3异步请求事件。
1. 切勿使用“new”关键字：在Ext JS中，使用“new”关键字来创建一个组件或类的实例是一种错误的做法，因为这没有遵循组件的生命周期。
应该使用Ext.create 方法来创建对象，例如：2.初始化直接量：不要直接创建直接量的对象，例如，使用以下javascript来创建空白对象：在javascript中，以上都是创建对象的不正确方式，这是因为如果使用这些处理方式，控制需要去遍历整个类的层次。
因此，作为替代，可以使用以下方式来创建这些类的对象：不过，你接手的可能是别人编写的遗留代码，因而会注意到构造函数的一个“特色”（这或者是另一个不使用它的理由）。
“特色”的主要问题是Object的构造函数可接受参数，并且它会根据传入的值来决定是否将对象的创建委托给另一个内置构造函数，而最终返回的对象可能不是你所预期的，例如：3. 更聪明的使用getCmp：它将根据传递的id值返回匹配的对象（Ext JS对象）。
这是一种快速返回对象的方法。
所有对象在创建的时候，都需要使用他们的id 作为关键字注册为一个单一对象，这样，使用Ext.getCmp(myId)就可以寻找并返回RegistrationObject["myId"]，因此，这会变得非常快捷。
不过，如果都个组件使用了相同的id，它就会失效。
在这种情况下，它将会返回最后一个查找到的对象。
基于这点，建议尽量不要使用这个来获取对象。
建议的做法是只使用该方法一次，然后将结果保存到一个变量，再在其他地方通过变量来引用对象。
如果需要为多个组件定义相同的id，建议使用itemId。
通过这篇文章可了解id 和itemId直接的不同。
4. 避免不必要的全局变量：使用全局变量的主要问题就是它可在javascript应用程序或Web页面中共享所有代码。
这可能会与使用相同名称的命名空间引起冲突，在应用程序的两个单独部分定义具有相同名称但用途不同的全局变量的可能性是存在的。
ExtJs源码笔记------Ext.jsExtJs 源码笔记------Ext.js最近准备系统的学习⼀下Ext的源码，SO,话不多说，从第⼀篇开始。
⾸先，先看⼀下Ext.js这个⽂件的代码结构：var Ext = Ext || {}; // 定义全局变量Ext._startTime = new Date().getTime();(function(){// 定义⼀些局部变量var ......// 核⼼Ext.apply = function(){......};// 初始化 Ext 的⼀些属性函数Ext.apply(Ext, {......});}());// 全局闭包Ext.globalEval = ......代码的结构不难，但是仔细看下来，有些细节的地⽅还是很值得回味⼀番。
下⾯具体分析⼀下我对源码的理解，⽔平有限，不⾜之处还望各位看官指正。
1. 定义局部变量var global = this,objectPrototype = Object.prototype,toString = objectPrototype.toString,enumerables = true,enumerablesTest = {toString: 1},emptyFn = function () {},......for (i in enumerablesTest) {enumerables = null;}// 看到这⾥的时候，有点疑惑，enumerables 不是肯定会被置为 null 吗// 下⾯为什么还需要判断enunerables? 有蹊跷.....// 返回去再看⼀下 enumerablesTest，⾥⾯只有⼀个属性 toString, 为啥偏偏是这样的⼀个属性？？嗯！想起来了，在IE6下，对象中的toString属性，不能通过hasOwnProperty或for...in迭代得到// So，这⾥其实就是为了兼容IE6⽤的。
前段时间公司让我们学习ExtJS，学习了一个礼拜，完成了个小练习，思来想去决定做个总结，但是又懒得敲word，于是就在代码上每行都加上注释，以后忘记了就翻开来看看。
在这里给出代码。
完成的功能如图所示。
Js代码1./**2. * 默认页面3. *4. * @author leaves.qq:13307715525. */6.7.Ext.define('SupplyManagementDesktop.defaultsWindow', {8. extend : 'Ext.ux.desktop.Module',9.10. requires : ['Ext.data.ArrayStore', 'Ext.util.Format', 'Ext.grid.Panel',11. 'Ext.grid.RowNumberer', 'Ext.ux.LiveSearchGridPanel'],12.13. id : 'defaultsWindow-win',14.15. /***************************************************************************16. * ExtJS控件使用按照如下规则。
首先，创建控件，调用Ext.create17. * weightName:空间命名空间，args：空间参数，用{}包围，当做对象传入18. *19. * ####################################### 注意JS中有如下语法： var object={20. * paramter1:value1, paramter2:value2, paramter3:value3 }21. * object.paramter1可以直接获得value1 #####################################22. *23. * ExtJS中所有空间创建方法都如上24. *25. * Ext.create(String weightName,Mixed args)26. * 所以此处args相当于一个匿名对象（没有引用），但并非真的匿名对象27. *28. */29. // 初始化窗体的方法30. init : function() {31. uncher = {32. text : 'Defaults Window',33. iconCls : 'icon-grid',34. // 调用createWindow方法35. handler : this.createWindow,36. scope : this37. // this指向Ext.define（这个方法用来声明命名空间。
ExtJS模块案例（增删改查）Ext.QuickTips.init();Ext.onReady(function () {//终端类型下拉列表数据源var comboStore = new Ext.data.JsonStore({url: '/AccessMaintenanceHandler/GetResListByResParent.ashx',root: 'Table',totalProperty: 'result',fields: ['Res_Name', 'Res_Id'],autoLoad: true});comboStore.on('beforeload', function () {var params = comboStore.baseParams;Ext.apply(params, {ParentCode: '8b4010451db44edfa7f7e1f9e6f20e12' //终端类型的Code});});comboStore.on('load', function (mystore, rds, op) {var newRecord = new mystore.recordType({ Res_Name: '全部', Res_Id: "" });comboStore.insert(0, newRecord);Ext.getCmp('TerminalType').setValue(""); //默认加载全部});//终端类型var DevicecomboStore = new Ext.data.JsonStore({url: '/AccessMaintenanceHandler/GetResListByResParent.ashx',root: 'Table',totalProperty: 'result',fields: ['Res_Name', 'Res_Id'],autoLoad: true});DevicecomboStore.on('beforeload', function () {var params = DevicecomboStore.baseParams;Ext.apply(params, {ParentCode: '8b4010451db44edfa7f7e1f9e6f20e12' //终端类型的Code});});var formPanel = new Ext.FormPanel({frame: true,title: '端⼝台账信息维护',layout: 'form',height: 300,autoWidth: true,id: 'formPanel',autoScroll: true,items: [{layout: 'column',items: [{layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'combo',fieldLabel: '终端类型',store: comboStore,typeAhead: false,editable: false,mode: 'local',triggerAction: 'all',id: 'TerminalType',displayField: 'Res_Name',valueField: 'Res_Id'}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '设备序列号',emptyText: '设备序列号',id: 'SearchEquipmentCode', //设备编码width: 200}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '设备名称',emptyText: '设备名称',id: 'SearchEquipmentName', //设备名称width: 200}]}]}]});//多选框var ckModel = new Ext.grid.CheckboxSelectionModel({singleSelect: false});//数据源var PortLedgerStore = new Ext.data.JsonStore({url: '/PortLedgerInfoHandler/SelectAll.ashx',root: 'Table',totalProperty: 'result',fields: [{ name: 'ID' },{ name: 'SAPCode' },{ name: 'IsEnable' },{ name: 'RowNumber' },{ name: 'Brand' },{ name: 'PortOffice' },{ name: 'EquipmentCode' },{ name: 'Address' },{ name: 'CabinetNumber' },{ name: 'SwitchIP' },{ name: 'SwitchNumber' },{ name: 'EquipmentName' },{ name: 'PortNumber' },{ name: 'SAPCode' },{ name: 'TPNumber' },{ name: 'TMacAddress' },{ name: 'VLAN' },{ name: 'TerminalType' },{ name: 'Res_Name' },{ name: 'TerminalAddress' },{ name: 'Remark' },{ name: 'Model' }],autoLoad: true});//加载后的条件PortLedgerStore.on('beforeload', function () {var params = PortLedgerStore.baseParams;Ext.apply(params, {TerminalType: Ext.getCmp('TerminalType').getValue(), //获取下拉框的类型ID EquipmentCode: Ext.getCmp('SearchEquipmentCode').getValue(), //设备序列号 EquipmentName: Ext.getCmp('SearchEquipmentName').getValue(), //设备名称limit: 20})});//端⼝台账的Gridvar PortLedgerGrid = new Ext.grid.GridPanel({id: 'PortLedgerGrid',region: "center",plit: true,border: true,store: PortLedgerStore,margins: '5 5 5 5',animCollapse: false,enableColumnMove: false,enableHdMenu: false,trackMouseOver: false,loadMask: { msg: '正在加载，请稍等...' },cm: new Ext.grid.ColumnModel([ckModel,{ header: 'ID', dataIndex: 'ID', width: 40, hidden: true },{ header: '序号', dataIndex: 'RowNumber', width: 40},{ header: '品牌', dataIndex: 'Brand', width: 60 },{ header: '型号', dataIndex: 'Model', width: 80 },{ header: '设备序列号', dataIndex: 'EquipmentCode', width: 80 },{ header: '设备位置', dataIndex: 'Address', width: 80 },{ header: '交换机IP地址', dataIndex: 'SwitchIP', width: 80 },{ header: '机柜号', dataIndex: 'CabinetNumber', width: 80 },{ header: '交换机序号', dataIndex: 'SwitchNumber', width: 80 },{ header: '设备名称', dataIndex: 'EquipmentName', width: 80 },{header: '端⼝号', dataIndex: 'PortNumber', width: 80 },{ header: '端⼝办公室', dataIndex: 'PortOffice', width: 80 },{ header: '终端端⼝号', dataIndex: 'TPNumber', width: 80 },{ header: '终端MAC地址', dataIndex: 'TMacAddress', width: 80 },{ header: 'VlAN', dataIndex: 'VLAN', width: 80 },{ header: '终端类型', dataIndex: 'Res_Name', width: 80 },{ header: '终端位置', dataIndex: 'TerminalAddress', width: 80 },{ header: '备注', dataIndex: 'Remark', width: 100 }]),bbar: new Ext.PagingToolbar({bodyStyle: "background-color:#DEECFD;padding:10 0 10 10",pageSize: 20, //设置每页记录条数store: PortLedgerStore,displayInfo: true,prevText: '上⼀页',nextText: '下⼀页',refreshText: '刷新',displayMsg: '显⽰第 {0} 条到 {1} 条记录，⼀共 {2} 条',emptyMsg: "没有记录",lastText: '最后⼀页',firstText: '第⼀页',beforePageText: '当前页',afterPageText: '共{0}页'}),tbar: ["->", '<a href="/PluginsFor2/ProcessWeb/Page/DownLoadFileTemplate/DownLoadFileTemplate.aspx?id=PortLedgerInfo" target=\"_blank\">下载模板</a>',{xtype: 'button',text: 'Excel导⼊',id: 'ReadExcel',name: 'ReadExcel',iconCls: 'imporicont',width: 60,handler: function () {//导⼊Excelvar ImportExcel = null;if (!!ImportExcel) {ImportExcel.destroy();}ImportExcel.open();ImportExcel.on('importsuccess', function (form, action) {var result = action.result.success;var tip = action.result.result;if (result == 'true') {PortLedgerGrid.getStore().load({ params: { start: 0, limit: 20} }); Ext.Msg.alert('提⽰', tip);}else {Ext.Msg.alert('提⽰', tip);}});}}, "-", {xtype: 'button',text: 'Excel导出',id: 'ExportExcel', //name: 'ExportExcel',iconCls: 'zengjia',width: 60,handler: function () {var record = PortLedgerGrid.getSelectionModel().getSelections(); ExportExcel(); //调⽤导出⽅法}}, "-", {xtype: 'button',text: '查询',name: 'Search',id: 'Search',iconCls: 'searchicon',width: 60,handler: function () {PortLedgerGrid.getStore().load({ params: { start: 0, limit: 20} });}}, "-", {xtype: 'button',text: '重置',id: 'Reset',name: 'Reset',iconCls: 'deleteicon',width: 60,handler: function () {Ext.getCmp('TerminalType').setValue('');Ext.getCmp('SearchEquipmentCode').setValue('');Ext.getCmp('SearchEquipmentName').setValue('');PortLedgerGrid.getStore().load({ params: { start: 0, limit: 20} });}}, "-", {xtype: 'button',text: '添加',id: 'add',name: 'add',iconCls: 'addicon',width: 60,handler: function () {var title = "新增";GridUpdate("Add", title);}}, "-", {xtype: 'button',text: '编辑',id: 'edit',name: 'edit',iconCls: 'editicon',width: 60,handler: function () {var record = PortLedgerGrid.getSelectionModel().getSelections();Ext.Msg.alert('提⽰', ' 请选择⼀条信息！');} else if (record.length == "1") {var title = "修改";GridUpdate("Update", title);} else {Ext.Msg.alert('提⽰', '只允许选中⼀条数据！');}}}, "-", {xtype: 'button',text: '删除',id: 'delete',name: 'delete',iconCls: 'deleteicon',width: 60,handler: function () {var record = PortLedgerGrid.getSelectionModel().getSelections(); //grid选中⾏ var PortNumber = record[0].data.PortNumber;var SAPCode = record[0].data.SAPCode;if (record.length == 0) {Ext.Msg.alert('提⽰', '请选择⼀条信息！');} else if (PortNumber != null && SAPCode != "") {Ext.Msg.alert('提⽰', '端⼝已被占⽤,⽆法操作！');} else {Remark();}}}],sm: ckModel});//删除show出的备注窗体function Remark() {var GridRemarkPanel = new Ext.form.FormPanel({border: false,frame: true,layout: 'form',autoWidth: true,border: false,width: 300,border: false,labelWidth: 70,items: [{xtype: 'textarea',fieldLabel: '备注',emptyText: '备注',id: 'GRemark',name: 'GRemark',width: 260,height: 100}]});var GridRemarkWindow = new Ext.Window({title: '删除',width: 400,modal: true,resizable: false,items: [GridRemarkPanel],buttonAlign: 'center',buttons: [{width: 100,text: '确认',handler: function () {var record = PortLedgerGrid.getSelectionModel().getSelections(); //grid选中⾏ var GRemark = Ext.getCmp("GRemark").getValue();if (GRemark == "") {Ext.MessageBox.alert('提⽰', '备注必填!');return false;Ext.Msg.confirm(' 提⽰', '确定要删除吗？', function (btn) {if (btn == "yes") {var ID = "";for (var i = 0; i < record.length; i++) {ID += record[i].data.ID + ','; //多⾏删除}var detail = Ext.getCmp("GRemark").getValue();var PortNumber = record[0].data.PortNumber;Ext.Ajax.request({url: '/PortLedgerInfoHandler/DeleteAllByPID.ashx',method: 'POST',params: {ID: ID},success: function (response) {Ext.Msg.alert('提⽰', '删除成功!');Ext.getCmp("PortLedgerGrid").getStore().reload();GridRemarkWindow.close();},failure: function (response) {Ext.Msg.alert("提⽰", '删除失败!');GridRemarkWindow.close();}});}});}}, {width: 100,text: '取消',handler: function () {GridRemarkWindow.close();}}]});GridRemarkWindow.show();}//Excel导出function ExportExcel() {var LoginEmp_Id = "";var myCheckboxItems = [];var model = Ext.getCmp("PortLedgerGrid").colModel;for (var i = 1; i < Ext.getCmp("PortLedgerGrid").colModel.config.length; i++) { if (model.config[i].dataIndex != "ID")myCheckboxItems.push({boxLabel: model.config[i].header,name: "ExportInfo",id: model.config[i].dataIndex,checked: true,inputValue: i});}var GridExportPanel = new Ext.form.FormPanel({height: 280,border: false,id: 'ExportPanel',frame: true,layout: 'column',autoWidth: true,items: [{xtype: 'checkboxgroup',id: 'ExportColumnModel',columns: 5,vertical: true,items: myCheckboxItems}]});title: '导出列选择',width: 550,height: 260,modal: true,resizable: false,items: [GridExportPanel],buttonAlign: 'center',buttons: [{width: 100,text: '确认',handler: function () {var itcIds = [];var cbgItem = Ext.getCmp('ExportPanel').findById('ExportColumnModel').items;var exportFields = '<root>'for (var i = 0; i < cbgItem.length; i++) {if (cbgItem.itemAt(i).checked) {if (cbgItem.itemAt(i).checked == "ID") {continue;}exportFields += "<row><headerText>" + cbgItem.itemAt(i)["boxLabel"] + "</headerText><columnName>" + cbgItem.itemAt(i)["id"] + "</columnName></row>";}}exportFields += '</root>';var baseParams = "";var params = "";var records = Ext.getCmp('PortLedgerGrid').getSelectionModel().getSelections();if (records.length > 0) {for (var i = 0; i < records.length; i++) {var ID = ""; //绑定的列名if (records[i].data.ID != null) {ID = records[i].data.ID;}var RowNumber = "";if (records[i].data.RowNumber != null) {RowNumber = records[i].data.RowNumber;}var Brand = "";if (records[i].data.Brand != null) {Brand = records[i].data.Brand;}var Model = "";if (records[i].data.Model != null) {Model = records[i].data.Model;}var EquipmentCode = "";if (records[i].data.EquipmentCode != null) {EquipmentCode = records[i].data.EquipmentCode;}var Address = "";if (records[i].data.Address != null) {Address = records[i].data.Address;}var CabinetNumber = "";if (records[i].data.CabinetNumber != null) {CabinetNumber = records[i].data.CabinetNumber;}var SwitchIP = "";if (records[i].data.SwitchIP != null) {SwitchIP = records[i].data.SwitchIP;}var PortOffice = "";if (records[i].data.PortOffice != null) {PortOffice = records[i].data.PortOffice;}var SwitchNumber = "";if (records[i].data.SwitchNumber != null) {var EquipmentName = "";if (records[i].data.EquipmentName != null) {EquipmentName = records[i].data.EquipmentName;}var PortNumber = "";if (records[i].data.PortNumber != null) {PortNumber = records[i].data.PortNumber;}var TPNumber = "";if (records[i].data.TPNumber != null) {TPNumber = records[i].data.TPNumber;}var TMacAddress = "";if (records[i].data.TMacAddress != null) {TMacAddress = records[i].data.TMacAddress;}var VLAN = "";if (records[i].data.VLAN != null) {VLAN = records[i].data.VLAN;}var Res_Name = "";if (records[i].data.Res_Name != null) {Res_Name = records[i].data.Res_Name;}var TerminalAddress = "";if (records[i].data.TerminalAddress != null) {TerminalAddress = records[i].data.TerminalAddress;}var Remark = "";if (records[i].data.Remark != null) {Remark = records[i].data.Remark;}baseParams += "<row>" +"<RowNumber>" + RowNumber + "</RowNumber>" +"<Model>" + Model + "</Model>" +"<Brand>" + Brand + "</Brand>" +"<EquipmentCode>" + EquipmentCode + "</EquipmentCode>" +"<Address>" + Address + "</Address>" +"<CabinetNumber>" + CabinetNumber + "</CabinetNumber>" +"<SwitchIP>" + SwitchIP + "</SwitchIP>" +"<PortOffice>" + PortOffice + "</PortOffice>" +"<SwitchNumber>" + SwitchNumber + "</SwitchNumber>" +"<EquipmentName>" + EquipmentName + "</EquipmentName>" +"<PortNumber>" + PortNumber + "</PortNumber>" +"<TPNumber>" + TPNumber + "</TPNumber>" +"<TMacAddress>" + TMacAddress + "</TMacAddress>" +"<VLAN>" + VLAN + "</VLAN>" +"<Res_Name>" + Res_Name + "</Res_Name>" +"<TerminalAddress>" + TerminalAddress + "</TerminalAddress>" +"<Remark>" + Remark + "</Remark>" +"</row>";}params = { xmlParams: baseParams };monExportExcel("/PluginsFor2/ProcessWeb/Page/ExportExcel/ExportExcel.aspx", params, "monPluginsHandler.dll", "monHandler", "ExportInfoByGridInfo", exportFields);ExportWindow.close();} else {baseParams = "<TerminalType>" + Ext.getCmp('TerminalType').getValue() + "</TerminalType>" + //设备类型 "<EquipmentCode>" + Ext.getCmp('SearchEquipmentCode').getValue() + "</EquipmentCode>" + //设备序列号 "<EquipmentName>" + Ext.getCmp('SearchEquipmentName').getValue() + "</EquipmentName>"; //设备名称; params = { xmlParams: baseParams };monExportExcel("/PluginsFor2/ProcessWeb/Page/ExportExcel/ExportExcel.aspx", params, "HC.ModelPluginsHandler.dll", "HY.HttpHandlers.PortLedgerInfoHandler", "ExportInfoByGridInfo", exportFields);ExportWindow.close();}}text: '取消',handler: function () {ExportWindow.close();}}]})ExportWindow.show();}//⿏标悬浮窗PortLedgerGrid.on('render', function (grid) {var view = Ext.getCmp('PortLedgerGrid').getView();Ext.getCmp('PortLedgerGrid').tooltip = new Ext.ToolTip({target: view.mainBody,delegate: '.x-grid3-cell',trackMouse: true,dismissDelay: 20000,renderTo: document.body,listeners: {beforeshow: function updateTipBody(tip) {var rowIndex = view.findRowIndex(tip.triggerElement);var columnIndex = view.findCellIndex(tip.triggerElement);var fieldName = Ext.getCmp('PortLedgerGrid').getColumnModel().getDataIndex(columnIndex); //获得列名(字段名) var text = "";text = Ext.getCmp('PortLedgerGrid').store.getAt(rowIndex).get(fieldName);if (text != null && text != "" && text != "-")tip.body.dom.innerHTML = text;elsereturn false;}}})});//新增、修改function GridUpdate(type, title) {var selectedRows = Ext.getCmp('PortLedgerGrid').getSelectionModel().getSelections();if(selectedRows!=''){var TerminalTypes= selectedRows[0].data.TerminalType;}else{var TerminalTypes = '';}var GridUpdatePanel = new Ext.form.FormPanel({border: false,frame: true,layout: 'form',autoWidth: true,border: false,width: 900,border: false,labelWidth: 70,items: [{layout: 'column',items: [{layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '端⼝号',emptyText: '端⼝号',id: 'PortNumber',name: 'PortNumber',width: 200}]}, {layout: 'form',labelWidth: 80,xtype: 'textfield',fieldLabel: '端⼝办公室',emptyText: '端⼝办公室',id: 'PortOffice',name: 'PortOffice',width: 200}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '终端端⼝号',emptyText: '终端端⼝号',id: 'TPNumber',name: 'TPNumber',width: 200}]}, { layout: 'column',items: [{layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '终端MAC地址', emptyText: '终端MAC地址', id: 'TMacAddress',name: 'TMacAddress',width: 200}]}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: 'VLAN',emptyText: 'VLAN', //型号id: 'VLAN',name: 'VLAN',width: 200}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'combo',fieldLabel: '终端类型',store: DevicecomboStore, typeAhead: false,editable: false,mode: 'local',width: 200,triggerAction: 'all',id: 'Equipment_TypeId',displayField: 'Res_Name', valueField: 'Res_Id',value:TerminalTypes}]}, { layout: 'column',items: [{labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '终端位置',emptyText: '终端位置',id: 'TerminalAddress',name: 'TerminalAddress',width: 200}]}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '机柜号',emptyText: '机柜号',id: 'CabinetNumber',name: 'CabinetNumber',width: 200}]}, {layout: 'form',labelWidth: 80,width: 260,items: [{xtype: 'textfield',fieldLabel: '设备SAP编号',emptyText: '设备SAP编号',id: 'SAPCode',name: 'SAPCode',width: 175}]}, {layout: 'form',width: 40,items: [{xtype: 'button',text: '...',id: 'show',name: 'show',width: 25,//disabled: true,handler: function () { //弹出设备⼦页var EquipmentSAPCodeWin = null;if (!!EquipmentSAPCodeWin) {EquipmentSAPCodeWin.destroy();}EquipmentSAPCodeWin = new HC.EquipmentSAPCode({checkModel: true,UserId: "", //使⽤⼈IDStatus: 'ffe4914c2c0942beab9250ece3950909' //使⽤状态：3申领及借⽤，4查询全部，其他类别，传递对应资源类型code});EquipmentSAPCodeWin.open();EquipmentSAPCodeWin.on('selectcomplete', function (record) {if (record == '' || record == null) {Ext.Msg.alert('提⽰', '请选择⼀条信息!');return false;}var EquipmentTypeName = record[0].data.EquipmentTypeName; //设备类型var EquipmentCode = record[0].data.EquipmentCode; //设备序列号Ext.getCmp("Model").setValue(record[0].data.Model); //设备型号Ext.getCmp("Brand").setValue(record[0].data.Brand); //设备品牌Ext.getCmp("Address").setValue(record[0].data.Address); //设备位置xExt.getCmp("SAPCode").setValue(record[0].data.SAPCode); //设备SAPExt.getCmp("EquipmentNamere").setValue(record[0].data.EquipmentName); //设备名称 Ext.getCmp("SwitchNumber").setValue(record[0].data.SwitchNumber);//交换机序号Ext.getCmp("SwitchIP").setValue(record[0].data.SwitchIP); //交换机Ip地址EquipmentSAPCodeWin.closeWin();});}}]}, {layout: 'column',items: [{layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '交换机IP地址',emptyText: '交换机IP地址',id: 'SwitchIP',name: 'SwitchIP',width: 200}]}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '交换机序号',emptyText: '交换机序号',id: 'SwitchNumber',name: 'SwitchNumber',width: 200}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '品牌',emptyText: '品牌',id: 'Brand',name: 'Brand',width: 200}]}, {layout: 'column',items: [{layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '型号',emptyText: '型号',id: 'Model',name: 'Model',width: 200}]}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '设备位置',emptyText: '设备位置',id: 'Address',name: 'Address',width: 200}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '设备名称',emptyText: '设备名称',name: 'EquipmentName',id: 'EquipmentNamere',width: 200}]}, {layout: 'column',items: [{layout: 'form',labelWidth: 80,width: 900,items: [{xtype: 'textarea',fieldLabel: '备注',emptyText: '备注',id: 'Remark',name: 'Remark',width: 800,height: 170}]}]}]}]});var GridUpdateWindow = new Ext.Window({title: title,width: 1000,modal: true,resizable: false,items: [GridUpdatePanel],buttonAlign: 'center',buttons: [{width: 100,text: '确认',handler: function () {if (type == "Add") {var PID = "";//同步var PortNumber = Ext.getCmp("PortNumber").getValue();var conn = Ext.lib.Ajax.getConnectionObject().conn;conn.open("POST", '/PortLedgerInfoHandler/SelectRepeat.ashx?PortNumber=' + PortNumber, false); conn.send(null);obj = conn.responseText == '' ? {} : Ext.decode(conn.responseText);if (obj.success == "false") {Ext.Msg.alert('提⽰', '端⼝号唯⼀！');return;}} else if (type == "Update") {var record = Ext.getCmp('PortLedgerGrid').getSelectionModel().getSelections();if (record.length == "0") {Ext.Msg.alert('提⽰', ' 请选择⼀条信息！');} else {PID = record[0].data.ID;}}var EquipmentCode = EquipmentCode;var PortNumber = Ext.getCmp("PortNumber").getValue();var TPNumber = Ext.getCmp("TPNumber").getValue();var TMacAddress = Ext.getCmp("TMacAddress").getValue();var PortOffice = Ext.getCmp("PortOffice").getValue();var VLAN = Ext.getCmp("VLAN").getValue();var TerminalAddress = Ext.getCmp("TerminalAddress").getValue(); var CabinetNumber = Ext.getCmp("CabinetNumber").getValue();var SwitchNumber = Ext.getCmp("SwitchNumber").getValue();var SwitchIP = Ext.getCmp("SwitchIP").getValue();var TerminalType = Ext.getCmp("Equipment_TypeId").getValue(); var SAPCode = Ext.getCmp("SAPCode").getValue();var Brand = Ext.getCmp("Brand").getValue();var Model = Ext.getCmp("Model").getValue();var Address = Ext.getCmp("Address").getValue();var EquipmentName = Ext.getCmp("EquipmentNamere").getValue(); var Remark = Ext.getCmp("Remark").getValue();if (PortNumber == "") {Ext.MessageBox.alert('提⽰', '端⼝号不能为空!');return false;}if (TPNumber == "") {Ext.MessageBox.alert('提⽰', '终端端⼝号不能为空!');return false;}if (TMacAddress == "") {Ext.MessageBox.alert('提⽰', 'MAC地址不能为空!');return false;}if (VLAN == "") {Ext.MessageBox.alert('提⽰', 'VLAN不能为空!');return false;}if (TerminalAddress == "") {Ext.MessageBox.alert('提⽰', '终端位置不能为空!');return false;}if (CabinetNumber == "") {Ext.MessageBox.alert('提⽰', '机柜号不能为空!');return false;}if (SwitchNumber == "") {Ext.MessageBox.alert('提⽰', '交换机序号不能为空!');return false;}if (TerminalType == "") {Ext.MessageBox.alert('提⽰', '类型不能为空!');return false;}if (SwitchIP == "") {Ext.MessageBox.alert('提⽰', '交换机IP地址不能为空!');return false;}if (Remark == "") {Ext.MessageBox.alert('提⽰', '备注必填!');return false;}Ext.Msg.confirm('提⽰', '确认保存？', function (btn) {if (btn == 'yes') {Ext.Ajax.request({url: '/PortLedgerInfoHandler/InsertUpdate.ashx',method: 'POST',params: {PID: PID,VLAN: VLAN,Brand: Brand,Model: Model,。
Extjs中Store的全部操作因为上次用过Ext.data.Store，觉得挺重要的，故转载了一篇/davidxj/archive/2009/04/23/4103647.aspx Ext.data.Store的基本用法在使用之前，首先要创建一个Ext.data.Store的实例，如下面的代码所示。
1.var data = [2. ['boy', 0],3. ['girl', 1]4.];5.6.var store = new Ext.data.Store({7. proxy: new Ext.data.MemoryProxy(data),8. reader: new Ext.data.ArrayReader({}, PersonRecord)9.});10.11.store.load();Ext.data.Store对数据进行排序Ext.data.Store提供了一系列属性和函数，利用它们对数据进行排序操作。
可以在创建Ext.data.Store时使用sortInfo参数指定排序的字段和排序方式，如下面的代码所示。
1.var store = new Ext.data.Store({2. proxy: new Ext.data.MemoryProxy(data),3. reader: new Ext.data.ArrayReader({}, PersonRecord),4. sortInfo: {field: 'name', direction: 'DESC'}5.});最直接的方法是根据record在store中的行号获得对应的record，得到了record就可以使用get()函数获得里面的数据了，如下面的代码所示。
1.store.getAt(0).get('name')1.for (var i = 0; i < store.getCount(); i++) {2.var record = store.getAt(i);3. alert(record.get('name'));4.}1.store.each(function(record) {2. alert(record.get('name'));3.});1.var records = store.getRange(0, 1);2.3.for (var i = 0; i < records.length; i++) {4.var record = records[i];5. alert(record.get('name'));6.}1.store.getById(1001).get('name')1.find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch],[Boolean caseSensitive] )第五个参数caseSensitive为true时，会区分大小写。
/lovehuahui/article/details/5091047xtJs中常用到的增，删，改，查操作分类：extJs 2009-12-28 14:36 1252人阅读评论(3) 收藏举报刚刚参加完公司的项目，第一次使用extjs编写用户界面还是有点头痛，现在小花整理好了，希望为初学者做个参考。
[java]view plaincopy1.<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>2.3.<html>4. <head>5. <title>extJs中常用到的增删改查操作的示例代码</title>6. <!-- CommonJs.jsp 为 ExtJS 引入的路径 -->7. <%@ include file="../extJs/CommonJs.jsp"%>8. <mce:script type="text/javascript"><!--9. /**10. * 作者：花慧11. * 时间： 2009年12月22日12. * 内容： extJs中常用到的增，删，改，查操作13. */14.15. //设置每页显示的行数默认为1016.17. var QUERY_PAGE_SIZE = 10;18.19. /**20. * SearchQueryForm():绘制查询表单21. */22. function searchQueryForm()23. {24. //form 使用的时候建议设为局部变量，可以通过Ext.getCmp(“”)去获取form25.26. var queryForm = null;27. queryForm = new Ext.FormPanel({28. id:'queryForm', //指定queryForm的Id29. renderTo:'searchPanel', //指向form所在的div层30. labelWidth:70, //label标签的width占页面的百分比31. region:'north',32. border:false, //以显示面板的body元素的边界，虚假隐藏起来（默认为true）33. badyBorder:false, //显示面板的body元素，假以隐藏它（默认为true的内部边界）34. labelAlign:'right', //label标签的对齐方式35. frame:true, //自定义面板的圆形边界，边界宽度1px。
1、引入ExtJs框架文件（存入Global.js文件中）document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"../extjs/resources/css/ext-all.css\"/> "); document.write("<script type=\"text/javascript\" src=\"../extjs/adapter/ext/ext-base.js\"></script>");document.write("<script type=\"text/javascript\" src=\"../extjs/ext-all.js\"></script>");document.write("<script type=\"text/javascript\" src=\"../extjs/ext-lang-zh_CN.js\"></script>");2、引入Global.js文件<script type="text/javascript" src="Global.js"></script><style type="text/css"> .icon {background:url(../images/1.gif) 0 5px no-repeat !important }</style>3、效果图===================================================================================================================== 4、JS源代码;var _store=newurl:"../ServerFile/ListMoney.asp", root:"record",fields:[{name:"id",type:"int"},"type",{name:"money",type:"int"}], autoLoad:true});var _editType=new store:new data:[["支出"],["收入"]], fields:["type"] }),displayField:"type", valueField:"type", hiddenName:"type", triggerAction:"all", editable:false, mode:"local" });var _editMoney=new minValue:1, maxValue:2000, allowBlank:false });var _column=newnew ,width:25}),new "序号",width:30,sortable:true}),{header:"类型",dataIndex:"type",editor:_editType},{header:"金额",dataIndex:"money",editor:_editMoney}]);/**************************************************************************/MoneyGridPanel=Ext.extend(,{//----0typeCombo:null,conn:new , //更新信息连接对象1conn2:new , //插入信息连接对象2inserted:[], iconCls:"icon",constructor:function(){//----1this.typeCombo=newstore:new data:[["支出"],["收入"],["全部"]], fields:["type"] }),width:80, triggerAction:"all", displayField:"type", mode:"local", value:"全部", editable:false,listeners:{"select":{fn:this.onViewTypeSelect,scope:this //将当前对象作为事件的参数及作用域}}});,{//----2title:"个人理财情况一览表", cm:_column, store:_store, width:400, h eight:240, collapsible:true,titleCollapse:true, renderTo:Ext.getBody(), frame:true,sm:new ,viewConfig:{forceFit:true},tbar:[{ text:"远程保存/更新", handler:this.onButtonClick,scope:this //作用域及对象作为参数传入相应的方法中且scope不能省略},"-",{text:"删除记录",handler:this.onRemoveButtonClick,scope:this},"-","查看方式:", this.typeCombo,"->",{text:"添加新记录",handler:this.onInsertButtonClick,scope:this //作用域不能丢失}],loadMask:true //显示加裁提示框//或:loadMask:{msg:"正在读取信息..."}});//----2},//----1onViewTypeSelect:function(_combo){//当前对象作为参数传入//alert(typeof _combo); //alert(_combo.getValue()); //alert(this.store);if(_combo.getValue()!="全部"){"type",_combo.getValue());}else{this.getStore().clearFilter();}},onCommitChanges:function(){this.getStore().commitChanges();},onrejectChanges:function(){;},onRemoveButtonClick:function(){var _sm=this.getSelectionModel();try{if(_sm.getCount()>0){"确认删除","要删除该条记录吗?",this.onRemoveRecord,this);}else{throw Error("尚未选定一条记录");}}catch(_err){"系统提示",_err.description);}},onRemoveRecord:function(btnId){ //alert(btnId); //alert(this.constructor);if(btnId=="yes"){var _sm=this.getSelectionModel(); var _record=_sm.getSelected();//alert(_record.get("id"));//删除侦听事件"requestcomplete",this.onSaveInsertData,this);if(_record.get("id")!=""){//删除服务器端的记录集url:"../ServerFile/DeleteMoney.asp", params:{id:_record.get("id")},success:function(_response){this.getStore().remove(_record); "系统提示","删除成功");},failure:function(_response){ "系统提示","删除失败"); },scope:this //作用域不能丢失});}else{//清除未提交到服务器端的记录集 //alert(;this.getStore().remove(_record);//从当前数据记录集中清除选中的记录; //从临时记录集中清除新添加而没有提交到服务器端记录this.getStore().modified.remove(_record); //清除更改后而没有提交到服务器端记录}}},onButtonClick:function(btnId){//modified:一个包含键和值的对象数组，它存储了所有被修改过的字段的原来的值，如果没有字段被修改，则为null var _modiRecord=this.getStore().modified; //alert(_modiRecord.length);if(_modiRecord.length>0){var _temp; var temp=[]; var temp2=[]for(var i=0;i<_modiRecord.length;i++){if(_modiRecord[i].get("id")==""){ continue; }var _data={}; var _j="";for(_j in _modiRecord[i].modified){ //将更改过的字段加入_data对象中_data[_j]=_modiRecord[i].get(_j);}_temp=Ext.apply(_data,{id:_modiRecord[i].get("id")}); //将更改的信息ID附加到存储更改对象上temp.push(_temp);//将对象存入临时数组中} //alert("temp:"+Ext.encode(temp));if(temp.length>0){url:"../ServerFile/UpdateMoney.asp",success:function(_conn,_response){this.onCommitChanges(); "系统提示","批处理更新成功"); temp=[];},failure:function(_conn,_response){//this.onrejectChanges();"系统提示","批处理更新失败");},scope:this, //作用域不能丢失//encode(Mixed o):格式化成JSON字符串//decode(String json):JSON字符串转变为JSON对象params:{content:});}for(var _i=0;_i<;_i++){ //alert(Ext.encode(this.inserted[_i]));temp2.push(this.inserted[_i].data);} //alert(Ext.encode(temp2));if(temp2.length>0){//添加侦听事件"requestcomplete",this.onSaveInsertData,this);url:"../ServerFile/InsertMoney.asp",success:function(_conn,_response){this.onCommitChanges();temp2=[];"系统提示","批处理添加成功");},failure:function(_conn,_response){ //this.onrejectChanges();"系统提示","批处理添加失败");},scope:this, //作用域不能丢失//encode(Mixed o):格式化成JSON字符串，decode(String json):JSON字符串转变为JSON对象params:{content:});}}this.onViewTypeSelect(this.typeCombo);//getModifiedRecords():获得最后一次提交之后被外部修改过的Record数组//或是用modified属性代替getModifiedRecords()方法/*var _mr=;//alert(_mr.length);var temp=[]; var _temp;for(var i=0;i<_mr.length;i++){ //temp.push(_mr[i].data); //显示被修改的记录信息(包含未被修改的内容) //Ext.apply:将记录信息id附加到修改后,保存原始值的记录集上//_mr[i].modified:存储被修改前的记录信息(不包含未被修改的内容)_temp=Ext.apply(_mr[i].modified,{id:_mr[i].get("id")});temp.push(_temp);}alert(Ext.encode(temp));*/},onInsertButtonClick:function(){var _r=new id:"", type:"", money:0 });//终止所有当前正在进行的编辑this.stopEditing(); this.getStore().add(_r);_r.set("type","支出"); //重新分配值可以显示更新提示图标_r.set("money",1);; //将新添加的对象数据存入到临时数组中 //alert(Ext.encode(this.inserted[0].data));//开始编辑指定的row/columnthis.startEditing(,0);},onSaveInsertData:function(_conn,_response){var temp=[]; var obj=Ext.decode(_response.responseText); //[object Object]temp=eval(obj.arrayId);for(var i=0;i<temp.length;i++){if(temp[i]!="")this.inserted[i].set("id",temp[i]); //alert(Ext.encode(this.inserted[i].data));}this.inserted=[];}});//----05、HTML源代码<script type="text/javascript">Ext.onReady(function(){//---->开始var mg=new MoneyGridPanel();//---->结束});</script>。
// JScript 文件var customerTypestore;var customerManage=function(node){var ftable='GPS_customer';var customerRightClick=new Ext.menu.Menu();var powerfields = ["fbh","fcheck","ftype"];var powerstore = new Ext.data.Store({// autoLoad:true,proxy:new Ext.data.HttpProxy({url:"DATA/table_power/getpower.aspx",method:"POST"}),reader:new Ext.data.JsonReader({fields:powerfields,root:"data",id:"fbh",totalProperty:"totalCount"}),listeners:{'load':function( store, records, options ){if(powerstore.getTotalCount()==3){if(powerstore.getAt(0).data.fcheck == '1'){var menuItem1 = new Ext.menu.Item({text: '添加',iconCls:'addicon',handler:function(){AddcustomerFn(custtree);}});customerRightClick.add(menuItem1);}if(powerstore.getAt(1).data.fcheck == '1'){var menuItem2 = new Ext.menu.Item({text:'删除',iconCls:'deleteicon',handler:function(){DeletecustomerFn(custtree);}});customerRightClick.add(menuItem2);}if(powerstore.getAt(2).data.fcheck == '1'){var menuItem3 = new Ext.menu.Item({text:'编辑',iconCls:'editicon',handler:function(){EditcustomerFn(custtree);}});customerRightClick.add(menuItem3);}}var menuItem4 = new Ext.menu.Item({text:'查看',iconCls:'lookicon',handler:function(){lookcustomerFn();}});customerRightClick.add(menuItem4);}}});powerstore.load({params:{ftable:ftable}});// var pageSize = 16;//指定列参数var customerfields = ["fcustomerid","fcustomer","fgroup","ftype","faddr","flevel","farea","fcaddr","fpostcode","ftel"," ffax","femail","furl","fparent","fchild","fdrelation","frival","fuserid","fuser","flinkmanid","flinkma n","fceoid","fceo","fbankacc","fbank","fbeizhu"];customerstore = new Ext.data.Store({// autoLoad:true,proxy:new Ext.data.HttpProxy({url:"DATA/customer/customer.aspx",method:"POST"}),reader:new Ext.data.JsonReader({fields:customerfields,root:"data",id:"fcustomerid",totalProperty:"totalCount"})});customerstore.load({params:{start:0,limit:pageSize}});function SerachOpenRoomRecord(){var fziduans = Ext.get('customerziduan').dom.value;var ffhs = Ext.get('customerfh').dom.value;var message = Ext.get('customermessage').dom.value;var check = Ext.get('customercbx').dom.checked;// if(fziduans == '请选择查询' || message == '输入查询值')// {// return;// }customerstore.reload({params:{start:0,limit:pageSize,fziduan:fziduans,ffh:ffhs,msg:message,check:check}});}var findtypefileds = Ext.data.Record.create([{name: 'fziduan',mapping:'fziduan'},{name: 'fname',mapping:'fname'},{name:'ftype',mapping:'ftype'}]);var findstore = new Ext.data.Store({proxy: new Ext.data.HttpProxy({url:'DATA/find.aspx?ftable=GPS_customer',method:"POST"}),reader: new Ext.data.JsonReader({root: 'data',id: 'fziduan'},findtypefileds)});findstore.load();var listfileds=Ext.data.Record.create([// {name:'fid',mapping:'fid'},{name:'flist',mapping:'flist'}]);var liststore=new Ext.data.Store({proxy:new Ext.data.HttpProxy({url:'DATA/fdatavallist.aspx?ftable=GPS_customer&flist=',//+flist,method:"POST"}),reader:new Ext.data.JsonReader({root:'data',id:'flist'},listfileds)});// liststore.load();var customersm = new Ext.grid.CheckboxSelectionModel({dataIndex:"fcustomerid"});var customercm = new Ext.grid.ColumnModel([customersm,{header:"客户代码",tooltip:"客户代码",dataIndex:"fcustomerid",sortable:true,locked:true},{header:"客户名称",tooltip:"客户名称",dataIndex:"fcustomer",sortable:true,locked:true},{header:"客户分类",tooltip:"客户分类",dataIndex:"fgroup",sortable:true},{header:"客户属性",tooltip:"客户属性",dataIndex:"ftype",sortable:true},{header:"客户地址",tooltip:"客户地址",dataIndex:"faddr",sortable:true},{header:"客户级别",tooltip:"客户级别",dataIndex:"flevel",sortable:true},{header:"所属区域",tooltip:"所属区域",dataIndex:"farea",sortable:true},{header:"通讯地址",tooltip:"通讯地址",dataIndex:"fcaddr",sortable:true},{header:"邮编",tooltip:"邮编",dataIndex:"fpostcode",sortable:true},{header:"电话",tooltip:"电话",dataIndex:"ftel",sortable:true},{header:"传真",tooltip:"传真",dataIndex:"ffax",sortable:true},{header:"E-mail",tooltip:"E-mail",dataIndex:"femail",sortable:true},{header:"网址",tooltip:"网址",dataIndex:"furl",sortable:true},{header:"上级机构代码",tooltip:"上级机构代码",dataIndex:"fparent",sortable:true},{header:"分支机构数目",tooltip:"分支机构数目",dataIndex:"fchild",sortable:true},{header:"关系建立时间",tooltip:"关系建立时间",dataIndex:"fdrelation",sortable:true,format: 'Y-m-d',xtype: 'datefield'},{header:"使用对手产品情况",tooltip:"使用对手产品情况",dataIndex:"frival",sortable:true},// {header:"客户经理ID",tooltip:"客户经理ID",dataIndex:"fuserid",sortable:true}, {header:"客户经理",tooltip:"客户经理",dataIndex:"fuser",sortable:true},// {header:"联系人ID",tooltip:"联系人ID",dataIndex:"flinkmanid",sortable:true},// {header:"联系人",tooltip:"联系人",dataIndex:"flinkman",sortable:true},// {header:"决策人ID",tooltip:"决策人ID",dataIndex:"fceoid",sortable:true},// {header:"决策人",tooltip:"决策人",dataIndex:"fceo",sortable:true},{header:"银行帐号",tooltip:"银行帐号",dataIndex:"fbankacc",sortable:true},{header:"开户银行",tooltip:"开户银行",dataIndex:"fbank",sortable:true},{header:"备注",tooltip:"备注",dataIndex:"fbeizhu",sortable:true} // {// header:"部门ID",// dataIndex:"fcustomerid",// tooltip:"部门ID",// //列不可操作// //menuDisabled:true,// //可以进行排序// sortable:true// }]);// var customerRightClick=new Ext.menu.Menu// ({// items:// [{// text: '添加',// iconCls:'addicon',// handler:function(){// AddcustomerFn(custtree);}// },{// text:'编辑',// iconCls:'editicon',// handler:function(){EditcustomerFn(custtree);} // },{// text:'删除',// iconCls:'deleteicon',// handler:function(){DeletecustomerFn(custtree);} // }]// });// var bb = new Ext.Toolbar.Button({// text:'查询',// pressed:true,// tooltip:"查询结果",// iconCls:'serchopenroomrecord',// handler:SerachOpenRoomRecord// });// var tt = new boBox({//// id:"fziduans",// name:"customerziduans",// xtype:"combo",// tpl: '<tpl for="."><div ext:qtip="{fziduan}. {fname}" class="x-combo-list-item">{fname}</div></tpl>',//选择记录时的备注//// fieldLabel:"客人性别",// //传入后台真实值value field /value// hiddenName:"customerziduan",// width:100,// typeAhead: true,// readOnly:true,// mode:"remote",// displayField:"fname",// valueField:"fziduan",// triggerAction:"all",// emptyText:'请选择查询',//// value:"客户代码",// store:findstore// ,listeners:{// 'select':function(combo, record, index) {// liststore.proxy= new Ext.data.HttpProxy({method:"POST",url: 'DATA/fdatavallist.aspx?ftable=GPS_customer&flist=' + combo.getValue()});// liststore.load();// }}// });// var tbbar = new Ext.Toolbar({// text:'查询',// pressed:true,// tooltip:"查询结果",// iconCls:'serchopenroomrecord',// handler:SerachOpenRoomRecord// });var customergrid = new Ext.grid.GridPanel({id:"customerGrid",// autoHeight: true,// title: 'center-north',region: 'center',//renderTo: 'ugrid',store:customerstore,sm:customersm,cm:customercm,loadMask:true,//自适应宽度参数为列数autoExpandColumn:6,//超过长度带自动滚动条autoScroll:true,border:false,viewConfig:{columnsText:"显示/隐藏列",sortAscText:"正序排列",sortDescText:"倒序排列"},//分页bbar:new Ext.PagingToolbar({store:customerstore,pageSize:pageSize,//显示右下角信息displayInfo:true,displayMsg:'当前记录{0} -- {1} 条共{2} 条记录',emptyMsg:"No results to display",prevText:"上一页",nextText:"下一页",refreshText:"刷新",lastText:"最后页",firstText:"第一页",beforePageText:"当前页",afterPageText:"共{0}页"}),tbar:['','','<b>搜索:</b> ', ' ',{// id:"fziduans",name:"customerziduans",xtype:"combo",tpl: '<tpl for="."><div ext:qtip="{fziduan}. {fname}" class="x-combo-list-item">{fname}</div></tpl>',//选择记录时的备注// fieldLabel:"客人性别",//传入后台真实值value field /valuehiddenName:"customerziduan",width:100,typeAhead: true,readOnly:true,mode:"remote",displayField:"fname",valueField:"fziduan",triggerAction:"all",emptyText:'请选择查询',// value:"客户代码",store:findstore,listeners:{'select':function(combo, record, index) {liststore.proxy= new Ext.data.HttpProxy({method:"POST",url: 'DATA/fdatavallist.aspx?ftable=GPS_customer&flist=' + combo.getValue()});liststore.load();}}},{// id:"ffhs",name:"customerfhs",xtype:"combo",hiddenName:"customerfh",readOnly:true,width:50,mode:"local",displayField:"value",valueField:"value",triggerAction:"all",value:"=",store:new Ext.data.SimpleStore({fields:["value"],data:[["="],[">"],[">="],["<"],["<="],["<>"],["like"],["not like"]]})},{// xtype:'textfield',width:120,// id:'message',name:'customermessage',emptyText:"输入查询值",xtype:"combo",// tpl: '<tpl for="."><div ext:qtip="{fziduan}. {fname}" class="x-combo-list-item">{fname}</div></tpl>',//选择记录时的备注// fieldLabel:"客人性别",//传入后台真实值value field /valuetypeAhead: true,readOnly:false,mode:"remote",displayField:"flist",valueField:"flist",triggerAction:"all",store:liststore},'','-','',{text:'查询',pressed:true,tooltip:"查询结果",iconCls:'serchopenroomrecord',handler:SerachOpenRoomRecord},'-',{xtype:'checkbox',checked: false,fieldLabel: '',labelSeparator: '',boxLabel: '结果中查询',name: 'customercbx'},'-',new Ext.Toolbar.Fill(),{text:'修改归属经理',iconCls:'editicon1',handler:function(){rencustomerFn(custtree);} },{text:'查看',iconCls:'lookicon',handler:function(){lookcustomerFn();}},"-"],listeners:{'contextmenu':function(e){e.stopEvent();},// 'render':function(component)// {// customergrid.tbar.add(bb);// },'rowcontextmenu':function(grid,rowIndex,e){e.stopEvent();customerRightClick.showAt(e.getXY());}}});// grid endvar custroot = new Ext.tree.AsyncTreeNode({text : '根客户',expanded : true,//设置根节点默认是展开的id : '0'});var custtree = new Ext.tree.TreePanel({id: 'custtree',title: '客户资料',region:'west',split: true,autoheight: true,// minSize: 150,width: 200,minSize: 175,maxSize: 400,autoScroll: true,collapsible: true,enableDD:true,// tree-specific configs:rootVisible: true,lines: true,// singleExpand: true,useArrows: true,// loader: new Ext.tree.TreeLoader({// dataUrl:'tree-data.json'// }),loader: new Ext.tree.TreeLoader({// id:'0',dataUrl:'DATA/customer/custTree.aspx',listeners:{"beforeload":function(Treeloader,node1){Treeloader.baseParams={id:node1.id,method:'POST'};}}}),root: custroot //new Ext.tree.AsyncTreeNode(),tbar : [// {// text : '取得被选节点',// handler : function(){// var sm = custtree.getSelectionModel();//取得树的选择模式对象// var node1 = sm.getSelectedNode();//取得当前选中的节点// alert('节点ID：' + node1.id);// }// },// {// text : '根客户',// handler : function(){// var sm = custtree.getSelectionModel();//取得树的选择模式对象// var node1 = sm.getSelectedNode();//取得当前选中的节点// var loader = custtree.getLoader();//取得树加载器// loader.load(custroot,function(){// custroot.expand();//重新加载后展开根节点// });//重新加载根节点//// custtree.expandPath(custtree.getPath(node1.id));// }// },'-',{xtype:'textfield',width:130,name:'treefilter',emptyText:"过滤节点",listeners:{render: function(f){f.el.on('keydown', filterTree, f, {buffer: 350});}}}// ,{//// text:'过滤',// pressed:true,// tooltip:"过滤结果",// iconCls:'filter',// handler:function(){// custtree.expandAll();// var text = Ext.get('treefilter').dom.value;// if(text=="" || text=="过滤节点")// {// filter.clear();// }// else// {// filterTree(text);// }}// },{iconCls: 'icon-expand-all',tooltip: '全部展开',handler: function(){ custtree.root.expand(true); } },{iconCls: 'icon-collapse-all',tooltip: '全部收起',handler: function(){ custtree.root.collapse(true); } }]});var hiddenPkgs = [];function filterTree(e) {custtree.expandAll();var text = e.target.value;Ext.each(hiddenPkgs, function(n) {n.ui.show();});if (!text) {filter.clear();return;}// custtree.expandAll();var re = new RegExp(Ext.escapeRe(text), 'i');filter.filterBy(function(n) {// var textval = n.text;return !n.isLeaf() || re.test(n.text);});// hide empty packages that weren't filteredhiddenPkgs = [];custtree.root.cascade(function(n) {// var ret=false;if (n.id!='0' && !n.isLeaf() && n.ui.ctNode.offsetHeight < 3) {n.ui.hide();hiddenPkgs.push(n);if(!n.isLeaf() && n.ui.ctNode.offsetHeight >= 3){}else{if(!n.isLeaf() && re.test(n.text)){n.ui.show();hiddenPkgs.pop(n);}}}// if(n.isLeaf())// {return false;}// else// {return true;}custtree.root.cascade(function(n) {if (!n.isLeaf() && n.ui.ctNode.offsetHeight < 3) {n.ui.hide();hiddenPkgs.push(n);if(n.id!='0' && !n.isLeaf() && n.ui.ctNode.offsetHeight >= 3){}else{if(!n.isLeaf() && re.test(n.text)){n.ui.show();hiddenPkgs.pop(n);}}}});});}var filter = new Ext.tree.TreeFilter(custtree, {clearBlank: true,autoClear: true});// Assign the changeLayout function to be called on tree node click.custtree.on('click', function(node1,event){//叶子节点点击不进入链接if (node1.isLeaf()) {// 显示叶子节点菜单event.stopEvent();customerstore.reload({params:{start:0,limit:pageSize,msg:"fparent = " + node1.id + " OR fcustomerid = " + node1.id}});} else {//不是叶子节点不触发事件event.stopEvent();//点击时展开node1.toggle();customerstore.reload({params:{start:0,limit:pageSize,msg:"fparent = " + node1.id + " OR fcustomerid = " + node1.id}});}});// 拖拽判断custtree.on("nodedragover", function(e){var n = e.target;if (n.leaf) {n.leaf = false;}return true;});custtree.on("nodedrop", function(e){// Ext.Msg.alert('提示', '咱们的节点' + e.dropNode.id + '掉到了' + e.target.id + '上，掉落方式是' + e.point);var flag="";if(e.point=="append"){flag="插入到子节点!"}else if(e.point=="above"||e.point=="below"){flag="插入到同级节点!"}var msgs="[" + e.dropNode.text + "]移动到了["+ e.target.text + "]上，移动方式是:[" + flag + "]";Ext.Msg.confirm("提示!","您把" + msgs + "，需要把移动保存到数据库吗?",function(btn){if(btn=="yes"){Ext.Ajax.request({url:'URL/customer/customerDDtree.aspx',method:'POST',params:{dropNode: e.dropNode.id,target: e.target.id,point: e.point,msg:msgs},success: function(response){// Ext.Msg.alert('提示', "节点'" + e.dropNode.text + "'移动到了'"+ e.target.text + '"上，移动方式是:' + flag);// Ext.Msg.alert('信息', response.responseText);},failure: function(){Ext.Msg.alert("错误", "与后台联系的时候出现了问题");}});}else{}})});var custtreeForm = new Ext.FormPanel({id: 'custtreeForm',// frame: true,bodyStyle:'padding:5px',autoWidth:true,aotoHeight:true,collapsible: true,border:false,layout: 'border',// defaults:{anchor:"95%"},items: [custtree,customergrid// ,{// columnWidth: 0.4,// layout:'form',// autoWidth:true,// height:445,//// bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;', // border: true,// style: {// "margin-left": "10px",// "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0" // },// items: [ftotalinfo,ftotalcontrol]// }]//renderTo:Ext.getBody()});// GridMain(node,customergrid,"roomtypeicon");GridMain(node,custtreeForm,"roomtypeicon");}var DeletecustomerFn=function(custtree){//得行单个record对象//var row=Ext.getCmp("customerGrid").getSelectionModel().getSelected();//得到多个record对象var row=Ext.getCmp("customerGrid").getSelectionModel().getSelections();if(row.length==0){Ext.Msg.alert("提示信息","请您至少选择一个!");}else if(row.length>1){Ext.Msg.alert("提示信息","对不起每次只能删除一个客户资料!");}else if(row[0].get("fchild") > 0){Ext.Msg.alert("提示信息","请先删除此客户下的所有子客户!");}else{if(row[0].get("fcustomerid") == ""){Ext.Msg.alert("提示信息","表中没有发现记录!");return;}Ext.Msg.confirm("提示!","您确定要删除吗?",function(btn){if(btn=="yes"){Deletecustomer(row,custtree);}else{}})}};//-----------------------------------------------------修改选中行var EditcustomerFn=function(custtree){var row=Ext.getCmp("customerGrid").getSelectionModel().getSelections();if(row.length==0){Ext.Msg.alert("提示信息","您没有选中任何行!");}else if(row.length>1){Ext.Msg.alert("提示信息","对不起只能选择一个!");}else if(row.length==1){if(row[0].get("fcustomerid") == ""){Ext.Msg.alert("提示信息","表中没有发现记录!");return;}// //调用修改房间类型函数// //EditcustomerInfo(row[0].data.typeid);//传入ID查数据库EditcustomerInfo(row[0],custtree);//传行一行记录直接加载customerstore.reload();}};var rencustomerFn=function(custtree){var row=Ext.getCmp("customerGrid").getSelectionModel().getSelections();if(row.length==0){Ext.Msg.alert("提示信息","您没有选中任何行!");}else if(row.length>1){Ext.Msg.alert("提示信息","对不起只能选择一个!");}else if(row.length==1){if(row[0].get("fcustomerid") == ""){Ext.Msg.alert("提示信息","表中没有发现记录!");return;}// //调用修改房间类型函数// //EditcustomerInfo(row[0].data.typeid);//传入ID查数据库RencustomerInfo(row[0],custtree);//传行一行记录直接加载customerstore.reload();}};var lookcustomerFn=function(){var row=Ext.getCmp("customerGrid").getSelectionModel().getSelections();if(row.length==0){Ext.Msg.alert("提示信息","您没有选中任何行!");}else if(row.length>1){Ext.Msg.alert("提示信息","对不起只能选择一个!");}else if(row.length==1){if(row[0].get("fcustomerid") == ""){Ext.Msg.alert("提示信息","表中没有发现记录!");return;}// //调用修改房间类型函数// //lookcustomerInfo(row[0].data.typeid);//传入ID查数据库lookcustomerInfo(row[0]);//传行一行记录直接加载// customerstore.reload();}};//------------------------------------------------------增加var AddcustomerFn=function(custtree){AddcustomerInfo(custtree);}var AddcustomerInfo=function(nodetree){var nodeidvar sm = nodetree.getSelectionModel();//取得树的选择模式对象var node1 = sm.getSelectedNode();//取得当前选中的节点if(node1 == null){nodeid = '0';}else{nodeid = node1.id;}var loader = nodetree.getLoader();//取得树加载器var noderoot = nodetree.getRootNode();var AddcustomerForm=new Ext.form.FormPanel({labelAlign: 'right',labelWidth: 80,frame:true,width: 650,// autowidth:true,autoheight:true,bodyStyle:"padding:0 0 0 0",buttonAlign:"center",// plain:true,items: [{layout:'column',items: [{columnWidth:.5,defaults:{anchor:"96%",msgTarget:"side"},layout: 'form',defaultType: 'textfield',items:[{fieldLabel:"客户名称",blankText:"客户名称",name:"fcustomer", allowBlank:true,regex:/^[\s\S]{1,50}$/,regexText:"描述请不要超过50个字符"},GetList('fgroup','客户分类','fkhgroup'),GetList('ftype','客户属性','fkhtype'),GetList('flevel','客户级别','fkhlevel'),GetList('farea','所属区域','fkharea'),// {fieldLabel:"客户分类",blankText:"客户分类",name:"fgroup",// allowBlank:true,regex:/^[\s\S]{1,50}$/,regexText:"描述请不要超过50个字符"}, // {fieldLabel:"客户属性",blankText:"客户属性",name:"ftype",// allowBlank:true,regex:/^[\s\S]{1,30}$/,regexText:"描述请不要超过30个字符"}, {fieldLabel:"客户地址",blankText:"客户地址",name:"faddr",allowBlank:true,regex:/^[\s\S]{1,60}$/,regexText:"描述请不要超过60个字符"}, // {fieldLabel:"客户级别",blankText:"客户级别",name:"flevel",// allowBlank:true,regex:/^[\s\S]{1,20}$/,regexText:"描述请不要超过20个字符"}, // {fieldLabel:"所属区域",blankText:"所属区域",name:"farea",// allowBlank:true,regex:/^[\s\S]{1,50}$/,regexText:"描述请不要超过50个字符"}, {fieldLabel:"通讯地址",blankText:"通讯地址",name:"fcaddr",allowBlank:true,regex:/^[\s\S]{1,60}$/,regexText:"描述请不要超过60个字符"},{fieldLabel:"邮编",blankText:"邮编",name:"fpostcode",allowBlank:true,regex:/^[\s\S]{1,20}$/,regexText:"描述请不要超过20个字符"},{fieldLabel:"E-mail",blankText:"E-mail",name:"femail",allowBlank:true,regex:/^[\s\S]{1,50}$/,regexText:"描述请不要超过50个字符"} ]},{columnWidth:.5,defaults:{anchor:"96%",msgTarget:"side"},layout: 'form',defaultType: 'textfield',items:[{fieldLabel:"网址",blankText:"网址",name:"furl",allowBlank:true,regex:/^[\s\S]{1,100}$/,regexText:"描述请不要超过100个字符"},{fieldLabel:"电话",blankText:"电话",name:"ftel",allowBlank:true,regex:/^[\s\S]{1,20}$/,regexText:"描述请不要超过20个字符"},{fieldLabel:"传真",blankText:"传真",name:"ffax",allowBlank:true,regex:/^[\s\S]{1,20}$/,regexText:"描述请不要超过20个字符"},{fieldLabel:"上级机构代码",blankText:"上级机构代码",name:"fparent",readOnly:true,value:nodeid,allowBlank:true,regex:/^[0-9]{1,10}$/,regexText:"1-10位数"},{fieldLabel:"关系建立时间",blankText:"关系建立时间",name:"fdrelation",allowBlank:true,format: 'Y-m-d',xtype: 'datefield'},{fieldLabel:"使用对手产品",blankText:"使用对手产品情况",name:"frival",allowBlank:true,regex:/^[\s\S]{1,100}$/,regexText:"描述请不要超过100个字符"}, // GetDataList('fuserid','客户经理ID','fcode','fuser','GPS_user',true,''),// GetDataList('flinkmanid','联系人ID','fbh','fname','GPS_linkman',true,''),// GetDataList('fceoid','决策人ID','fbh','fname','GPS_linkman',true,''),// {fieldLabel:"客户经理ID",blankText:"客户经理ID",name:"fuserid",// allowBlank:true,regex:/^[0-9]{1,10}$/,regexText:"1-10位数"},// {fieldLabel:"联系人ID",blankText:"联系人ID",name:"flinkmanid",// allowBlank:true,regex:/^[0-9]{1,10}$/,regexText:"1-10位数"},// {fieldLabel:"决策人ID",blankText:"决策人ID",name:"fceoid",// allowBlank:true,regex:/^[0-9]{1,10}$/,regexText:"1-10位数"},{fieldLabel:"银行帐号",blankText:"银行帐号",name:"fbankacc",allowBlank:true,regex:/^[\s\S]{1,30}$/,regexText:"描述请不要超过30个字符"},{fieldLabel:"开户银行",blankText:"开户银行",name:"fbank",allowBlank:true,regex:/^[\s\S]{1,50}$/,regexText:"描述请不要超过50个字符"},{fieldLabel:"备注",blankText:"备注",name:"fbeizhu",allowBlank:true,regex:/^[\s\S]{1,100}$/,regexText:"描述请不要超过100个字符"},{fieldLabel:"分支机构数目",blankText:"分支机构数目",name:"fchild",hidden:true,hideParent:true,hideLabel:true,allowBlank:true,regex:/^[0-9]{1,10}$/,regexText:"1-10位数"},{fieldLabel:"经理ID",blankText:"经理。
