目的: V80204 - 自定 style - css - 自定字型,顏色,背景顏色
處理說明: 1>利用 labelstyle 及 fieldstyle 設定 字型,顏色
labelStyle: "font-size: 20pt; color: blue; background: gray; ",
labelStyle: "font-size: 20pt; color: blue; background: gray; ",
fieldStyle: "font-size: 20pt; background: yellow; ",
2>利用外部 css 檔案, class 設定
var Tmp_Str = "<link type='text/css' rel='stylesheet' href='../JsFunction/mycss.css' >";
$('head').append(Tmp_Str);
3>利用自定 class 來設定 字型,顏色
fieldCls: "my_redcolor my_bigfont",
4>設定 panel 的 顏色 -
bodyStyle: 'background:#ffc; ',
5>設定標題顏色 & 字型大小
var cmp_TITLE = get_cmp_lbl0("試車/飛(前中)登錄", 550);
cmp_TITLE.style = "font-size: 14pt; color: blue;:text-align:center; ";
1>V80204.js
//包含 mycss.css
var Tmp_Str = "<link type='text/css' rel='stylesheet' href='../JsFunction/mycss.css' >";
$('head').append(Tmp_Str);
var Query1 = new Ext.FormPanel({
id: 's1_form', flex:1,
layout: { type: 'hbox', align: 'stretch' },
fieldDefaults: { labelAlign: 'right' },
defaults: { margin: { top: 3 } },
height: 20,
items: [
{
xtype: 'panel',
id: 'panel1_1',
layout: { type: 'hbox', align: 'stretch' },
flex: 14,
border: 0,
items: [
{
xtype: 'panel',
id: 'panel1_11',
layout: { type: 'hbox', align: 'stretch' },
flex: 15,
border: 0,
items: [{
xtype: "fieldcontainer", fieldLabel: "WBS", labelWidth: 100, layout: "hbox", flex: 2,
labelStyle: "font-size: 20pt; color: blue; background: gray; ",
items: [{
xtype: "textfield", id: "s1_WBS", name: "s1_WBS", width: 150,
padding: "0 4 0 0",
//Style: "font-size: 20pt; background-color: red; ",
fieldStyle: "font-size: 20pt; background: yellow; ",
//fieldCls: "required",
//fieldCls: "my_redcolor my_bigfont",
//cls: "edit_BC",
},
{
xtype: "button", id: "s1_btn_WBS", name: "s1_btn_WBS", text: "...",
handler: function () {
var win = EditPickx('WBS', '../api/V80204API/get_s_WBSPick', ['WBSNO'], ['s1_WBS'], J_pickstore_s_WBS, J_pickcolumns_s_WBS);
win.show();
}
},
]
}, // end of s1_WBS
{
xtype: "fieldcontainer", fieldLabel: "機種機號", labelWidth: 100, layout: "hbox", flex: 2,
items: [
{ xtype: "textfield", id: "s1_ACNO", name: "s1_ACNO", width: 150, padding: "0 4 0 0" },
]
}, // end of s_機種機號
{ //顯示等候訊息
id: "s1_PROCMSG", name: "s1_PROCMSG", xtype: "panel", width: 150, height: 20, margin: "0 4 0 4",
hidden: false, border: 0, style: 'background-color:#FFFFFF;'
},
]
}, // end of panel1
]
},
<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;
}
var DataPanel = Ext.create("Ext.panel.Panel", {
flex: 4, layout: { type: 'hbox', align: 'stretch' },
bodyStyle: 'background:#ffc; ',
//bodyCls: 'my_lightgreen',
fieldDefaults: { labelAlign: 'right' },
items: [
//{ xtype: "panel", flex: 2, title: "", },
{
xtype: "fieldcontainer", fieldLabel: "WBS報工工時(小時)", labelWidth: 130, layout: "hbox", flex: 5,
items: [{
xtype: "textfield", id: "s1_WBS_HR", name: "s1_WBS_HR", width: 150,
padding: "0 4 0 0", fieldCls: "readonly",
// value: 'FM20120301001',
},
]
}], // end of s1_WBS_HR
}); // end of DataPanel
