WebDesign 心得綜整

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',

items: [

{

xtype: 'panel',

id: 'sub_panel11',

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',

items: [sub_Grid]

] // end of layout: "vbox", padding: "5", items: [

} //end of my_Sub2 , items[{

] //end of my_Sub2 , items[

V120402 - 刷識別證,自動轉成員工帳號 - 識別證卡號自動轉成員工帳號 , 下一欄位 focus()

目的: 刷識別證,自動轉成員工帳號 - 識別證卡號自動轉成員工帳號

處理說明 : 1>讀取識別證卡號透過aes apserver , AP Server資訊如下:

url：http://192.30.8.224:5556/soap/IMDPApp

--> AES 的 AP Server 類似 AMM的 AP Server , 連到 AES的資料庫

2>SQL:
SELECT PSNNO
FROM SMS_AIDC.dbo.V_CARD
WHERE CARDNO ='0069099682';

1>*.js - 呼叫 getVcardInfo(CardNo)

{

xtype: 'panel',

id: 'sub_panel11',

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);

}

function getVcardInfo(CardNo) {

Ext.Ajax.request({

url: '../../api/VD01API/GETVCARDINFO?CARDNO=' + CardNo,

method: 'POST',

success: function (response, opts) {

var value = JSON.parse(response.responseText);

if (value[0]['PSNNO'] == 'NA') {

mywarnalert('查無員工資料!!');

} else {

Ext.getCmp('sub_BRP').setValue(value[0]['PSNNO']);

Ext.getCmp('sub_BRP_').setValue(value[0]['NM']);

//下一欄位 focus()

Ext.getCmp('sub_TMNO').inputEl.dom.focus();

}

});

}

2>*.cs

[HttpPost]

public dynamic GETVCARDINFO(string CARDNO)

{

List<object> result = new List<object>();

var PSNNO = TLSWS.GetPanNo(CARDNO);

var NM = TLSWS.GetUserName(PSNNO);

result.Add(new

{

PSNNO = PSNNO,

NM = NM

});

return result;

}

V120402 - 設定欄位屬性: 唯讀/必填(readonly , required) - 計算欄位(calculate)

目的: 設定欄位屬性為唯讀/必填 (readonly , required ) - 計算欄位(calculate)

處理說明 : 1> { xtype: "textfield", id: "sub_TMNO", name: "sub_TMNO", width: 110,

padding: "0 4 0 0", fieldCls: "required", },

2>{ xtype: "textfield", id: "sub_BRP_", name: "sub_BRP_", width: 100, padding: "0 4 0 0",

readOnly: true, fieldCls: "readonly", },

3>{ id: "STAT_", name: "STAT_", xtype: "textfield", width: 60,

readOnly: true, fieldCls: "calculate", padding: "0 4 0 0" }

2022年8月10日星期三

V120402 - MD畫面 - 調整Master高度 - 重新顯示畫面

目的: 調整 Master-Detail 高度, 並重新顯示畫面

處理說明: 1>設定 Master 高度( var Detail = Ext.getCmp("Detail"); Detail.flex = 2; )

2>重新顯示畫面 - TMMDViewEdit.doLayout();

TMMDViewEdit.on("resize", function (me, width, height, eOpts) {

//顯示高度 - Detail = MasterGrid+Query

var Detail = Ext.getCmp("Detail");

Detail.flex = 2; // tab_D.flex=1; --> Master: tab_D=2:1;

console.log("Detail1", Detail);

tab_D = Ext.getCmp('tab_D');

console.log("2 TMMDViewEdit: ", TMMDViewEdit);

console.log("1 tab_D.getHeight(): ", tab_D.getHeight());

//.doLayout() : Manually force this container's layout to be recalculated.

TMMDViewEdit.doLayout(); //Container.重新計算 layout

});

佈局處理說明 - 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',

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>

V120402 - 隱藏 Detail Tab

目的: 隱藏 Detail.Tab

處理說明: 1>tabPanel.getTabBar().getComponent(i).hide()
2>tabPanel.setTabVisible(0,false);

1>*.js *.onReady(); Template 函式: setTabVisible();

var tab_D = Ext.getCmp("tab_D");

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

tab_D.setTabVisible(0, false);

2>原始程式: setTabVisible()

setTabVisible: function (idx, i_visible) {

if (i_visible === false) {

this.getTabBar().getComponent(idx).hide();

} else {

this.getTabBar().getComponent(idx).show();

}

var t = this.items.items.length;

for (i = 0; i < t; i++) {

if (this.getTabBar().getComponent(i).isVisible() == true) {

this.setActiveTab(i);

break;

}

V120902 - 自動設定子畫面 - Grid的高度 , - 判斷元件是否已顯示在畫面(.el)

目的: 視窗大小調整時, 設定 Grid的度度

處理說明 : 1>Grid的高度 = Form.高度 - 過濾Panel.高度 - 按鈕Panel.高度;
2>若 Grid 已 Create, 但是尚未顯示在畫面,則無法 getHeight() 及 getWidth()

判斷元件是否已顯示在畫面 , typeof Ext.getCmp("grid_M").el
--> if (typeof Ext.getCmp("grid_M").el != undefined)
Ext.getCmp("grid_M").getHeight();

// [缺勤記錄維護]鈕 - 子畫面欄位

win.width = 700;

win.height = 400;

win.on('resize', function (me, width, height, eOpts) {

//console.log("win.resize height=",height);

var Tmp_okpanel_Height = Ext.getCmp('mySub2_OkBtn').getHeight() + 20;

var Tmp_rHeight = Ext.getCmp('mySubForm').getHeight() - Ext.getCmp('sub2_panel1').getHeight() - Tmp_okpanel_Height;

Ext.getCmp('sub2_panel2').setHeight(Tmp_rHeight);

//console.log("win.resize Tmp_rHeight=", Tmp_rHeight);

});

win.show();

訂閱：文章 (Atom)

2022年8月11日星期四

V120402 - 子視窗,自動填滿畫面的設定 - 版面

V120402 - 刷識別證,自動轉成員工帳號 - 識別證卡號自動轉成員工帳號 , 下一欄位 focus()

V120402 - 設定欄位屬性: 唯讀/必填(readonly , required) - 計算欄位(calculate)

2022年8月10日星期三

V120402 - MD畫面 - 調整Master高度 - 重新顯示畫面

佈局處理說明 - border , fix, vbox, hbox - 版面

V120402 - 隱藏 Detail Tab

V120902 - 自動設定子畫面 - Grid的高度 , - 判斷元件是否已顯示在畫面(.el)

WebDesign 心得綜整

追蹤者

網誌存檔

關於我自己

2022年8月11日 星期四

2022年8月10日 星期三

追蹤者

網誌存檔

關於我自己

2022年8月11日星期四

2022年8月10日星期三