接上面的船舶管理業務，這裡介紹添加和修改操作。 目錄 1. 添加操作 2. 修改操作 3. 線上演示 1. 添加操作 1.1 創建AddShipWindow.js 在業務中的view目錄下創建一個AddShipWindow.js文件，表示一個增加船舶的視窗組件。 此文件中包含了一個form組件用於顯 ...
接上面的船舶管理業務，這裡介紹添加和修改操作。
目錄
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 業務開發(三)數據添加和修改
