V80204 – loadMask - 顯示等待訊息 - Ajas.async必需為 true

 目的: V80204 – WBS報工工時 – 按[顯示資料]後, 去後端處理, 要顯示等待訊息

處理說明:  1> Ext.Ajax  的處理模式 :   必需  async: true,  - loadMask

                         // 1>> 異步模式  : false,    即會等後端執行完成,才會往下,所以不會顯示等待訊息
                                                                       async: false ,      

                 // 2>> 異步模式  : true,   即會不用等後端執行完成,前端仍會往下, 所以會顯示等待訊息
                                                                       async: true ,    (defaule)  

1>V80201.js

var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: '資料處理中,請稍候...',
});

//顯示訊息
myMask.show();

//隱藏訊息
Ext.getCmp('sub_Grid').store.on("load", function (me, records, successful, eOpts) {
        if (successful) {

            console.log("successful");
            console.log("Ext.getCmp('sub_Grid').store.data", Ext.getCmp('sub_Grid').store.data);
            win1.show();
            //若已載入完成,則            
            myMask.hide();
        }
    }
    );

V80201- 請稍候訊息 - 1>Label方式 2>LoadMask方式

目的:  V80201- 顯示 請稍候訊息

處理說明: 1>畫面上,以 label 顯示訊息 - 請稍候  - label.setVisible(true)  ;
                  2>載入完成時, label.setVisible(false)  ;
                  3>Ext.Ajax 的  async 必需為 true, 異步式處理, 即去後端處理時,前端仍需繼續處理
                       ,如此前端才會顯示等待訊息

一.以 Label 方式處理

1>*.js
  //資料處理中..,請稍候
                {
                    xtype: 'label',
                    id: 'waitlbl1',
                    text: '.',
                    hidden: false,
                }, // end of 請稍候
                {
                    xtype: 'label',
                    id: 'waitlbl',
                    text: '資料處理中,請稍候...',
                    hidden: true,
                    style: {color: 'blue',}
                }, // end of 請稍候

{

            xtype: 'button', text: '確定', id: 'sub_ShowPN_OkBtn',

            listeners: {

                click: function () {

                    //mysuccessalert("mysub2_確定 ");

                    Ext.getCmp("waitlbl").setVisible(true);

                    //Ext.getCmp("waitlbl").setX(100);                                        

                    //myMask.show();                    

                    ShowPNGridDetail(par_PN, par_ECNO, par_CNDPROCCODE, par_ASN);

                }

            }

        },        

Ext.getCmp('sub_Grid').store.on("load", function (me, records, successful, eOpts) {        

        if (successful) {

            console.log("successful");

            console.log("Ext.getCmp('sub_Grid').store.data", Ext.getCmp('sub_Grid').store.data);

            win1.show();

            //若已載入完成,則            

            Ext.getCmp('waitlbl').setVisible(false);            

            //myMask.unmask();                    

            //myMask.hide();                                

        }

    }

二.以 LoadMask方式處理

目的:  V80201- 顯示 請稍候訊息  - 以 LoadMask 方式

處理說明: 1>畫面上,以 LoadMask 顯示訊息 - 請稍候  - Ext.getCmp("myMask").show();

                  2>載入完成時, - Ext.getCmp("myMask").hide();

1>*.js
var myMask = new Ext.LoadMask(Ext.getBody(), {
     msg: '資料處理中,請稍候...',
     id: 'myMask',

});

//顯示訊息
Ext.getCmp("myMask").show();

//隱藏訊息
Ext.getCmp('sub_Grid').store.on("load", function (me, records, successful, eOpts) {
        if (successful) {

            console.log("successful");
            console.log("Ext.getCmp('sub_Grid').store.data", Ext.getCmp('sub_Grid').store.data);
            win1.show();
            //若已載入完成,則            
            Ext.getCmp("myMask").hide();
        }
    }
    );