2022年8月11日 星期四

V120402 - 子視窗,自動填滿畫面的設定 - 版面

 目的: 子視窗, 自動填滿畫面的設定 

處理說明 : 1>parent.panel  :  layout : border
                       items.panel:   region:   1) north/south , 只可設定 Height
                                                            2) east/west, 只可設定 width

PS: north和south部分只能設置高度(height)
   west和east部分只能設置寬度(width)
   center區域必須有,且它的大小是在其他4個部分設置好以後自動計算出來的,
              所以不能為它指定寬度值或高度值。


1>*.js

        var win = getMyWindow("借閱登記", sub_LendBtn, sub_LendBtn_Btns);
        win.width=600;
        win.heigh=400;
        win.show();
        console.log("step6");

// [缺勤記錄維護]鈕  - 子畫面欄位
        var sub_LendBtn = [
            {
                type: 'panel', bodyStyle: "background-color:transparent;", border: 0, padding: "5",
                flex: 100,
                layout: 'border',
                items: [
                    {
                        xtype: 'panel',
                        id: 'sub_panel1',
                        region: 'north',
                        layout: { type: 'hbox', align: 'stretch' },
                        items: [
                            {
                                xtype: 'panel',
                                id: 'sub_panel11',
                                layout: { type: 'vbox', align: 'stretch' },
                                flex: 15,
                                border: 0,
                                items: [{
                                    xtype: "fieldcontainer", fieldLabel: "借閱人員", labelWidth: 60, layout: "hbox", flex: 2,
                                    items: [{
                                        xtype: "textfield", id: "sub_BRP", name: "sub_BRP", width: 100, padding: "0 4 0 0", fieldCls: "required", value:"611292" ,
                                        listeners: {
                                            change: function (textfield, newValue, oldValue) {
                                                if (newValue.length == 10) {
                                                    getVcardInfo(newValue);
                                                }
                                            }
                                        }
                                    },
                                        { xtype: "textfield", id: "sub_BRP_", name: "sub_BRP_", width: 100, padding: "0 4 0 0", readOnly: true, fieldCls: "readonly", },
                                    {
                                        xtype: "button", id: "sub_BRP_btn", name: "sub_BRP_btn", width: 100, padding: "0 4 0 0", text: "借閱人員變更",
                                        handler: function () {
                                        
                                        }
                                    },
                                    ]
                                }, // end of s_借閱人員
                                       :
                        ]
                    },  //end of panel1                    
                    {
                        xtype: 'panel',
                        id: 'sub_panel2',
                        region: 'center',
                        layout: 'fit',
                        items: [sub_Grid]
                    },
                ] // end of   layout: "vbox", padding: "5", items: [
            }  //end of  my_Sub2 , items[{
        ]      //end of  my_Sub2 , items[

V120402 - 刷識別證,自動轉成員工帳號 - 識別證卡號自動轉成員工帳號 , 下一欄位 focus()

目的: 刷識別證,自動轉成員工帳號  - 識別證卡號自動轉成員工帳號

處理說明 : 1>讀取識別證卡號透過aes apserver , AP Server資訊如下: 
                         url:http://192.30.8.224:5556/soap/IMDPApp
                         --> AES 的 AP Server 類似  AMM的 AP Server  , 連到 AES的資料庫  
                   2>SQL:
                                   SELECT PSNNO
                                   FROM SMS_AIDC.dbo.V_CARD
                                   WHERE CARDNO ='0069099682';




1>*.js  - 呼叫 getVcardInfo(CardNo)
 {
                                xtype: 'panel',
                                id: 'sub_panel11',
                                layout: { type: 'vbox', align: 'stretch' },
                                flex: 15,
                                border: 0,
                                items: [{
                         xtype: "fieldcontainer", fieldLabel: "借閱人員", labelWidth: 60, layout: "hbox", flex: 2,
                                    items: [{
xtype: "textfield", id: "sub_BRP", name: "sub_BRP", width: 100, padding: "0 4 0 0", 
            fieldCls: "required", value:"611292" ,
                                        listeners: {
                                            change: function (textfield, newValue, oldValue) {
                                                if (newValue.length == 10) {
                                                    getVcardInfo(newValue);
                                                }
                                            }
                                        }
                                    },
                           

function getVcardInfo(CardNo) {
        Ext.Ajax.request({
            url: '../../api/VD01API/GETVCARDINFO?CARDNO=' + CardNo,
            method: 'POST',
            success: function (response, opts) {
                var value = JSON.parse(response.responseText);
                if (value[0]['PSNNO'] == 'NA') {
                    mywarnalert('查無員工資料!!');
                } else {
                    Ext.getCmp('sub_BRP').setValue(value[0]['PSNNO']);
                    Ext.getCmp('sub_BRP_').setValue(value[0]['NM']);
                    //下一欄位 focus() 
                    Ext.getCmp('sub_TMNO').inputEl.dom.focus();          
                }

            }
        });
    }


2>*.cs
[HttpPost]
        public dynamic GETVCARDINFO(string CARDNO)
        {
            List<object> result = new List<object>();
            var PSNNO = TLSWS.GetPanNo(CARDNO);
            var NM = TLSWS.GetUserName(PSNNO);
            result.Add(new
            {
                PSNNO = PSNNO,
                NM = NM
            });
            return result;
        }

V120402 - 設定欄位屬性: 唯讀/必填(readonly , required) - 計算欄位(calculate)

目的: 設定欄位屬性為 唯讀/必填 (readonly , required )  - 計算欄位(calculate)

處理說明 : 1> { xtype: "textfield", id: "sub_TMNO", name: "sub_TMNO", width: 110, 

                            padding: "0 4 0 0", fieldCls: "required",  },

                   2>{ xtype: "textfield", id: "sub_BRP_", name: "sub_BRP_", width: 100, padding: "0 4 0 0",

                           readOnly: true, fieldCls: "readonly", },

                  3>{ id: "STAT_", name: "STAT_", xtype: "textfield", width: 60, 

                         readOnly: true, fieldCls: "calculate", padding: "0 4 0 0" }





2022年8月10日 星期三

V120402 - MD畫面 - 調整Master高度 - 重新顯示畫面

目的: 調整 Master-Detail 高度, 並重新顯示畫面

處理說明: 1>設定 Master 高度( var Detail = Ext.getCmp("Detail");     Detail.flex = 2; )

                  2>重新顯示畫面 - TMMDViewEdit.doLayout(); 



TMMDViewEdit.on("resize", function (me, width, height, eOpts) {

        //顯示高度 - Detail = MasterGrid+Query

        var Detail = Ext.getCmp("Detail");

        Detail.flex = 2;  // tab_D.flex=1; --> Master: tab_D=2:1;

        console.log("Detail1", Detail);

        tab_D = Ext.getCmp('tab_D');

        console.log("2 TMMDViewEdit: ", TMMDViewEdit);

        console.log("1 tab_D.getHeight(): ", tab_D.getHeight());

        //.doLayout() : Manually force this container's layout to be recalculated.

        TMMDViewEdit.doLayout();  //Container.重新計算 layout

    });

佈局處理說明 - border , fix, vbox, hbox - 版面

目的: 1>最常用的邊框布局——Border 
    2>最簡單的布局——FitLayout
    3>表單專用的布局——FormLayout
    4>BoxLayout——VBox
    5>BoxLayout——HBox
處理說明:
1>最常用的邊連結測試框布局——Border
該布局把容器分為東、南、西、北、中五個區域,分別由east、south、west、north、center表示。我們需要在items中使用region參數來給它定位。

註意:north和south部分只能設置高度(height)west和east部分只能設置寬度(width)center區域必須有,且它的大小是在其他4個部分設置好以後自動計算出來的,所以不能為它指定寬度值或高度值。

Ex:var borderPanel = new Ext.Panel({

        renderTo: 'borderDiv',
        layout: 'border',
        tltle: 'Border Layout',
        width: 1000,
        height: 800,
        defaults: {
            collapsible: true, // 支持該區域的展開和折疊
            split: true, // 支持用戶拖放改變該區域的大小
            bodyStyle: 'padding:15px'
        },
        items: [{
            title: 'Footer-s',
            region: 'south',
            height: 100,
            minSize: 75,
            maxSize: 250,
            html: '這是南邊區域 south'

        }, {
            titlr: 'Main Content-c',
            region: 'center',
            collapsible: false,
            html: '這是中間區域 center'
        }, 


2>最簡單的布局——FitLayout
簡介:也稱“自適應布局”。子元素將自動填滿整個父容器
註意:在fit布局下,對其子元素設置寬度是無效的。如果在fit布局中放置了多個組件,則只會顯示第一個子元素。
var fitPanel = new Ext.Panel({
        renderTo: 'fitDiv',
        layout: 'fit',
        width: 500,
        height: 300,
        items: [{
            title: 'Fit Panel',
            html: '111111111111'
        }]
    });




3>表單專用的布局——FormLayout
簡介:也稱“表單布局”。是一種專門用於管理表單中輸入字段的布局,這種布局在程序中主要用於創建表單字段或表單元素使用。
對於習慣於用 Panel 而不習慣用 FormPanel 的朋友盡管用Panel,但是一定要考慮好提交的問題,如果使用 panel 的話,要做提交可是要一個個獲得控件的值的,
而 FromPanel 則不需要。

var formPanel = new Ext.FormPanel(
{ renderTo: 'formDiv', 
   width: 500, 
   height: 300, 
   labelWidth: 80, 
   defaultType: 'textfield',
   frame: true,
}



4>BoxLayout——HBox
簡介:也稱“豎直布局”。vertical box ,垂直方向的分行顯示。
它的 item 有一個 flex 屬性,其值越大,對應的組件就會占據越大的空間。

var vboxPanel = new Ext.Panel({
        renderTo: 'vboxDiv',
        layout: {
            type: 'vbox',
            align: 'stretch' //拉伸使其充滿整個父容器
        },
        width: 500,
        height: 300,
        items: [{
            title: 'panel-1', html: 'flex:1', flex: 1
        }, {
            title: 'panel-2', html: 'height:150', height: 150
        }, {
            title: 'panel-3', html: 'flex:2', flex: 2
        }]
    });</span>




5>BoxLayout——HBox
簡介:也稱“水平布局”。horizontal box ,水平方向的分列顯示。和 vbox 類似,有 flex 屬性。
ar hbox = new Ext.Panel(
{
renderTo: 'hboxDiv', 
 layout: { type: 'hbox', align: 'stretch' }, 
 width: 500, 
 height: 300, items: [
{ title: 'panel-1', html: 'flex:1', flex: 1 }, 
{ title: 'panel-2', html: 'height:150', width: 150 }, 
{ title: 'panel-3', html: 'flex:2', flex: 2 }] })
</span>



V120402 - 隱藏 Detail Tab

目的: 隱藏  Detail.Tab  

處理說明: 1>tabPanel.getTabBar().getComponent(i).hide()
                   2>tabPanel.setTabVisible(0,false);



1>*.js   *.onReady();   Template 函式: setTabVisible();

    var tab_D = Ext.getCmp("tab_D");
    console.log("tab_D:", tab_D);
    tab_D.setTabVisible(0, false);

2>原始程式: setTabVisible()
setTabVisible: function (idx, i_visible) {
        if (i_visible === false) {
            this.getTabBar().getComponent(idx).hide();
        } else {
            this.getTabBar().getComponent(idx).show();
        }
        var t = this.items.items.length;
        for (i = 0; i < t; i++) {
            if (this.getTabBar().getComponent(i).isVisible() == true) {
                this.setActiveTab(i);
                break;
            }
        }
    },



V120902 - 自動設定子畫面 - Grid的高度 , - 判斷元件是否已顯示在畫面(.el)

目的: 視窗大小調整時, 設定 Grid的度度

處理說明 :  1>Grid的高度 = Form.高度 - 過濾Panel.高度  - 按鈕Panel.高度;
                     2>若 Grid 已 Create, 但是尚未顯示在畫面,則無法 getHeight() 及 getWidth()
                          判斷元件是否已顯示在畫面 ,     typeof Ext.getCmp("grid_M").el
                          --> if  (typeof Ext.getCmp("grid_M").el != undefined)      
                                        Ext.getCmp("grid_M").getHeight();



 // [缺勤記錄維護]鈕  - 子畫面欄位

     var mySub2 = [
            {
                type: 'panel', bodyStyle: "background-color:transparent;", border: 0, layout: { type: 'vbox', align: 'stretch' }, padding: "5",
                items: [
                    {
                        xtype: 'panel',
                        id: 'sub2_panel1',
                        //title: 'sub2_panel1',
                        layout: { type: 'hbox', align: 'stretch' },
                        flex: 0,
                        border: 1,
                        items: [
                            {
                                xtype: 'panel',
                                id: 'sub2_panel11',
                                layout: { type: 'vbox', align: 'stretch' },
                                flex: 15,
                                border: 0,
                                items: [{
                                 xtype: "fieldcontainer", fieldLabel: "日期", labelWidth: 60, layout: "hbox", flex: 2,
 items: [{ xtype: "tmdatefield", id: "sub2_DT", name: "sub2_DT", width: 100, padding: "0 4 0 0", },]
                                }, // end of s_日期
                      
                                ]
                            }, //end of sub2_panel11 , flex:20
                      
                            }, //end of sub2_panel12 , flex:20
                            {
                                //xtype: 'toolbar',
                                xtype: 'panel',
                                id: 'sub2_panel13',
                                layout: { type: 'vbox', align: 'right' },
                                flex: 5,
                                border: 0,
                                items: [
                                    {
                                        xtype: 'button',
                                        id: 'sub2_btn_Show',
                                        flex: 2,
                                        border: 1,
                                        text: '資料顯示',  //sub2
                                        iconCls: 'icon-search',
                                        handler: function () {
                                            var np = {};
                                            np["sub2_DT"] = Ext.getCmp("sub2_DT").getValue();
                                            np["sub2_DEP"] = Ext.getCmp("sub2_DEP").getValue();
                                            np["sub2_LDMAN"] = Ext.getCmp("sub2_LDMAN").getValue();
                                            //console.log('np:', np);
             Ext.getCmp('sub2_Grid').store.getProxy().url = '../api/V120902API/getsub2Data';
              Ext.getCmp('sub2_Grid').store.getProxy().extraParams = np; //分頁OK,篩選條件OK
                                            Ext.getCmp('sub2_Grid').reloadGirdData();                                            
Ext.getCmp('mySubForm').getHeight());
Ext.getCmp('sub2_panel1').getHeight());
Ext.getCmp('sub2_panel2').getHeight());
Ext.getCmp('sub2_Grid').getHeight());
Ext.getCmp('sub2_Grid').getHeight());
                                        }
                                    },  // end of 顯示資料
                                    {
                                        xtype: 'button',
                                        id: 'sub2_btn_clear',
                                        flex: 2,
                                        border: 1,
                                        text: '清除條件',
                                        iconCls: 'icon-clear',
                                        handler: function () {
                                            var f = Query.getForm();
                                            f.reset();
                                        }
                                    },  // end of 清除條件                                   
                                ]  // end of items of [顯示資料][清除條件]
                            }   // end of panel13
                        ]
                    },  //end of panel1                    
                    {
                        xtype: 'panel',
                        id: 'sub2_panel2',
                        //title: 'sub2_panel2',
                        layout: { type: 'vbox', align: 'stretch' },
                        //flex: 60,
                        border: 1,
                        items: [sub2_Grid]
                    },
                ] // end of   layout: "vbox", padding: "5", items: [
            }  //end of  my_Sub2 , items[{
        ]      //end of  my_Sub2 , items[
        var win = getMyWindow("缺勤記錄維護", mySub2, mySub2_Btns);

        win.width = 700;
        win.height = 400;
        win.on('resize', function (me, width, height, eOpts) {
            //console.log("win.resize height=",height);
            var Tmp_okpanel_Height = Ext.getCmp('mySub2_OkBtn').getHeight() + 20;            
            var Tmp_rHeight = Ext.getCmp('mySubForm').getHeight() - Ext.getCmp('sub2_panel1').getHeight() - Tmp_okpanel_Height;            
            Ext.getCmp('sub2_panel2').setHeight(Tmp_rHeight);
            //console.log("win.resize Tmp_rHeight=", Tmp_rHeight);            
        });
        win.show();