首页 > 代码库 > ExtJS 模块案例（增删改查）
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(), //设备名称
start: 0,
limit: 20
})
});
//端口台账的Grid
var 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="http://www.mamicode.com/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 () {
//导入Excel
var ImportExcel = null;
if (!!ImportExcel) {
ImportExcel.destroy();
}
ImportExcel = new HC.ImportExcel({ importUrl: "/PortLedgerInfoHandler/ReadExcel.ashx", title: ‘导入‘ });
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();
if (record.length == "0") {
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
}]
});
var ExportWindow = new Ext.Window({
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) {
SwitchNumber = records[i].data.SwitchNumber;
}
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 };
Ext.util.CommonExportExcel("/PluginsFor2/ProcessWeb/Page/ExportExcel/ExportExcel.aspx", params, "HC.CommonPluginsHandler.dll", "HY.HttpHandlers.CommonHandler", "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 };
Ext.util.CommonExportExcel("/PluginsFor2/ProcessWeb/Page/ExportExcel/ExportExcel.aspx", params, "HC.ModelPluginsHandler.dll", "HY.HttpHandlers.PortLedgerInfoHandler", "ExportInfoByGridInfo", exportFields);
ExportWindow.close();
}
}
}, {
width: 100,
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;
else
return 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,
width: 300,
items: [{
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: [{
layout: ‘form‘,
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: "", //使用人ID
Status: ‘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); //设备位置x
Ext.getCmp("SAPCode").setValue(record[0].data.SAPCode); //设备SAP
Ext.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,
Address: Address,
PortOffice: PortOffice,
TPNumber: TPNumber,
Remark: Remark,
SwitchIP: SwitchIP,
EquipmentCode: ‘11‘,
PortNumber: PortNumber,
TMacAddress: TMacAddress,
TerminalAddress: TerminalAddress,
CabinetNumber: CabinetNumber,
SwitchNumber: SwitchNumber,
TerminalType: TerminalType,
SAPCode: SAPCode,
EquipmentName: EquipmentName
},
success: function (response) {
var data = http://www.mamicode.com/Ext.decode(response.responseText);
var result = data.result;
Ext.Msg.alert("提示", result);
PortLedgerGrid.getStore().load({ params: { start: 0, limit: 20, TerminalType: ‘‘} });
GridUpdateWindow.close();
}
});
}
});
}
}, {
width: 100,
text: ‘取消‘,
handler: function () {
GridUpdateWindow.close();
}
}],
listeners: { ‘beforeshow‘: function () {
if (type == "Update") {
var record = Ext.getCmp(‘PortLedgerGrid‘).getSelectionModel().getSelections();
var SAPCode = record[0].data.SAPCode;
if (SAPCode == ‘‘) {//若设备SAP为空，仅端口号不可编辑
Ext.getCmp("PortNumber").getEl().dom.disabled = true;
Ext.getCmp("SAPCode").getEl().dom.disabled = true;
Ext.getCmp("Brand").getEl().dom.disabled = true;
Ext.getCmp("Model").getEl().dom.disabled = true;
Ext.getCmp("Address").getEl().dom.disabled = true;
Ext.getCmp("SwitchNumber").getEl().dom.disabled = true;
Ext.getCmp("SwitchIP").getEl().dom.disabled = true;
Ext.getCmp("EquipmentNamere").getEl().dom.disabled = true;
} else { //SAP不为空，仅备注可编辑
Ext.getCmp("show").disable(); //禁用按钮
Ext.getCmp("Equipment_TypeId").disabled = true; //禁用下拉框
Ext.getCmp("PortNumber").getEl().dom.disabled = true;
Ext.getCmp("TPNumber").getEl().dom.disabled = true;
Ext.getCmp("TMacAddress").getEl().dom.disabled = true;
Ext.getCmp("PortOffice").getEl().dom.disabled = true;
Ext.getCmp("VLAN").getEl().dom.disabled = true;
Ext.getCmp("TerminalAddress").getEl().dom.disabled = true;
Ext.getCmp("CabinetNumber").getEl().dom.disabled = true;
Ext.getCmp("SwitchNumber").getEl().dom.disabled = true;
Ext.getCmp("SwitchIP").getEl().dom.disabled = true;
Ext.getCmp("SAPCode").getEl().dom.disabled = true;
Ext.getCmp("Brand").getEl().dom.disabled = true;
Ext.getCmp("Model").getEl().dom.disabled = true;
Ext.getCmp("Address").getEl().dom.disabled = true;
Ext.getCmp("SwitchNumber").getEl().dom.disabled = true;
Ext.getCmp("SwitchIP").getEl().dom.disabled = true;
Ext.getCmp("EquipmentNamere").getEl().dom.disabled = true;
}
GridUpdatePanel.form.loadRecord(selectedRows[0]);//赋值
} else if (type == "Add") {
Ext.getCmp("SAPCode").getEl().dom.disabled = true;
Ext.getCmp("Brand").getEl().dom.disabled = true;
Ext.getCmp("Model").getEl().dom.disabled = true;
Ext.getCmp("Address").getEl().dom.disabled = true;
Ext.getCmp("EquipmentNamere").getEl().dom.disabled = true;
Ext.getCmp("SwitchNumber").getEl().dom.disabled = true;
Ext.getCmp("SwitchIP").getEl().dom.disabled = true;
}
}
}
})
GridUpdateWindow.show();
}
//布局
new Ext.Viewport({
layout: ‘border‘,
items: [
{
region: ‘north‘,
height: 60,
items: formPanel
}, {
region: ‘center‘,
layout: ‘fit‘,
items: PortLedgerGrid
}]
});
})
ExtJS 模块案例（增删改查）