V120602 – 編輯模式 - fieldCls – 必填,唯讀,計算欄位 - fieldCls : required, readonly,calulate - 挑選按鈕

 目的: V120602 – 編輯模式 – 設定欄位必填,唯讀,CaluField  - fieldCls - required, readonly ,Calucate

處理說明:  1>設定欄位唯讀 : fieldCls: "readonly" - 灰色

                                                   readOnly: true         - 不可輸入資料

                   2>設定欄位必填 : fieldCls: "required"  - 粉紅色

                   3>設定欄位Calu  : fieldCls: "calculate" - 淺黃色

                   4>挑選欄位         :  EditPickx('挑選', url , 傳回欄位,設定欄位, model, columns)

                   5>畫面欄位統一設定 : setFieldsCls('form_id',[必填s],[唯讀],[一般]) 

 

1>*.js

-唯讀欄位 

{

  xtype: "fieldcontainer", fieldLabel: "更新日期", labelWidth: 128, layout: "hbox", items: [

{

   id: "UPDT", name: "UPDT", xtype: "textfield", width: 100, padding: "0 4 0 0", maxLength: 10,

   fieldCls: "readonly",readOnly: true, 

}

]

},

-必填欄位

{

  xtype:"fieldcontainer",fieldLabel:"ITEM",labelWidth:128,layout:"hbox",items:[

{

id: "ITM", name: "ITM", xtype: "textfield", width: 100, padding: "0 4 0 0", maxLength: 10,

fieldCls: "required",

}

]

},

-計算欄位

{ id: "DEPID", name: "DEPID", xtype: "textfield", width: 100, padding: "0 4 0 0", maxLength: 20},

{

   id: "DEPID_", name: "DEPID_", xtype: "textfield", width: 300, padding: "0 4 0 0", maxLength: 20,

   fieldCls: "calculate", readOnly: true,

},

-[..] 挑選按鈕

{

   xtype: "button", id: "btn_DEPID", name: "btn_DEPID", text: "...",

   handler: function () {

   var win = EditPickx('挑選單位', '../api/V120602API/get_f_DEPIDPick', 

                                    ['DEPID','DEPNM'], ['DEPID','DEPID_'],    

                                    J_pickstore_f_DEPID, J_pickcolumns_f_DEPID);

    win.show();

}

},

-畫面欄位統一設定屬性:

  //新增

 Ext.getCmp('btn_add').on("click", function () {

    setFieldsCls('myform', 

   ['ITM', 'ACNO', 'DEPID', 'QDRNO', 'CURP', 'STAT'],  //required

   ['ITM', 'UPPER', 'UPDT',],                          //readonly

  ['ITM','ACNO','DEPID','QDRNO','REVDT','CURDEP','CURP','REFNO','DIRNO','REL_DIR_NO','WKD','PCMPDT','STATDCPTN','DFDCPTN','STAT','UPPER','CAU']);

    });

