首页 > 代码库 > 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 模块案例(增删改查)