目的: 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',); var cmp_sub_btn_MOVE13 = get_cmp_btn1(' ', 'sub_btn_MOVE13', 10, 'icon-down',);
--> 按鈕文字填入' ' , 空白space
--> 按鈕文字填入' ' , 空白space
var cmp_sub_btn_MOVE31 = get_cmp_btn1(' ', 'sub_btn_MOVE31', 10, 'icon-up',);
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 >
<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
]
},
