目的: 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
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);
