1. 程式人生 > >ExtJS 4.2 業務開發(三)資料新增和修改

ExtJS 4.2 業務開發(三)資料新增和修改

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);
    }
});

相關推薦

ExtJS 4.2 業務開發()資料新增修改

Ext.define('App.ShipMgr.view.AddShipWindow', { extend: 'Ext.window.Window', layout: 'fit', constrain: true, // 是否只能在父容器的範圍內拖動 modal:

ExtJS 4.2 業務開發(二)資料展示查詢

本篇開始模擬一個船舶管理系統,提供查詢、新增、修改船舶的功能,這裡介紹其中的資料展示和查詢功能。 目錄 1. 資料展示 2. 資料查詢 3. 線上演示 1. 資料展示 在這裡我們將模擬一個船舶管理系統,並提供查詢、新增、修改的功能。 大致的目錄結構如下: ShipMgrTab.js :

ExtJS 4.2 業務開發(一)主頁搭建

Ext.application({ name: 'AKApp', launch: function () { // 設定Viewport Ext.create('Ext.container.Viewport', { name

ExtJS 4.2 Date元件擴充套件:新增清除按鈕

/*! * 在原有的Date元件上新增【清除】按鈕 */ Ext.define('Js.ux.DatePicker', { override: 'Ext.picker.Date', renderTpl: [ '<div id="{id}-innerEl"

《OpenCV3程式設計入門》——4.2 OpenCV中常用資料結構函式(Point、Scalar、Size、Rect、cvtColor)

目錄 1、點的表示:Point類 2、顏色的表示:Scalar類 3、尺寸的表示:Size類 4、矩形的表示:Rect類 5、顏色空間轉換:cvtColor()函式 1、點的表示:Point類 Point類資料結構表示了二維座標系下的點,即由影象座標x和y指定的2D點

解決elementUI表單資料新增修改資料混亂

需求是:初期化一個table列表,可以對table列表資料進行新增和修改,點選新增和修改時彈出窗體,窗體繫結的資料是form裡的Model,開始的時候點選新增是可以的,後臺獲取前臺的資料是沒有id主鍵的,但是當點選修改的時候,因為把主鍵id賦值給了form表單,導致點選新增後

extjs 4.2 自定義主題,官方原文翻譯

網上文章都不詳細,自己看官方原文,成功自定義extjs 4.2和extjs 6.2兩個版本。本文是4.2 環境&工具 win7 已經配置了java環境(文中要求配置jre,) 官方原文 Ruby下載 我用的是2.4.4(看它長的特殊) sench

4章:基本結構基本資料型別/4.2 Go 程式的基本結構要素/4.2.5 可見性

易學筆記 十年IT經驗個人學習筆記分享: 開發語言:C/C++/JAVA/PYTHON/GO/JSP WEB架構:Servlets/springMVC/springBoot/springClound 容器架構:Docker容器/Docker叢集/Docker與微服務整合/

4章:基本結構基本資料型別/4.2 Go 程式的基本結構要素/4.2.4 import:匯入包

易學筆記 十年IT經驗個人學習筆記分享: 開發語言:C/C++/JAVA/PYTHON/GO/JSP WEB架構:Servlets/springMVC/springBoot/springClound 容器架構:Docker容器/Docker叢集/Docker與微服務整合/

4章:基本結構基本資料型別/4.2 Go 程式的基本結構要素/4.2.6 函式

易學筆記 十年IT經驗個人學習筆記分享: 開發語言:C/C++/JAVA/PYTHON/GO/JSP WEB架構:Servlets/springMVC/springBoot/springClound 容器架構:Docker容器/Docker叢集/Docker與微服務整合/

微服務業務開發個難題-拆分、事務、查詢(下)

  轉載自賀卓凡 上集我們闡述了使用微服務體系架構的關鍵障礙是領域模型,事務和查詢,這三個障礙似乎和功能拆分具有天然的對抗。只要功能拆分了,就涉及這三個難題。 然後我們向你展示了一種解決方案就是將每個服務的業務邏輯實現為一組DDD聚合。然後每個事務只能更新或建立一個單獨的聚合。

微服務業務開發個難題-拆分、事務、查詢(上)

  轉載自賀卓凡 微服務架構變得越來越流行了。它是模組化的一種方法。它把一整塊應用拆分成一個個服務。它讓團隊在開發大型複雜的應用時更快地交付出高質量的軟體。團隊成員們可以輕鬆地接受到新技術,因為他們可以使用最新且推薦的技術棧來實現各自的服務。微服務架構也通過讓每個服務都被部署在最佳

ExtJS 4.2 Grid元件的單元格合併

ExtJS 4.2 Grid元件本身並沒有提供單元格合併功能,需要自己實現這個功能。  目錄 1. 原理 2. 多列合併 1. 原理 1.1 HTML程式碼分析 首先建立一個Grid元件,然後檢視下的HTML原始碼。 1.1.1 Grid元件 1.1.2 HTML程式碼 從這

ExtJS 4.2 元件的查詢方式

元件建立了,就有方法找到這些元件。在DOM、Jquery都有各自的方法查詢元素/元件,ExtJS也有自己獨特的方式查詢元件、元素。本次從全域性查詢、容器內查詢、form表單查詢、通用元件等4個方面介紹元件的查詢方式。 目錄 2. 容器內查詢 1. 全域性查詢方式 全域性查詢方式指在整個

ExtJS 4.2 評分元件

/*! * 評分元件 */ Ext.define('App.Demo.RatingStarFiledDemoTab', { extend: 'Ext.panel.Panel', layout: 'fit', closable: true, reload: fu

ExtJS 4.2 元件介紹

目錄 1. 介紹   1.1 說明   1.2 元件分類   1.3 元件名稱   1.4 元件結構 1. 介紹 1.1 說明 ExtJS的強大功能之一是提供了非常豐富的元件,包括grid(表格)、panel(面板)、form(表單)、button(按鈕)、progressBa

ExtJS 4.2 第一個程式

本篇介紹如何建立一個ExtJS應用程式。並通過建立目錄、匯入檔案、編寫程式碼及分析程式碼等步驟來解釋第一個ExtJS程式。 目錄 1. 建立程式   1.2 實際目錄   1.4 執行圖 2. 程式碼分析 1. 建立程式 1.1 建立目錄建議 根據官方建議,建立一個ExtJ

extjs 6.2 熟悉開發環境 hello world

1.下載extjs 6.2 並解壓。 2.釋出extjs專案。 將ext-6.2.0資料夾拷貝到tomcate的webapp目錄下啟動tomcate,或者拷貝到IIS釋出。 3.本地編寫hello

(轉)OpenCV3.4.2+VS2017開發環境配置

由於版本提高,在原文的基礎上有適當修改,但總體都是原博主的。本文是隻配置了一個專案,要想永久配置請參考 拜小白教你OpenCV3.4.2+VS2017開發環境配置 本機環境:win10 64位  OpenCV3.4.2  Visual Studio 2017  最

小程式開發技巧()-- 雲開發時效資料重新整理儲存 (access_token等)

### 小程式雲開發時效資料重新整理和儲存 (access_token等) #### 1.問題描述 小程式中經常有需要進行OCR識別,或者使用外部api例如百度AI識別等介面,請求呼叫這些介面需要令牌,即一些具有時效性的資料。本文以小程式雲開發使用百度API介面為例,介紹access_token定時重新整