V1060304A-定更定檢拆挪管制 - 自定icon – icon佔滿按鈕 - 空間 - space - css

 目的: V1060304A-定更定檢拆挪管制 - 自定icon – icon佔滿按鈕

處理說明: 1>var Tmp_Str = "<link type='text/css' rel='stylesheet' href='../JsFunction/mycss.css' >";
                      $('head').append(Tmp_Str);
     2>  var cmp_sub_btn_MOVE12 = get_cmp_btn1('右移', 'sub_btn_MOVE12', 10, 'myicon-right',);  

3> //利用 { xtype: 'panel', flex: 20, } 製造按鈕空間
       items: [
                      { xtype: 'panel', flex: 20, }, //space panel
                       cmp_sub_btn_MOVE12,
                      { xtype: 'panel', flex: 5, }, //space panel
                       cmp_sub_btn_MOVE21,
                      { xtype: 'panel', flex: 5, },//space panel
                  ]

1>mycss.css
<style type="text/css" >
#my_tbl {
    border-width: 9px;
    border-style: solid;   　
}
.my_bigfont{
    font-size:  30px;
        color: yellow;
}
.my_redcolor {
    background-color: red;
    background: red;
}
.my_required {
    background: #FFDBE4;
}
.my_lightgreen {
    background: #CCFF00;
}
.myicon-right {
    background-image: url('../images/icons/right.png'); /* 圖示路徑 */
    /*background-size: cover; */ /*圖示縮放填滿 */
    background-position: center;
    width: 80% !important;
    height: 80% !important;
}
 </style >

2>V1060304A.js

 //panel22 左移/右移

    var cmp_sub_btn_MOVE21 = get_cmp_btn1('  ', 'sub_btn_MOVE21', 10, 'icon-left-select',);

    //使用自定的 mycss.css檔案

    //var cmp_sub_btn_MOVE12 = get_cmp_btn1('右移', 'sub_btn_MOVE12', 10, 'myicon-right',);  

    var cmp_sub_btn_MOVE12 = get_cmp_btn1('  ', 'sub_btn_MOVE12', 10, 'icon-right-select',);

    //panel3 下移1/上移1     下移2/上移2

    var cmp_sub_btn_MOVE13 = get_cmp_btn1('  ', 'sub_btn_MOVE13', 10, 'icon-down',);

    var cmp_sub_btn_MOVE31 = get_cmp_btn1('  ', 'sub_btn_MOVE31', 10, 'icon-up',);

    var cmp_sub_btn_MOVE23 = get_cmp_btn1('  ', 'sub_btn_MOVE23', 10, 'icon-down',);

    var cmp_sub_btn_MOVE32 = get_cmp_btn1('  ', 'sub_btn_MOVE32', 10, 'icon-up',);

   {  //sub_panel22,左/右移    //利用 製造按鈕空間{ xtype: 'panel', flex: 20, }

                                                xtype: 'panel',

                                                id: 'sub_panel22',

                                                flex: 5,

                                                layout: { type: 'vbox',align:'stretch',},

                                                border: 1,

                                                //title: 'sub_panel22',

                                                items: [                                                    

                                                    { xtype: 'panel', flex: 20, }, //space panel

                                                    //{ xtype: 'spacer' },

                                                    cmp_sub_btn_MOVE12,                                                    

                                                    { xtype: 'panel', flex: 5, }, //space panel

                                                    //{ xtype: 'spacer' },

                                                    cmp_sub_btn_MOVE21,

                                                    //{ xtype: 'spacer' },

                                                    { xtype: 'panel', flex: 5, },//space panel

                                                ]

                                            },