ExtJS 4.2 业务开发(三)数据添加和修改

接上面的船舶管理业务，这里介绍添加和修改操作。

目录

1. 添加操作

2. 修改操作

3. 在线演示

1. 添加操作

1.1 创建AddShipWindow.js

在业务中的view目录下创建一个AddShipWindow.js文件，表示一个增加船舶的窗口组件。

此文件中包含了一个form组件用于显示所要添加的字段：船舶名称、状态、吨数和核载人数。

具体代码如下：

Ext.define('App.ShipMgr.view.AddShipWindow', {
    extend: 'Ext.window.Window',
    layout: 'fit',
    constrain: true, // 是否只能在父容器的范围内拖动
    modal: true, // 是否有遮挡层
    width: 340,
    requires: ['App.ShipMgr.model.ShipModel'],
    initComponent: function () {
        var me = this;
        var _oprType = me.oprType || 'add'; // 类型；eg：add(添加)、edit(修改)
        var _shipId = me.shipId; // 船舶Id
        var _url = me.url; // 各操作的url，如：add、edit的url
        var _successCallback = me.successCallback || ''; // 成功执行的回调

        // 【form】
        var shipForm = Ext.create('Ext.form.Panel', {
            defaultType: 'hiddenfield',
            width: '100%',
            bodyPadding: 5,
            autoScroll: true,
            url: _url,
            fieldDefaults: {
                labelAlign: 'right',
                labelWidth: 75,
                width: 275
            },
            items: [
                Ext.create('Ext.form.field.Text', {
                    fieldLabel: '船舶名称',
                    name: 'ShipName',
                    maxLength: 50,
                    allowBlank: false,
                    afterLabelTextTpl: '<span style="position: absolute;margin-left: 210px;color: red;line-height: 2;" >*<span>'
                }),
                Ext.create('Ext.form.field.ComboBox', {
                    fieldLabel: '状态',
                    name: 'State',
                    emptyText: '请选择船舶状态',
                    editable: false,
                    allowBlank: false,
                    valueField: 'State',
                    displayField: 'StateName',
                    queryMode: 'remote',
                    triggerAction: 'all',
                    afterLabelTextTpl: '<span style="position: absolute;margin-left: 210px;color: red;line-height: 2;" >*<span>',
                    store: Ext.create('Ext.data.Store', {
                        fields: ['State', 'StateName'],
                        data : [
                            { 'State': 'online', 'StateName': '在线' },
                            { 'State': 'offline', 'StateName': '离线' },
                        ]
                    })
                }),
                Ext.create('Ext.form.field.Number', {
                    fieldLabel: '吨位',
                    name: 'Tonnage',
                    allowBlank: false,
                    maxValue: 10000,
                    minValue:1,
                    decimalPrecision: 1,
                    afterLabelTextTpl: '<span style="position: absolute;margin-left: 210px;color: red;line-height: 2;" >*<span>'
                }),
                Ext.create('Ext.form.field.Number', {
                    fieldLabel: '核载人数',
                    name: 'LoadNumber',
                    allowBlank: false,
                    maxValue: 10000,
                    minValue: 1,
                    decimalPrecision: 1,
                    afterLabelTextTpl: '<span style="position: absolute;margin-left: 210px;color: red;line-height: 2;" >*<span>'
                }),
                { name: 'ShipId', value: _shipId },
            ],
            buttons: [
            {
                text: '提交',
                name: 'SubmitBtn',
                handler: function () {
                    if (!shipForm.getForm().isValid()) { return; }
                    me.setLoading(true);
                    shipForm.getForm().submit(
                        {
                            clientValidation: true,
                            submitEmptyText: false,
                            success: function (thisControl, action) {
                                var rs = Ext.JSON.decode(action.response.responseText);
                                me.setLoading(false);
                                me.close();
                                if (_successCallback) { // 回调
                                    _successCallback();
                                }
                            },
                            failure: function (thisControl, action) {
                                var rs = Ext.JSON.decode(action.response.responseText);
                                if (rs.msg) {
                                    Ext.Msg.alert('系统提示', rs.msg);
                                } else {
                                    Ext.Msg.alert('系统提示', '操作失败！');
                                }
                                me.setLoading(false);
                            }
                        }
                    );
                }
            }, {
                text: '取消',
                name: 'CancelBtn',
                handler: function () {
                    me.close();
                }
            }]
        });

        // 填充窗口
        Ext.applyIf(me, {
            items: [shipForm]
        });

        me.callParent(arguments);
    }
});

