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

目录

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 >*<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 >*<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 >*<span>'        }),        Ext.create('Ext.form.field.Number', {          fieldLabel: '核载人数',          name: 'LoadNumber',          allowBlank: false,          maxValue: 10000,          minValue: 1,          decimalPrecision: 1,          afterLabelTextTpl: '<span >*<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);  }});

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

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

关键词：JS