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

  

==================================系列文章==========================================

本篇文章：7.7  ExtJS 4.2 業務開發(三)資料添加和修改

Web開發之路系列文章

 

ExtJS 4.2 業務開發(三)資料添加和修改