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