1>Options1: 設定欄位readonly] - 改變欄位底色

 Ext.getCmp("s_chk_OTHR").items.items[5].on('change', function (me, newValue, oldValue, eOpts) {

        if (newValue) {  //設定欄位 readonly 

            Ext.getCmp("s_PROJID").setValue("F16V");            

            Ext.getCmp("s_PROJID").setReadOnly(true);

            Ext.getCmp("s_PROJID").inputEl.addCls('readonly');            

        }

        else {  //移除欄位 readonly 

            Ext.getCmp("s_PROJID").setValue("");

            Ext.getCmp("s_PROJID").setReadOnly(false);

            Ext.getCmp("s_PROJID").inputEl.removeCls('readonly');            

        }

2>Options2: 透過函式 : setFieldsCls  - 必需在 win.show() 之後,才可 setFieldCls

//設定必填欄位

    setFieldsCls('mySubFormI',

        ['sub_PROJID', 'sub_ACNO_'],  //required

V120202C -[撿料完成]– 簡單子畫面 – 一般欄位(Form) - readonly

 目的: V120202C – 顯示子畫面 – 一般欄位(Text) – 撿料完成

處理說明:     1>顯示子視窗
                            var win = getMyWindow("撿料完成", J_formFields_V120202C, Btns_V120202C);
                                            win.width = 600;
                                            win.height = 450;
                                               win.show();

                                        2>子畫面欄位

1>*.js
// [Call_V120202C]鈕 - 子畫面欄位
var J_formFields_V120202C = [
{
bodyStyle: "background-color:transparent;", border: false, layout: "vbox", padding: "5", items: [
{
xtype: "fieldcontainer", fieldLabel: "申請單號", labelWidth: 100, layout: "hbox", items: [
{
id: "V120202C_APNO", name: "V120202C_APNO", xtype: "textfield", width: 150, padding: "0 4 0 0", fieldCls: "required",
listeners: {
change: function (me, newValue, oldValue, eOpts) {
if (!(newValue.length == 12))
return;
var np = {};
np["APNO"] = newValue;
var Tmp_url = "../../api/V120202CAPI/get_APNO1";
var rtn_Str = getUrlStr(Tmp_url, np, "取得申請單號.件號/名稱 /數量");
if (checkisnull(rtn_Str)) {
Ext.getCmp("V120202C_MATNR").setValue("");
Ext.getCmp("V120202C_MAKTX").setValue("");
Ext.getCmp("V120202C_QTY").setValue("0");
Tmp_Str = "申請單號(" + newValue + ")無相關資料<br>"
+ "請檢核!!";
mywarnalert(Tmp_Str);
return;
}
if (checkRtnOK(rtn_Str)) {
var Tmp_recs = Ext.decode(rtn_Str);
var Tmp_rec = Tmp_recs[0];
console.log("Tmp_rec:", Tmp_rec);
Ext.getCmp("V120202C_MATNR").setValue(Tmp_rec.MATNR);
Ext.getCmp("V120202C_MAKTX").setValue(Tmp_rec.MAKTX);
Ext.getCmp("V120202C_QTY").setValue(Tmp_rec.QTY);
Ext.getCmp("V120202C_STAT").setValue(Tmp_rec.STAT);
} // end of if (checkRtnOK(rtn_Str))
} // end of change
} // end of listeners
},
{
xtype: "button", id: "btn_V120202C_APNO", name: "btn_V120202C_APNO", text: "...",
hidden: true,
//員工編號挑選 , TreeView 挑選
handler: function () {
var win = EditPickx('申請單號', '../api/V120202CAPI/get_APNOPick', ['APNO', 'MATNR', 'MAKTX', 'QTY','STAT'], ['V120202C_APNO', 'V120202C_MATNR', 'V120202C_MAKTX', 'V120202C_QTY','V120202C_STAT'], J_pickstore_V120202C_APNO, J_pickcolumns_V120202C_APNO);
win.show();
}
},
]
}, //end of 申請單號
{
xtype: "fieldcontainer", fieldLabel: "撥料件號", labelWidth: 100, layout: "hbox", items: [
{ id: "V120202C_MATNR", name: "V120202C_MATNR", xtype: "textfield", width: 150, padding: "0 4 0 0", readOnly: true, fieldCls: "readonly", },
]
}, // end of 撥料件號
{
xtype: "fieldcontainer", fieldLabel: "名稱", labelWidth: 100, layout: "hbox", items: [
{ id: "V120202C_MAKTX", name: "V120202C_MAKTX", xtype: "textfield", width: 150, padding: "0 4 0 0", readOnly: true, fieldCls: "readonly", },
]
}, // end of 名稱
{
xtype: "fieldcontainer", fieldLabel: "數量", labelWidth: 100, layout: "hbox", items: [
{ id: "V120202C_QTY", name: "V120202C_QTY", xtype: "textfield", width: 150, padding: "0 4 0 0", readOnly: true, fieldCls: "readonly", },
]
}, // end of 數量
{
xtype: "fieldcontainer", fieldLabel: "單況", hidden: true, labelWidth: 100, layout: "hbox", items: [
{ id: "V120202C_STAT", name: "V120202C_STAT", xtype: "textfield", width: 150, padding: "0 4 0 0", hidden: true, readOnly: true, fieldCls: "readonly", },
]
}, // end of 單況
] // end of layout: "vbox", padding: "5", items: [
} //end of J_formFields_Sub1 , items[{
] //end of J_formFields_Sub1 , items[


//2>顯示子畫面 - 按鈕
var Btns_V120202C = [
{
xtype: 'button', text: '確定', id: 'OkBtn_V120202C',
listeners: {
click: function (me, e, eOpts ) {
//1>更新資料庫資料(AMM_COMPQTY)
var Tmp_Str = "";
if (checkisnull(Ext.getCmp("V120202C_APNO").getValue())) {
Tmp_Str = "申請單號不可空白<br>"
+ " 敬請檢核 !!";
mywarnalert(Tmp_Str);
return;
}

if (checkisnull(Ext.getCmp("V120202C_MATNR").getValue())) {
Tmp_Str = "申請單號(" + Ext.getCmp("V120202C_APNO").getValue() + ") <br> "
+"撥料件號(" + Ext.getCmp("V120202C_MATNR").getValue() + ") <br> "
+"不可空白 <br> "
+"敬請檢核 !!";
mywarnalert(Tmp_Str);
return;
}

var Tmp_STAT = Ext.getCmp("V120202C_STAT").getValue();
if (checkisnull(Tmp_STAT)) {
Tmp_Str = "申請單號(" + Ext.getCmp("V120202C_APNO").getValue() + ") <br> "
+ "單況(" + Ext.getCmp("V120202C_STAT").getValue() + ") <br> "
+ "不可空白 <br> "
+ "敬請檢核 !!";
mywarnalert(Tmp_Str);
return;
}

var Tmp_msg = "";
if (Tmp_STAT != "B") {
switch (Tmp_STAT) {
case "A": {
Tmp_msg = "尚未執行條碼列印!!";
break;
}
case "C": {
Tmp_msg = "撿料已完成勿重覆執行!!";
break;
}
case "D": {
Tmp_msg = "該筆物料已領用, 請確認 !!";
break;
}
case "Z": {
Tmp_msg = "該筆物料已撤銷, 請確認 !!";
break;
}
} //end of switch
mywarnalert(Tmp_msg);
return
} // if <>B

//更新單況
var Tmp_url = '../../api/V120202CAPI/UPDATE_STAT'
var np1 = {};
np1["APNO"] = Ext.getCmp("V120202C_APNO").getValue();
var Rtn_Str = getUrlStr(Tmp_url, np1, "撿料完成(V120202C)");
if (checkRtnOK(Rtn_Str)) {
Tmp_Str = "申請單號(" + Ext.getCmp("V120202C_APNO").getValue() + ") <br> "
+ "單況已變更為 C:撿料完成!!";
mysuccessalert(Tmp_Str);
//清空畫面的欄位值
var f = this.up("form");
console.log("f :", f);
console.log("f.form :", f.form);
f.form.reset();
}
else {
Tmp_Str = "申請單號(" + Ext.getCmp("V120202C_APNO").getValue() + ") <br> "
+ "單況已變更失敗!!";
mywarnalert(Tmp_Str);
}
// end of checkRtnOk

//2> close windows
//this.up("window").close();
//this.up("window").destroy();
//3>重新更新 MDBGrid
//Ext.getCmp("btn_Show").fireHandler();
}
}
},
{
xtype: 'button', text: '取消', id: 'CancelBtn_mySub1',
listeners: {
click: function () {
this.up("window").close();
this.up("window").destroy();
//3>重新更新 MDBGrid
Ext.getCmp("btn_Show").fireHandler();
}
}
},
];

V40A – Query - 產生元件函式 - get_cmp_xxxx - 設定屬性 readOnly

 目的: V40A – Query - 產生元件函式  - get_cmp_xxxx

處理步驟: 1>利用 myfunc.js 的 get_cmp 函式產生元件
                   2>尾碼1: 含欄位名稱 尾碼0: 單純元件
                        – get_cmp_txt1, get_cmp_chkgrp1, get_cmp_dt1
                        - get_cmp_txt0, get_cmp_chk0       , get_cmp_dt0, 

                        - get_cmp_lbl0, get_cmp_cal0, get_pick_btn0,

                   3>Runtime 設定元件屬性  - readOnly

                        cmp_EMPLYID.items[0].readOnly = true;

                        cmp_EMPLYID.items[0].fieldCls = "readonly";         

                   4>Runtime 設定元件屬性  - 必填(required)

                       cmp_PITM.items[0].fieldCls = "required";             

                   5>Runtime 設定欄位值 

                       cmp_EMPLYID.items[0].value = loginInfo.id;

                       cmp_EMPLYID_.value = loginInfo.name;               

1>V40A.js

// panel11  

    var cmp_AMMNO = get_cmp_txt1('AMM單號', 's_AMMNO', 80, 130);    

    var cmp_pick_AMMNO = get_pick_btn0('挑選AMM單號', 's_btn_AMMNO',

        '../api/V40AAPI/get_s_AMMNOPick?isComplete=0',

        ['AMMNO'], ['s_AMMNO'], J_pickstore_s_AMMNO, J_pickcolumns_s_AMMNO);

    cmp_AMMNO.items.push(cmp_pick_AMMNO);

    // SAPNO

    var cmp_SAPNO = get_cmp_txt1('工號', 's_SAPNO', 80, 130);    

    var cmp_WBSNO = get_cmp_txt1('WBS', 's_WBSNO', 80, 130);

    var cmp_pick_WBSNO = get_pick_btn0('挑選WBS', 's_btn_WBSNO',

        '../api/V40AAPI/get_s_WBSNOPick',

        ['WBSNO'], ['s_WBSNO'], J_pickstore_s_WBSNO, J_pickcolumns_s_WBSNO);    

    cmp_WBSNO.items.push(cmp_pick_WBSNO);

    var cmp_PN = get_cmp_txt1('件號', 's_PN', 80, 130);        

    // panel12

    var cmp_OGONOAF = get_cmp_txt1('拆檢提領編號', 's_OGONOAF', 100, 150);

    var cmp_pick_OGONOAF = get_pick_btn0('挑選拆檢提領編號', 's_btn_OGONOAF',

        '../api/V40AAPI/get_s_OGONOAFPick',

        ['OGONOAF'], ['s_OGONOAF'], J_pickstore_s_OGONOAF, J_pickcolumns_s_OGONOAF);

    cmp_OGONOAF.items.push(cmp_pick_OGONOAF);

    var cmp_NGONOAF = get_cmp_txt1('維修提領編號', 's_NGONOAF', 100, 150);

    var cmp_pick_NGONOAF = get_pick_btn0('挑選維修提領編號', 's_btn_NGONOAF',

        '../api/V40AAPI/get_s_NGONOAFPick',

        ['NGONOAF'], ['s_NGONOAF'], J_pickstore_s_NGONOAF, J_pickcolumns_s_NGONOAF);

    cmp_NGONOAF.items.push(cmp_pick_NGONOAF);

    var cmp_RPNOAF = get_cmp_txt1('拆檢交修編號', 's_RPNOAF', 100, 150);    

    var cmp_pick_RPNOAF = get_pick_btn0('挑選拆檢交修編號', 's_btn_RPNOAF',

        '../api/V40AAPI/get_s_RPNOAFPick',

        ['RPNOAF'], ['s_RPNOAF'], J_pickstore_s_RPNOAF, J_pickcolumns_s_RPNOAF);

    cmp_RPNOAF.items.push(cmp_pick_RPNOAF);

    var cmp_MRPNOAF = get_cmp_txt1('維修交修編號', 's_MRPNOAF', 100, 150);    

    var cmp_pick_MRPNOAF = get_pick_btn0('挑選拆檢交修編號', 's_btn_MRPNOAF',

        '../api/V40AAPI/get_s_MRPNOAFPick',

        ['MRPNOAF'], ['s_MRPNOAF'], J_pickstore_s_MRPNOAF, J_pickcolumns_s_MRPNOAF);

    cmp_MRPNOAF.items.push(cmp_pick_MRPNOAF);

    // panel13

    var cmp_SAPMAN = get_cmp_txt1('發工人員', 's_SAPMAN', 100, 80);

    var cmp_SAPMAN_ = get_cmp_cal0('s_SAPMAN_', 80);

    var cmp_pick_SAPMAN = get_pick_btn0('挑選發工人員', 's_btn_SAPMAN',

        '../api/V40AAPI/get_s_SAPMANPick',

        ['SAPMAN', 'EMPLYNM'], ['s_SAPMAN', 's_SAPMAN_'], J_pickstore_s_SAPMAN, J_pickcolumns_s_SAPMAN);    

    cmp_SAPMAN.items.push(cmp_SAPMAN_, cmp_pick_SAPMAN);    

    var cmp_FIXSN = get_cmp_txt1('維修件序號', 's_FIXSN', 100, 100);        

    var cmp_CREMPLYID = get_cmp_txt1('管制人員', 's_CREMPLYID', 100, 80);    

    var cmp_CREMPLYID_ =get_cmp_cal0('s_CREMPLYID_', 80);

    var cmp_pick_CREMPLYID = get_pick_btn0('挑選管制人員', 's_btn_CREMPLYID',

        '../api/V40AAPI/get_s_CREMPLYIDPick',

        ['CREMPLYID', 'EMPLYNM'], ['s_CREMPLYID', 's_CREMPLYID_'], J_pickstore_s_CREMPLYID, J_pickcolumns_s_CREMPLYID);

    cmp_CREMPLYID.items.push(cmp_CREMPLYID_, cmp_pick_CREMPLYID);    

    var cmp_FACWC = get_cmp_txt1('承修工場', 's_FACWC', 100, 100);

    var cmp_pick_FACWC = get_pick_btn0('挑選管制人員', 's_btn_FACWC',

        '../api/V40AAPI/get_s_FACWCPick',

        ['FACWC'], ['s_FACWC'], J_pickstore_s_FACWC, J_pickcolumns_s_FACWC);    

    cmp_FACWC.items.push(cmp_pick_FACWC);    

    //panel14 checkboxgroup

    var cmp_TYPEAF = get_cmp_chkgrp1('約別', 's_TYPEAF', 80);

    var cmp_TYPEAF1 = get_cmp_chk0('拆檢約', 's_TYPEAF', 1);

    var cmp_TYPEAF2 = get_cmp_chk0('維修約', 's_TYPEAF', 2);

    cmp_TYPEAF.items.push(cmp_TYPEAF1, cmp_TYPEAF2);

    //checkbox  設定 margin , 若無margin,則 '0 0 0 0'

    var cmp_isSAPSTAT = get_cmp_chk0('顯示SAP單況', 's_isSAPSTAT',80, 'Y','0 0 0 50');

    var cmp_SAPDT = get_cmp_dt1('發工日期', 's_SAPDT1', 80, 100);

    var cmp_SAPDT_lbl = get_cmp_lbl0(" ~ ", 20);

    var cmp_SAPDT2 = get_cmp_dt0('s_SAPDT2', 100);

    cmp_SAPDT.items.push(cmp_SAPDT_lbl, cmp_SAPDT2);    

    //篩選條件畫面

    var Query = new Ext.FormPanel({

        id: 's_form',

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

        fieldDefaults: { labelAlign: 'right' },

        defaults: { margin: { top: 3 } },

        items: [

            {

                xtype: 'panel',  id: 'panel1',  layout: { type: 'hbox', align: 'stretch' },   flex: 14,  border: 0,

                items: [

                    {

                        xtype: 'panel',  id: 'panel11',  layout: { type: 'vbox', align: 'stretch' }, flex: 25,   border: 0,

                        items: [cmp_AMMNO, cmp_SAPNO, cmp_WBSNO, cmp_PN, ],

                    },  // end of panel11

                    {

                        xtype: 'panel',  id: 'panel12', layout: { type: 'vbox', align: 'stretch' }, flex: 30, border: 0,

                        items: [cmp_OGONOAF, cmp_NGONOAF,  cmp_RPNOAF, cmp_MRPNOAF,],                        

                    },   // end of panel12 , flex:16                    

                    {

                        xtype: 'panel',  id: 'panel13', layout: { type: 'vbox', align: 'stretch' },  flex: 30, border: 0,

                        items: [cmp_SAPMAN, cmp_FIXSN, cmp_CREMPLYID, cmp_FACWC,],

                    },   // end of panel13 , flex:16              

                    {

                        xtype: 'panel', id: 'panel14', layout: { type: 'vbox', align: 'stretch' }, flex: 30, border: 0,

                        items: [cmp_isSAPSTAT, cmp_TYPEAF,  cmp_SAPDT],

                    },   // end of panel13 , flex:16                               

                ]

            },  // end of panel1            

            {

                //xtype: 'toolbar',

                xtype: 'panel',

                id: 'panel2',

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

                flex: 1,

                border: 0,

                items: [

                    {

                        xtype: 'button',

                        id: 'btn_Show',

                        flex: 2,

                        border: 1,

                        text: '資料顯示',

                        iconCls: 'icon-search',

                        handler: function () {

                            // 更新 STP欄位值                            

                            var np = s_JSON('s_form'); //TMFunction.js, 組合form上的查詢條件為json參數傳遞                                                       

                            np["s_isSTATFM"] = Ext.getCmp('s_isSTATFM').getValue();

                            np["s_isMB1A"] = Ext.getCmp('s_isMB1A').getValue();

                            //console.log('1 gridstore: ', gridstore);

                            var gridstore = Ext.getCmp('grid_Single').store;

                            //console.log('2  gridstore: ', gridstore);

                            //gridstore.getProxy().url = '../api/V40AAPI/getGridData_M?par_paging=false';

                            gridstore.getProxy().url = '../api/V40AAPI/getGridData_M';

                            gridstore.getProxy().extraParams = np;　//分頁OK,篩選條件OK

                            //var Tmp_cnt = 0;

                            ////資料 - 全部顯示

                            //gridstore.on('load', function () {

                            //    console.log("onload  gridstore.data.length:", gridstore.data.length);

                            //    Ext.getCmp('grid_Single').store.pageSize = gridstore.data.length;

                            //    console.log("Ext.getCmp(grid_ptb): ", Ext.getCmp('grid_ptb'));                                                                

                            //    console.log(" 0 Ext.getCmp(grid_ptb).afterPageText: ", Ext.getCmp('grid_ptb').afterPageText);                                                                                                

                            //    Ext.getCmp('grid_ptb').updateInfo();                                

                            //    Tmp_cnt = Tmp_cnt + 1;

                            //    if (Tmp_cnt<=1)

                            //       Ext.getCmp('grid_ptb').moveLast();

                            //})

                            Ext.getCmp('grid_Single').reloadGridData();

                            //將目前挑選 arr 清空;

                            resetCbxArr();

                            resetCbxArr1();

                            //console.log("gridstore.getCount():", gridstore.getCount());

                            //if (gridstore.getCount() == 0) {

                            //    mywarnalert("無符合條件的資料");

                            //}

                        }

                    },  // end of 顯示資料

                    {

                        xtype: 'button',

                        id: 'btn_clear',

                        flex: 2,

                        border: 1,

                        text: '清除條件',

                        iconCls: 'icon-clear',

                        handler: function () {

                            var f = Query.getForm();

                            f.reset();

                        }

                    },  // end of 清除條件                    

                    { xtype: 'label', id: 'label151', flex: 2, border: 0, text: '', },  // end of label                    

                ]  // end of items of [顯示資料][清除條件]

            }   // end of panel2  //顯示按鈕

        ]  // end of  items of Query

    });

    Ext.getCmp('grid_Single').addDocked({

        dockedItems: [{

            items: [Query]

        }]

    });

3>設定 readOnly 屬性

  var cmp_EMPLYID = get_cmp_txt1('異動人員', 'sub_EMPLYID', 80, 100);

    var cmp_EMPLYID_ = get_cmp_txt0( 'sub_EMPLYID_', 100);

    cmp_EMPLYID.items.push(cmp_EMPLYID_);

    //readOnly: true, fieldCls: "readonly"

    cmp_EMPLYID.items[0].readOnly = true;

    cmp_EMPLYID.items[0].fieldCls = "readonly";

    cmp_EMPLYID.items[0].value = loginInfo.id;

    cmp_EMPLYID_.value = loginInfo.name;               

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" }