2020年9月30日 星期三

for extjs 4 & 6 , 去背的window

 一如文件「Extjs4 ,如何偵測是否點在pop up window 的外面

一樣,可以考慮在window的mask再加工

如果是全域設定,就直接改 .x-mask css就可以了

但是如果是各別的window (彈吧七彩霓虹window )

就要在show / close事件中加減cls了

----css --------------------------

.seemsNoWinMask.x-mask {

            filter: alpha(opacity=0);

            opacity: .0;

            background:white !important; 

    }

-----ext js 4------------------------------------

let win = Ext.create('Ext.window.Window', {

                    listeners: {

                        show: function (win) {

                            if (this.modal) {

                                var dom = Ext.dom.Query.select('.x-mask');

                                var el = Ext.get(dom[0]);

                                el.addCls('seemsNoWinMask');

                            }

                        },

                        close: function (win) {

                            if (this.modal) {

                                var dom = Ext.dom.Query.select('.x-mask');

                                var el = Ext.get(dom[0]);

                                el.removeCls('seemsNoWinMask');

                            }

                        }

                    },

......

....

-----------------------------------------------------

extjs 6.2 

--------------------------------------------

listeners: {

                show: function (win) {

                    if (this.modal) {

                        var dom = Ext.dom.Query.select('.x-mask');

                        for (var i = 0; i < dom.length; i++) {

                            Ext.get(dom[i]).addCls('seemsNoWinMask');

                        }

                    }


                },

                close: function (win) {

                    if (me.modal) {


                        var dom = Ext.dom.Query.select('.x-mask');

                        for (var i = 0; i < dom.length; i++) {

                            Ext.get(dom[i]).removeCls('seemsNoWinMask');

                        }

                    }

                    

                }

}

...

...

--------------------------------------

以上

(2020了,我還在寫extjs .....)

2020年9月26日 星期六

for extjs 6.2 :如何做個去邊的textfield ?

 之所以會想用這個去邊的textfield,

是因為在某次實作時,要實作一個很類似chrome的search textfield,又內含清空及搜尋的buttons

但又不想繼承field類別(好啦,我承認懶得試這方式),所以要用組裝的方式來做這東西

要把border去除一下,

(以下是extjs 6.2 )

----先準備一個css----------------------

.x-form-textfield-noborder .x-form-trigger-wrap-default {

    border-width: 0px;

    border-style: solid;

    border-color: #d0d0d0;

}

------------------------------------------

那麼,那個要套用css的texfield就是會像以下的例子

......................................

        //...外面包他的container

 {

                            xtype: 'container',

                            width: 170,

                            height: 25,

                            margin: '20 0 0 10',

                            //textfield去邊,要用外層的container做框來包textfield & buttons.

                            style: {

                                borderColor: 'lightgray',

                                borderStyle: 'solid',

                                borderWidth: '1px'

                            },

                            layout: {

                                align: 'stretch',

                                type: 'hbox'

                            },

                            items: [

            //-------------------重點來了---------------------------

           {

                            margin: '20 0 0 20',

                            xtype: 'textfield',

                            cls: 'x-form-textfield-noborder',


             },  //之下,是兩個button

                         {

                                    xtype: 'button',

                                    style: {

                                        background: 'white',

                                        borderRadius: '0px',

                                        borderStyle: 'solid',

                                        marginRight: '3px',

                                        marginTop: '1px',

                                        marginBottom: '1px',

                                        borderColor: '#d0d0d0;',

                                        borderWidth: '0px'


                                    },

                                    height: 16,

                                    width: 16,

                                    icon: './images/icon2del.gif'

                                },

                                {

                                    xtype: 'button',

                                    style: {

                                        background: 'white',

                                        borderRadius: '0px',

                                        borderStyle: 'solid',

                                        marginLeft: '3px',

                                        marginTop: '1px',

                                        marginBottom: '1px',

                                        borderColor: '#d0d0d0;',

                                        borderWidth: '0px'

                                    },

                                    height: 18,

                                    minWidth:20,

                                    icon:'./images/search18x18.png'

                                }

                     ]

            } 

--------------------------------

當然,如果這個欄位只是display only的話,那就用displayfield

尤其是在layout type是table的情況之下,xtype:'label'通常怎麼喬margin & padding都沒用的情況之下

那就用displayfield或是這個去框的textfield吧

參考:

https://blog.csdn.net/onightfalls/article/details/78601091

https://stackoverflow.com/questions/29987504/extjs-displayfield-with-same-style-as-textfield


以上

2020年9月6日 星期日

for ReactJs : axios回傳的response值是 「undefined」!?

 實驗預期對的東西,是必須的,

然而,實驗"錯誤狀況"有無落實,更是一個系統良窳之所在

一般在react js用到axios都是用 promise的寫法:

 axios.get(url,body,header.....).then(response=>......).catch(error=>);

但是如果上述的url錯誤,或是權限問題,造成錯誤

執行上述的結果通常是「response is undefined」,更別就在then(....)裡做resp.data.....解析

就這樣丟出一個 「undefined」錯誤,誰看得懂啊

如何是好?

 如果,不要用要axios預設的包裝機制--我們把http狀態解釋權拿回來,會不會好一點?

是的,axios也有想到這點,所以有了這個設定參數「validateStatus:false」

奪回解釋權,axios負責傳送接收,接下來就是我們事了

-------以下雖然是用saga,但基本工作原理是一樣的------

--以udemy 課程「React-The complete Guide」 sample code : buger app為例-----

export function* doFetchOrderProcessBySaga(action) {

  yield put(actions.doBeginFetchOrders());

  /*

  const authState = yield select((state) => state.auth);

  const token = authState.token;

  const userId = authState.userId;

  */

  //let's finish above 3 command in one line

  const { token, userId } = yield select((state) => state.auth);

  const queryParam =

    "?auth=" + token + '&orderBy="userId"&equalTo="' + userId + '"';

  try {

    const resp = yield axios.get("/orders.json" + queryParam, {

      validateStatus: false

    });

    //if hoc/withErrorHandler instead of "withErrorHandler_class"

    //please DO NOT return by 「yield put(actions.fetchOrdersSeccess([]));」,or users can not see the error message &  Modal

    //(don't ask me  why)

    // if (!resp || resp === undefined) {

    //   yield put(actions.fetchOrdersFailed("return undefined.please check URL"));

    //   return;

    // }

    if (resp.status !== 200) {

      yield put(

        actions.fetchOrdersFailed(

          "ERROR:" + resp.status + " " + resp.statusText

        )

      );

      return;

    }


    let orderTmp = [];

    for (let key in resp.data) {

      orderTmp.push({

        ...resp.data[key],

        id: key

      });

    }


    yield put(actions.fetchOrdersSeccess(orderTmp));

  } catch (err) {

    yield put(actions.fetchOrdersFailed(err.message));

  }

}

-------------------------------------------

驗證:


切到"orders"單元,在orders.js初次render時下載訂單資訊為例.

如果是正常的話,是如以下畫面

現在,到firebase realtime database  ,去修改api權限一下

(改完了別忘了「發布」才會生效)
之後,我們在react js app 切到別單元再進到Orders這裡,出現了權限問題
(應該的,不出現error才該打屁股了)

這樣,是不是明確多了?

參考連結:
https://stackoverflow.com/questions/54185997/how-to-get-axios-error-response-into-the-redux-saga-catch-method?rq=1

https://stackoverflow.com/questions/48298890/axios-how-to-get-error-response-even-when-api-return-404-error-in-try-catch-fi

https://github.com/redux-saga/redux-saga/issues/1730

http://codestudyblog.com/questions/sf/0421204826.html

以上,大家加油了