1.2 入口设置

在上一篇的grid工具栏中加入【添加】按钮：

Ext.create('Ext.Action', {
    icon: 'Resources/icon/add.png',
    text: '添加',
    name: 'AddBtn',
    handler: function (thisControl, event) {
        var winConfig = {
            title: '添加船舶',
            oprType: 'add',
            url: 'Business/ShipMgr/Add',
            successCallback: function () {
                shipMgrStore.loadPage(1); // 添加成功后刷新Store
            }
        };
        var win = Ext.create('App.ShipMgr.view.AddShipWindow', winConfig);
        Ext.getCmp('app_tabContainer').activeTab.add(win);
        win.show();
    }
})

1.3 运行图

2. 修改操作

2.1 修改窗口

船舶业务的修改窗口可以跟添加窗口公用一个，需要在弹出窗口时判断为添加操作还是别的操作。

若非添加操作，如：查看、修改时，加载本次请求的船舶信息并填充到具体的form表单里。

在AddShipWindow.js文件里添加如下代码：

// 渲染结束后
me.on('afterrender', function () {
    // 1.非添加操作，查询具体的船舶
    if (_oprType != 'add') {
        me.setLoading(true);
        Ext.Ajax.request({
            method: 'POST',
            type: 'ajax',
            url: 'Business/ShipMgr/QueryById',
            params: {
                shipId: _shipId
            },
            success: function (response) {
                var rs = Ext.JSON.decode(response.responseText);
                if (rs.success == false) { //操作失败
                    Ext.Msg.alert('系统提示', rs.msg);
                }
                else {
                    var en = Ext.create('App.ShipMgr.model.ShipModel', rs.data);
                     // 填充数据
                     shipForm.loadRecord(en);
                }
                me.setLoading(false);
            },
            failure: function (response, opts) {
                me.setLoading(false);
                Ext.Msg.alert('系统提示', '操作失败');
            }
        });
    }
});

　　

2.2 入口设置

【修改】按钮比较特殊，在默认情况是隐藏状态，只有选中了grid组件中的一条记录才显示出来。

2.2.1 创建按钮

在上一篇的grid工具栏中加入【修改】按钮：

Ext.create('Ext.Action', {
    icon: 'Resources/icon/edit.png',
    text: '修改',
    name: 'EditBtn',
    hidden:true,
    handler: function (thisControl, event) {
        var winConfig = {
            title: '修改船舶',
            oprType: 'edit',
            url: 'Business/ShipMgr/Update',
            shipId:selectData.ShipId,
            successCallback: function () {
                shipMgrStore.reload(); // 修改成功后刷新Store
            }
        };
        var win = Ext.create('App.ShipMgr.view.AddShipWindow', winConfig);
        Ext.getCmp('app_tabContainer').activeTab.add(win);
        win.show();
    }
})

2.2.2 隐藏按钮

每次shipMgrStore发起请求时都要隐藏【修改】按钮：

var shipMgrStore = Ext.create('Ext.data.Store', {
    // ...
    listeners: {
        beforeload: function (thisStore, record, opts) {
            thisStore.proxy.extraParams = searchConditionObj; // 附加检索条件
            shipMgrToolBarPanel.down('[name=EditBtn]').hide(); // 隐藏【修改】按钮
        }
    }
});

2.2.3 显示按钮

选中shipMgrGrid的某条数据时显示按钮：

var shipMgrGrid = Ext.create('Ext.grid.Panel', {
    // ...
    listeners: {
        cellclick: function (thisGridView, td, cellIndex, record, tr, rowIndex, e, eOpts) {
            selectData = record.data; // 获取选中的数据
            shipMgrToolBarPanel.down('[name=EditBtn]').show(); // 显示【修改】按钮
        }
    }
});

2.3 运行图

3. 在线演示

在线演示：http://www.akmsg.com/ExtJS/index.html#App.ShipMgr.ShipMgrTab

End

Web开发之路系列文章

菜单加载中...