V20304A – [工時提列] – Grid.欄位 設為唯讀,不可修改 , Grid欄位設為可編輯

 目的: V20304A – [工時提列] – 若工時已登錄,則Grid 設為唯讀,不可修改

處理說明:

1.Grid 欄位,允許編輯
    {
      header: "備註", dataIndex: "REMARK", width: 250, sortable: false, TMType: "string",
      editor: { xtype: 'textfield', allowBlank: true }, //允許空白
    },

   

2>Grid 欄位的編輯模式

 var sub_Grid = Ext.create('TMGrid', {
            grid_id: 'sub_Grid',
            columns: sub_Columns,
            //autoScroll: true,
            flex: 1,
            store: Ext.create('gridstore', { model: sub_model }),
            plugins: [                
                Ext.create('Ext.grid.plugin.CellEditing', { // 不會出現[Update][Cancel]鈕, 直接編輯 
                    clicksToEdit: 1,                           // 按一下進行編輯，預設為按兩下
                    clicksToMoveEditor: 1,   //在編輯模式下切換編輯另一行的行為1表示點選一就切換；                                                                  //2表示點2下才切換。
                })],
            //})],

        }); 

3>Grid 欄位唯讀

  Ext.getCmp("sub_Grid").on("beforeedit", function (editor, context) {
            return false; // 禁止編輯
        });        

1>V20304A_JSON.js

var sub_Columns = [

    { header: "", xtype: "rownumberer", width: 40, align: "center", sortable: false },

    //{ header: "系統件單號", dataIndex: "FMNO", width: 130, sortable: false, TMType: "string" },

    { header: "AMM項次", dataIndex: "AMINO", width: 80, sortable: false, TMType: "string" },

    //{ header: "流水序號", dataIndex: "ITM", width: 50, sortable: false, TMType: "string" },

    { header: "項次", dataIndex: "ITMNO", width: 70, sortable: false, TMType: "string" },

    { header: "工作項目", dataIndex: "WKDESC", width: 150, sortable: false, TMType: "string" },

    {

        header: "標準工時", dataIndex: "STDHR", width: 70, sortable: false, align: "right", TMType: "float",

        renderer: Ext.util.Format.numberRenderer('0,000.00')

    },

    {

        header: "需求工時", dataIndex: "RQHR", width: 70, sortable: false, align: "right", TMType: "float",

        renderer: Ext.util.Format.numberRenderer('0,000.00'),

        editor: { xtype: 'numberfield', allowBlank: true }, //允許空白        

    },

    {

        header: "備註", dataIndex: "REMARK", width: 250, sortable: false, TMType: "string",

        editor: { xtype: 'textfield', allowBlank: true }, //允許空白

        },

    //{ header: "件號專用表單編號", dataIndex: "PNSHTNO", width: 500, sortable: false, TMType: "string" }

];

2>V20304.js

1>> Grid 欄位可編輯
 var sub_Grid = Ext.create('TMGrid', {
            grid_id: 'sub_Grid',
            columns: sub_Columns,
            //autoScroll: true,
            flex: 1,
            store: Ext.create('gridstore', { model: sub_model }),
            plugins: [                
                Ext.create('Ext.grid.plugin.CellEditing', { // 不會出現[Update][Cancel]鈕, 直接編輯 
                    clicksToEdit: 1,                           // 按一下進行編輯，預設為按兩下
                    clicksToMoveEditor: 1,   //在編輯模式下切換編輯另一行的行為1表示點選一就切換；                                                                  //2表示點2下才切換。
                })],
            //})],
        });
        
2>> Grid 欄位唯讀, 不可編輯
//2025/02/21 , OPHR='N',仍列出工時,以便使用者查詢,但唯讀,不可修改
    if (par_OPHR == "N") {
        Ext.getCmp("sub_V20304A_OkBtn").setVisible(false);        
         //Ext.getCmp("sub_Grid").plugins = [];
        //var grid = new Ext.grid.EditorGridPanel({
        Ext.getCmp("sub_Grid").on("beforeedit", function (editor, context) {
            return false; // 禁止編輯
        });        
    }