顯示具有 勾選 標籤的文章。 顯示所有文章
顯示具有 勾選 標籤的文章。 顯示所有文章

2023年11月8日 星期三

V80203 – checkbox –勾選[V]已完工,則 [ ]未完工 不勾選 - onChangeEvent - V80202 -[V]TP工單,則[ ]非 TP工單不勾選

目的 : V80203 – checkbox –勾選[V]已完工, [ ]未完工  -–勾選[V]未完工, [ ]已完工 

           V80202 -[V]TP工單,則[ ]非 TP工單不勾選

處理說明: 1>get_cmp_xxx - s_chk_AMMSTS Object - 為一般Objext - 沒有 Ext onchange屬性
                      var cmp_chk_AMMSTS1 = get_cmp_chk0('已完工', 's_chk_AMMSTS', 50, '1');
                      --> Object  cmp_chk_AMMSTS1  - 為一般Object,並沒有 onchange event 的屬性
    
              2>get_cmp_XXX --> 加入 Query(Ext.FormPanel) 後, 才有 Ext 的各種屬性(onchange/.. )
                  var Query = new Ext.FormPanel({
                  id: 's_form',
                  items: [
                 {
                xtype: 'panel', id: 'panel1', layout: { type: 'hbox', align: 'stretch' }, flex: 14, border: 0,
                items: [                  
                   {
                        xtype: 'panel', id: 'panel15', layout: { type: 'vbox', align: 'stretch' }, flex: 15, border: 0,
                        items: [cmp_chk_AMMSTS, cmp_ISROOT, cmp_ISBOMIN, cmp_ISWAITNSN],
                    },   // end of panel15 , flex:16                        

           3> [V]已完工 [ ]未完工的 true/false 控制
    Ext.getCmp("s_chk_AMMSTS").items.items[0].on('change', function (me, newValue, oldValue, eOpts) {
        if (newValue) {
            Ext.getCmp("s_chk_AMMSTS").items.items[1].setValue(false);
        }
    }
    );  // end of  cmp_chk_AMMSTS.items[0].on("change"
    Ext.getCmp("s_chk_AMMSTS").items.items[1].on('change', function (me, newValue, oldValue, eOpts) {
        if (newValue) {
            Ext.getCmp("s_chk_AMMSTS").items.items[0].setValue(false);
        }
    }
    );  // end of  cmp_chk_AMMSTS.items[0].on("change"



1>*.js
    //單況: 已完工/未完工
    var cmp_chk_AMMSTS = get_cmp_chkgrp1('單況', 's_chk_AMMSTS', 50);    
    var cmp_chk_AMMSTS1 = get_cmp_chk0('已完工', 's_chk_AMMSTS', 50, '1');
    var cmp_chk_AMMSTS2 = get_cmp_chk0('未完工', 's_chk_AMMSTS', 50, '2');
    cmp_chk_AMMSTS.items.push(cmp_chk_AMMSTS1, cmp_chk_AMMSTS2);
    cmp_chk_AMMSTS1.checked = true;    

  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_EOECN, cmp_ACNO,cmp_AMMNO, cmp_AMMSTS, cmp_PN1, cmp_EM_SN,],
                    },  // end of panel11
                    {
                        xtype: 'panel', id: 'panel12', layout: { type: 'vbox', align: 'stretch' }, flex: 25, border: 0,
                        items: [cmp_RMK, cmp_PROJID, cmp_SAPNO, cmp_SAPMAN, cmp_STARTVAL, cmp_CHARG,],
                    },   // end of panel12 , flex:16                    
                    {
                        xtype: 'panel', id: 'panel13', layout: { type: 'vbox', align: 'stretch' }, flex: 25, border: 0,
                        items: [cmp_PN, cmp_PROCWC, cmp_MKDT,  cmp_SROTP, cmp_FACWC,],
                    },   // end of panel13 , flex:16              
                    {
                        xtype: 'panel', id: 'panel14', layout: { type: 'vbox', align: 'stretch' }, flex: 30, border: 0,
                        items: [cmp_WBSNO, cmp_ACAREA, cmp_LWA, cmp_MK,cmp_SAPDT1,],
                    },   // end of panel14 , flex:16                               
                    {
                        xtype: 'panel', id: 'panel15', layout: { type: 'vbox', align: 'stretch' }, flex: 15, border: 0,
                        items: [cmp_chk_AMMSTS, cmp_ISROOT, cmp_ISBOMIN, cmp_ISWAITNSN],
                    },   // end of panel15 , flex:16                            

    console.log("cmp_chk_AMMSTS2:", cmp_chk_AMMSTS2);
    console.log("Ext.getCmp('s_chk_AMMSTS').items.items[1]", Ext.getCmp('s_chk_AMMSTS').items.items[1]);
    Ext.getCmp("s_chk_AMMSTS").items.items[0].on('change', function (me, newValue, oldValue, eOpts) {
        if (newValue) {
            Ext.getCmp("s_chk_AMMSTS").items.items[1].setValue(false);
        }
    }
    );  // end of  cmp_chk_AMMSTS.items[0].on("change"
    Ext.getCmp("s_chk_AMMSTS").items.items[1].on('change', function (me, newValue, oldValue, eOpts) {
        if (newValue) {
            Ext.getCmp("s_chk_AMMSTS").items.items[0].setValue(false);
        }
    }
    );  // end of  cmp_chk_AMMSTS.items[0].on("change"




1>*.js
   //若按[TP工單],則 [非TP工單].checked=false;
    Ext.getCmp("s_chk_TP").items.items[0].on('change', function (me, newValue, oldValue, eOpts) {
        if (newValue) {
            Ext.getCmp("s_chk_TP").items.items[1].setValue(false);
        }
    }
    );  // end of  cmp_chk_TP.items[0].on("change"
    Ext.getCmp("s_chk_TP").items.items[1].on('change', function (me, newValue, oldValue, eOpts) {
        if (newValue) {
            Ext.getCmp("s_chk_TP").items.items[0].setValue(false);
        }
    }

2023年5月31日 星期三

V120202 – 勾選 checkbox , 分頁時可以保留勾選

 目的: V120202 – 勾選 checkbox , 分頁時可以保留勾選 

處理說明: 1>*_json.js  利用 cbxAry 記錄目前勾選資料的 PK(APNO)
                       var cbxArr = []; //記錄目前 PK Array ,(PK:APNO)
                       var cbxIdx = -1; //記錄目前 cbxAry 的 index
                        var curPage = 0; //記錄目前 Page (store)
                  2>*_json.js , columns 新增  CHECK欄位, onClick 會觸發 renderer event ,
                       若原本未勾選, 則變勾選, 若原本勾選,則變未勾選
                       var J_columns = [{
               header: "勾選", dataIndex: "CHECK", width: 40, xtype: 'checkcolumn',
        renderer: function (value, metadata, record, rowIndex, colIndex, store) {
                                :
                                 var i = cbxArr.indexOf(record.get('APNO'));
if ((value === 'Y') || (value === true)) {
if (i < 0) {
chkd = 'checked';
cbxIdx++;
cbxArr[cbxIdx] = record.get('APNO');
}
else {
chkd = '';
cbxArr[i] = '';
}
}
               3>*.js  , 若 store.onload 則記錄目前的 頁次(store.currentPage),且顯示 CHECK是否勾選
                         curPage=gridstore.currentPage;   
                         var idx = cbxArr.indexOf(rec.data['APNO']);
                          if (idx >= 0) {  rec.data['CHECK'] = true; }
                          else {  rec.data['CHECK'] = false; }






2022年9月21日 星期三

V20301 – [刪除]鈕, - checkboxModel -刪除勾選的多筆資料 - 覆蓋原本event的處理 - 移除目前 store 資料

 目的:  [刪除]鈕,  -刪除勾選的多筆資料 - checkboxModel 

處理說明:  1>將 grid_Single 換成 checkboxModel class

                   2> 重寫 btn_del.onclick 處理 , 即  beforedel() 傳回 false, 不處理 parent.del 函式

                   3> 依勾選的資料, 一筆一筆從資料庫刪除 , 資料庫刪除後, 再刪除畫面的資料


1>*.js
 1>>置換成 CheckboxModel  class
    //加入 checkbox Model 
    Ext.getCmp('grid_Single').destroy(); //20220905
    var grid_Single = Ext.create('grid_Single', {
        id: 'grid_Single',
        resizable: true,
        selModel: Ext.create('Ext.selection.CheckboxModel', {
            selectionMode: 'SIMPLE',
            listeners: {
                /*selectionchange: function (cb, selected, eOpts) {
                    //view.selModel.getSelection()
                },*/
                RowMouseDown: function (view, record, item, index, e) {
                    var me = this;
                    if (index !== -1) {

                        if (!me.allowRightMouseSelection(e)) {
                            return;
                        }

                        if (e.shiftKey && me.lastFocused) {
                            me.selectRange(me.lastFocused, record, e.ctrlKey);
                            me.processSelection(view, record, item, index, e);
                        }

                        if (!me.isSelected(record)) {
                            me.mousedownAction = true;
                            me.processSelection(view, record, item, index, e);
                        } else {
                            me.mousedownAction = false;
                        }
                    }

                }
            }
        })
    });
    Ext.getCmp('tab2').add(grid_Single); //將grid加入到tab裡面
    Ext.getCmp('tab2').updateLayout();

 2>>重寫 btn_del.onclick 處理 , 即  beforedel() 傳回 false, 不處理 parent.del 函式

//20220922  覆蓋原本的 [刪除]鈕 處理,  自行處理
    //不執行 paretn.delete , beforeDel 傳回 false
    Ext.getCmp('btn_del').beforeDel = function () {
        return false;
    }

    var buttonModel = Ext.create('G_buttonModel');   //取得 目前的畫面狀態(1,2,3 : 新增/編輯/瀏覽)

    Ext.getCmp("btn_del").on('click', function (me,e,eOpts) {    
      //已置換 grid_store , 不需 .getView().
     //var cur_recs = Ext.getCmp('grid_Single').getView().getSelectionModel().getSelection(); 
        var cur_recs = Ext.getCmp('grid_Single').getSelectionModel().getSelection();
        var cur_rec;
        if (cur_recs.length == 0)
        {
            buttonModel.modelType = 0;
            mywarnalert('請先勾選要刪除的資料!!');
        }
        else {
            me.delMessage = "確定刪除勾選的資料嗎?";
            Ext.Msg.confirm('提醒', me.delMessage, callBackFunc);
            function callBackFunc(id) {
                if (id == 'yes') {
                    console.log("cur_recs.length:", cur_recs.length);
                    var gridstore = Ext.getCmp('grid_Single').store;                        
                    for (let i = 0; i <= cur_recs.length - 1; i++) {
                        console.log("i:", i);
           Ext.getCmp('grid_Single').getSelectionModel().select(cur_recs[i]); //grid select指向所選的資料
                        if (Ext.getCmp('btn_del').afterDel() == false) {
                            return;
                        }                                                
                    } //  end of for (let i=0,)
                    //資料庫均刪除完成後, 才由 gridstore 移除資料
                    for (let i = 0; i <= cur_recs.length - 1; i++) {
                        gridstore.remove(cur_recs[i]); //畫面上隱藏刪除列                     
                    } //  end of for (let i=0,)
                    Ext.getCmp('grid_Single').getView().refresh();
                    buttonModel.modelType = 0;
                }  // end    if (id == 'yes')             
            }  // end of callbackfunc
        }  //else { of if length>0            
    } ) // end of click function