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

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 

2023年2月7日 星期二

V120202B : css - div margin border 的用法 - table cellsapcing - cellpadding border 的用法

 目的: V120202B css - div  margin  border 的用法   - table   cellsapcing - cellpadding border 的用法

           HTML online : https://www.tutorialspoint.com/online_html_editor.php

處理說明: 1> 設定標籤的長寬 & 標籤的列印位置往右移 & 設定邊線寬度
                       <div id='print_area' style='width:10cm;height:4cm;margin:0px 0px 0px 20px;
                         border:5px solid green;'>

                  2>設定  table 的 邊線間距(cellspacing) , 邊框2文字間距(cellpadding=0)
<table id='my_tbl1' style='width:100%; margin:0px 0px 0px 10px;' border=1px borderstyle='solid' bordercolor='blue' cellspacing=0 cellpadding=0>
 
                 3>  <table> row底線
<td width=35% style='border-bottom:1px solid black;'>機號:"+Tmp_ASN+"</td>
<td width=35% style='border-bottom:1px solid black;' >工號: "+Tmp_SAPNO+"</td>

                         

1>範例1 : <div> marin padding


*.html
<div id='print_area' style='width:10cm;height:4cm;border:5px solid green;
margin:0px 0px 0px 20px;padding:0px 0px 0px 10px;'>
<div id='my_div_1' style='width: 9.8cm; height: 3.5cm;border: 1px solid brown;font-size:0.5pt;'>
<table id='my_tbl1' style='width:100%; margin:0px 0px 0px 10px;' border=1px borderstyle='solid' bordercolor='blue' cellspacing=0>
<tr>
<td width=35%>機號: A049 </td>
<td width=35% '>工號: 12345678</td>
<td width=35% '>工單件號: SROPN_1 </td>
</tr>
</table>


2>範例2 : <table> margin cellspacing cellpadding
*.html
<table id='my_tbl1' style='width:100%;margin:0px 0px 0px 10px;' cellpadding=6 border=1px borderstyle='solid' bordercolor='blue' cellspacing=2>

<tr>
<td width=35%>機號: A049 </td>
<td width=35% '>工號: 12345678</td>
<td width=35% '>工單件號: SROPN_1 </td>
</tr>
</table>


3> <table> row底線


<div id='print_area' style='width:10cm;height:4cm;border:5px solid green; margin:2px 5px 1px 15px;'>
<div id='my_div_1' style='width: 9.8cm; height: 3.5cm;border: 1px solid yellow;font-size:4pt; margin:2px 5px 1px 15px; '>
<table id='my_tbl1' style='width:100%;padding:0 0 0 10;' border=0px borderstyle='solid' bordercolor='blue' cellspacing=0>
<tr style="border-bottom:1px solid blue">
<td width=35% style='border-bottom:1px solid black;'>機號: A049 </td>
<td width=35% style='border-bottom:1px solid black;'>工號: 12345678</td>
<td width=35% style='border-bottom:1px solid black;'>工單件號: SROPN_1 </td>
</tr> </table>






Sample:


Source:   

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  height: 200px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>





2022年12月12日 星期一

V80201 – 生工OSM查詢 – 開啟子視窗 - layout:'border' - 顯示子件資料 - 子畫面

 目的: V80201 – 生工OSM查詢 開啟子視窗

處理說明:







1>*.js 開啟子視窗的 source

1>> V80201A.js

Ext.Loader.loadScript({
    url: '../JsFunction/V80201A1.js'
});

