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

2023年5月11日 星期四

V20302A - 畫面版面設計 , layout , vbox, hbox

 目的: V20302A - 畫面版面設計 , layout , vbox, hbox

處理說明: 1>layout: { type: "vbox", align: 'stretch' }
                       flex: 設定垂直的比例, 若沒設align: stretch,則items必需設width
                  2>layout: { type: "hbox", align: 'stretch' }
                      flex: 設定水平的比例,若沒設align: stretch,則items必需設height




1>*.js
 //[顯示Email]  - 子畫面欄位
    var sub_ShowEmail_Flds = [
        {
            xtype:'panel',bodyStyle: "background-color:transparent;", border: false, 
            layout: {  type: "vbox",  align: 'stretch' }, padding: "5",
            id: 'sub_myForm', items: [
                {
                    xtype: "fieldcontainer", fieldLabel: "主旨", labelWidth: 60, layout: "fit", flex: 1, items: [
                        {
                            xtype: "textfield", id: "sub_Subjext", name: "sub_Subject",  padding: "0 4 0 0",
                            //value: "AJT",
                        },
                    ]
                },  //end of 主旨
                {
                    xtype: "fieldcontainer", fieldLabel: "內容", labelWidth: 60, layout: "fit", flex: 4, items: [
                        {
                            id: "sub_content", name: "sub_content", xtype: "textfield",  padding: "0 4 0 0",
                            //value: "AJT",
                        },
                    ]
                }, // end of 內容
                {  //下方 TreeView, 左右移,正本/副本
                    xtype: "panel", flex: 5,
                    layout: {type: 'hbox', align: 'stretch' },
                    items: [
                        { // TreeView
                            xtype: "panel", flex: 4, layout: 'fit',                            
                            autoScroll: true, items: [treepanel]
                        },  //TreeView
                        {  //正本&副本.[左移/右移]按鈕
                            xtype: "panel", flex: 2, layout: { type: 'vbox', align: 'stretch' }, border: false,
                            //bodyStyle: 'background:blue; ',
                            items: [
                                {  //  正本.左右移的 Button
                                    xtype: 'panel', id: 'panel_btns1', layout: { type: 'vbox', align: 'stretch' }, flex: 1, border: false,
                                    //bodyStyle: 'background:yellow; ',                                    
                                    items: [                                        
                                        {//space panel
                                            xtype: 'panel',    flex: 1,                                            
                                        },// end of 
                                        {//正本.往右移
                                            xtype: 'button',
                                            id: 'btn_move11',
                                            text: '1往右',
                                            iconCls: 'icon-right',
                                            flex: 1,
                                            handler: function () {
                                            }
                                        },// end of 往右移                                        
                                        {//正本.往左移
                                            xtype: 'button',
                                            id: 'btn_move12',
                                            text: '1往左',
                                            iconCls: 'icon-left',
                                            flex: 1,
                                            handler: function () {
                                            }
                                        },//往左移
                                        {//space panel
                                            xtype: 'panel',flex: 1,
                                        },// end of 
                                    ]
                                }, //panel_btn1
                                {  //  副本.左右移的 Button
                                    xtype: 'panel', id: 'panel_btns2', layout: { type: 'vbox', align: 'stretch' }, flex: 1, border: false,                                    
                                    //bodyStyle: 'background:red; ',
                                    items: [
                                    {//space panel                                    
                                    xtype: 'panel', flex: 1,                                },// end of 
                                        {//副本.往右移
                                            xtype: 'button',
                                            id: 'btn_move21',
                                            text: '2往右',
                                            iconCls: 'icon-right',
                                            flex: 1,
                                            handler: function () {
                                            }
                                        },// end of 往右移
                                        //{ xtype: 'panel', flex: 1, },// end of  虛 space
                                        {//副本.往左移
                                            xtype: 'button',
                                            id: 'btn_move22',
                                            text: '2往左',
                                            iconCls: 'icon-left',
                                            flex: 1,
                                            handler: function () {
                                            }
                                        },//往左移
                                        {//space panel
                                            xtype: 'panel', flex: 1,
                                        },// end of 
                                    ]
                                }, //panel_btn2                                                        
                            ]
                        },  //按鈕
                        {  //正本,副本人員
                            xtype: "panel", flex: 4,                            
                            layout: { type: 'vbox', align: 'stretch' },                            
                            items: [
                                {
                                    xtype: "panel", flex: 1, title: '正本人員', layout: 'fit',                                  
                                     bodyStyle: 'background:yellow; ', 
                                },
                                {
                                    xtype: "panel", flex: 1, title: '副本人員', layout: 'fit',                                                                       
                                    bodyStyle: 'background:blue; ',
                                },
                            ],                            
                        },  //正本副本
                    ]
                }, // end of TreeView                
            ]  //end of sub_myForm
        }]  //end of sub_ShowPN_Flds
        
    console.log(" ShowEmail  step4");   

    var win = getMyWindow("挑選 Email 人員", sub_ShowEmail_Flds, sub_ShowEmail_Btns);


張貼者： 於 沒有留言:
標籤： , , , , ,

2022年8月10日 星期三

佈局處理說明 - 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>



張貼者： 於 沒有留言:
標籤： , , ,
訂閱： 文章 (Atom)