顯示具有 region 標籤的文章。 顯示所有文章
顯示具有 region 標籤的文章。 顯示所有文章

2023年6月18日 星期日

V120202E - 版面配置 - border – [north,center] – [east,center] - region

 目的: V120202E 版面配置 - border – [north,center] – [east,center]

處理說明: 1>第1層 : [north,center] , north: 必需設 height
                  2>第2層 : [east,center] , east: 必需設 width



1>*.js
var sub_V120202E_Flds = [
        {
            type: 'panel', bodyStyle: "background-color:transparent;", border: 5, padding: "1",            
            layout: 'border',            
            items: [                
                { // panel1: 過濾條件 : north , 必需設 height
                    xtype: 'panel',
                    id: 'sub_panel1',
                    //title: 'sub_panel1',
                    region: 'north',
                    height: 90,
                    layout:  'border',                        
                    items: [
                        { // panel11 : 退庫人員 , center
                            xtype: 'panel',
                            id: 'sub_panel11',
                            region: 'center',
                            layout: {
                                type: 'vbox',
                                //align: 'stretch'
                            },
                            items: [
                                {
                                  xtype: "fieldcontainer", fieldLabel: "退庫人員", labelWidth: 70, flex: 5, border: 2,
                                    layout: {
                                        type: 'hbox',
                                        //align: 'stretch' 
                                    },
                                    items: [
     { id: "sub_COMPER", name: "sub_COMPER", xtype: "textfield", width: 120, padding: "0 4 0 0", },
     { id: "sub_COMPER_", name: "sub_COMPER_", xtype: "textfield", width: 80, padding: "0 4 0 0", readOnly: true, fieldCls: "readonly", },
                                        {:                                        },
                                        {:                                        },
                                    ]
                                },  // end of 退庫人員
                                {:                 },  // end of 點料人員
                                {:                },                                
                            ]
                        },  //end of sub_panel11 , 退庫人員/點料人員
                        {  // panel12 : 退庫說明 , east , 必需設 width
                            xtype: 'panel',
                            id: 'sub_panel12',
                            //title: 'sub_panel12',
                            //flex: 4,
                            region: 'east',
                            width: 350,
                            layout: {
                                type: 'fit',
                                //align: 'stretch'
                            },
                            items: [
                                {
                                  xtype: "fieldcontainer", fieldLabel: "退庫說明", labelWidth: 60, flex: 5, border: 0,
                                    layout: {
                                        type: 'fit',
                                        //align: 'stretch' 
                                    },
                                    items: [
                                        { id: "sub_CAUSE_REMDK", name: "sub_CAUSE_REMDK", xtype: "textareafield", width: 120, padding: "0 4 0 0", },
                                    ]
                                },  //退庫說明
                            ]
                        },  // end of sub_panel12 , 退庫說明
                    ],
                },//end of sub_panel1
                {  // panel2 : grid , center
                    xtype: 'panel',
                    id: 'sub_panel2',                    
                    region: 'center',        
                    layout: 'fit',
                    flex: 5,
                    border: 1,
                    items: [sub_Grid]
                },                
] // end of   layout: "vbox", padding: "5", items: [
}  //end of  sub_ShowPN_Flds , items[{
    ]      //end of  var sub_ShowPN_Flds 
張貼者： 於 沒有留言:
標籤： , , , , ,

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[
張貼者： 於 沒有留言:
標籤： , , ,
訂閱： 文章 (Atom)