//[顯示子件資料]鈕 - 子視窗
function ShowPNBtn_click() {
console.log(" ShowPNBtn_click  step1");
    //按鈕 : [確認] [取消]  - [顯示子件資料]鈕
    var sub_ShowPN_Btns = [
        {
            xtype: 'button', text: '確定', id: 'sub_ShowPN_OkBtn',
            listeners: {
                click: function () {
                    //mysuccessalert("mysub2_確定 ");
                    ShowPNGridDetail();
                }
            }
        },        


2>>V80201A1.js
//[顯示子件明細資料]鈕 - 子視窗Grid
function ShowPNGridDetail() {

    //按鈕 : [確認] [取消]  - [顯示子件資料]鈕
    var sub_ShowPNDetail_Btns = [
        {
            xtype: 'button', text: '瀏覽參考文件', id: 'sub_ShowRef_OkBtn',
            listeners: {
                click: function () {
                    //mysuccessalert("mysub2_確定 ");
                    ShowRefDetail();
                }
            }
        },        
        {
            xtype: 'button', text: '離開', id: 'sub_ShowRef_CancelBtn',
            listeners: {
                click: function () {
                    //mysuccessalert("mysub2_取消");
                    var Tmp_win = this.up("window");
                    if (Tmp_win == undefined) {
                        Ext.Msg.alert("取消時未取到Window Object");
                    }
                    this.up("window").close();
                    this.up("window").destroy();
                }
            }
        },
    ];

// [顯示子件資料]鈕  - Grid子畫面欄位
    var sub_Columns = [
        { header: "", xtype: "rownumberer", width: 50, align: "center", sortable: false },
        { header: "子件件號", dataIndex: "cmp_id", width: 100, TMType: "string" },
        { header: "件號名稱", dataIndex: "itm_name", width: 150, TMType: "string" },
        { header: "數量", dataIndex: "qty", width: 80, TMType: "string" },
        { header: "單位", dataIndex: "units", width: 60, TMType: "string" },
        { header: "製程", dataIndex: "mroutingtype", width: 80, TMType: "string" },
        { header: "製程名稱", dataIndex: "mroutingtype_name", width: 100, TMType: "string" },
        //{ header: "替代件號", dataIndex: "SPN", width: 100, TMType: "string" },
        //{ header: "參考文件", dataIndex: "FLNM", width: 100, TMType: "string" },        
    ];

    var sub_model = [
        { name: "cmp_id" },
        { name: "itm_name" },
        { name: "qty" },
        { name: "units" },
        { name: "mroutingtype" },
        { name: "mroutingtype_name" },
        //{ name: "SPN" },
        //{ name: "FLNM" },        
    ];

    console.log(" ShowPNGridDetail  step2");
    //子件明細 Grid
    var sub_Grid = Ext.create('TMGrid', {
        grid_id: 'sub_Grid',
        columns: sub_Columns,
        autoScroll: true,
        flex: 1,
        store: Ext.create('gridstore', { model: sub_model }),
    });

    console.log("sub_Grid:", sub_Grid);

var sub_ShowPNDetail_Flds = [
        {
            type: 'panel', bodyStyle: "background-color:transparent;", border: 5, padding: "1",            
            layout: 'border',            
            items: [
                {
                    xtype: 'panel',
                    id: 'sub_panel1',
                    region: 'north',
                    layout: { type: 'hbox', align: 'stretch' },
                    items: [                      
                        {
                            xtype: "fieldcontainer", fieldLabel: "專案別", labelWidth: 80, flex: 5, border: 2,
                            items: [
                                { id: "sub_PROJID1", name: "sub_PROJID1", xtype: "textfield", width: 80, padding: "0 4 0 0", },
                            ]
                        },
                        {
                            xtype: "button", text: "顯示明細資料", labelWidth: 120, flex: 2, border: 2,
                            handler: function () {
                                var np = {};
                                Ext.getCmp('sub_Grid').store.getProxy().url = '../api/V80201A1API/getsubData';
                                Ext.getCmp('sub_Grid').store.getProxy().extraParams = np; //分頁OK,篩選條件OK
                                Ext.getCmp('sub_Grid').store.load();
                            }                           
                        },

                    ],
                },//end of 專案別
                {
                    xtype: 'panel',
                    id: 'sub_panel2',                    
                    region: 'center',        //自動填滿剩餘空間
                    layout: 'fit',  //如此 Grid 才會充滿 panel2
                    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 

    //"A1" : 區分不同 window_id
    var win1 = getMyWindow("顯示子件明細資料", sub_ShowPNDetail_Flds, sub_ShowPNDetail_Btns, "A1");
    win1.x = 450;
win1.setWidth(400);
    win1.setHeight(300);
    //顯示 sub Grid 資料
    var np = {};
    np["sub_BRP"] = "";
    
    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('sub_Grid').store.getProxy().url = '../api/V80201A1API/getsubData';
    Ext.getCmp('sub_Grid').store.getProxy().extraParams = np; //分頁OK,篩選條件OK
   //Ext.getCmp('sub_Grid').store.clearOnPageLoad = true;
    //Ext.getCmp('sub_Grid').reloadGridData();
    Ext.getCmp('sub_Grid').store.load();
    console.log(" STEP 1 Ext.getCmp('sub_Grid').store.load() ");
//Ext.getCmp('sub_Grid_ptb').hide();

};  // end of function ShowPNBtn_click() {

2022年11月3日 星期四

V120502A - Table 的邊框設定 - 放大縮小設定 - 預覽列印設定

 目的: Table 的邊框設定 - 利用 border=1 和  style=' border:1 red solid;' 的差異

處理說明:  1>Cell無邊框
                         <table style = 'border: 1px solid blue; ' id = 'my_tbl' >
                            style設定的border只有針對目前的邊框做設定
                            並不會針對 table.cell設定邊框

                   2>Cell 有邊框
<table id = 'my_tbl' border=2px borderstyle='solid' bordercolor='#0000ff' width=100% height=100% >
                             table border設定, 也針對 cell 的邊框




1>*.js

var pub_print_area_Str = "<div  id='print_area'   style = 'border: 1px solid red;' width=100%  height=100% >"
    + "<table id = 'my_tbl'  style = 'border: 1px solid blue; '  > "
    //+ "<table  id = 'my_tbl'  border=2px  borderstyle='solid'   bordercolor='#0000ff'  width=100% height=100% > "
    + "<tr  id='my_tr1'><th>件號<br>(PART NO)</th><td>R=8-84-766-21-1</td></tr>"
    + "<tr  id='my_tr2'><th>EO號碼<br>(EONO)</th><td>GM1381+A15</td></tr>"
    + "<tr  id='my_tr3'><th>日期<br>(EONO)</th><td>2022/11/03</td></tr>"
    + "<tr  id='my_tr4'><th>數量<br>(EONO)</th><td>2</td></tr>"
    + "<tr  id='my_tr5'><th>工令單號<br>(SOR NO)</th><td>23169622</td></tr>"
    + "<tr  id='my_tr6'><th>品保<br>(QC)</th><td></td></tr>"
    + "<tr  id='my_tr6'><th>備註<br>(REMARK)</th><td>A052</td></tr>"
    + "</table>"
    + "</div>";


    var Tmp_sub_panel1 = $('#sub_panel1');
    Tmp_sub_panel1.append(pub_print_area_Str);
    

3>Table 邊框的設定


3.1>>*.js

var pub_print_area_Str = "<div  id='print_area'   class='break' style='width: 10cm; height: 6cm;border: 5px solid green;transform: scale(1);'>"
    + "<table  id = 'my_tbl' style='line-height: 14px; font-size: 12px;border-collapse:collapse;' border=1px  borderstyle='solid'   bordercolor='blue'  width=100% height=100% > "
    + "<tr ><th width=20% style='transform: scale(1);'>件號1<br>(PART NO)</th><td width=80%>R=8-84-766-21-1</td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>EO號碼<br>(EONO)</th><td width=80%>GM1381+A15</td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>日期<br>(DATE)</th><td width=80%>2022/11/03</td></tr>"
    + "<tr ><th width=20% style='transform: scale(0.75);'>數量<br>(QTY)</th><td width=80%>2</td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>工令單號<br>(SOR NO)</th><td width=80%>23169622</td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>品保<br>(QC)</th><td width=80%></td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>備註<br>(REMARK)</th><td width=80%>A052</td></tr>"
    + "</table>"
    + "</div>";






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[

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>