2023年4月10日 星期一

V80204B - F16V報工現況匯出– checkboxgroup 新增checkbox - 多行機號挑選 - [F16V報工現況匯出]鈕

 目的: V80204B – checkboxgroup 新增checkbox – 將目前 checkboxgroup欄位值(Array),傳送至後端

處理說明:  1>必需先  CreateObject  of  checkbox 才可加入 checkboxgroup
                     //var tempObj = new Ext.form.Checkbox({
                       var tempObj = Ext.create('Ext.form.Checkbox',{
                                                           boxLabel: 'checkbox1',
                                                           name: 'rb',
                                                           inputValue: 'checkbox1',});
                  2>將 obj 加入 checkboxgroup , 並更新 Layout , 才會反應最新的 checkboxs 內容
                      Ext.getCmp('chkboxgrp1').items.add(tempObj);
                      Ext.getCmp('chkboxgrp1').updateLayout();    //更新  checkboxgroup
                  3> 取得目前 checkboxgroup 的勾選項目
                        var selectedValues = Ext.getCmp('chkboxgrp2').getChecked();
                           // Returns an Array of all checkboxes in the container which are currently checked
                           for (var i = 0; i < selectedValues.length; i++) {
                                   Ext.getCmp('chkboxgrp2').remove(selectedValues[i]);
                                    var tempObj = new Ext.form.Checkbox(selectedValues[i]);  //必需先 create ,才可加入
                                    Ext.getCmp('chkboxgrp1').items.add(tempObj);
                                }

                        



1>*.js   - V80204B.js
     1>>checkboxgroup1 加入   checkbox
{
xtype: 'button', flex: 1, text: "+1",
handler: function () {
var tempObj = Ext.create('Ext.form.Checkbox',{
boxLabel: 'checkbox1',
name: 'rb',
inputValue: 'checkbox1',
// id: Tmp_ACNO_id,
});
Ext.getCmp('chkboxgrp1').items.add(tempObj);
Ext.getCmp('chkboxgrp1').updateLayout();
}
},// end of 虛 space

   2>>checkboxgroup1 .勾選s 右移至  checkboxgroup2
   {//往右移
                        xtype: 'button',
                            id: 'btn_move1',
                            text: '往右',
                            iconCls: 'icon-right',
                        flex:1,
                        handler: function () {
                            var selectedSuccessValues = Ext.getCmp('chkboxgrp1').getChecked();
                            console.log(selectedSuccessValues);
                            for (var i = 0; i < selectedSuccessValues.length; i++) {
                                Ext.getCmp('chkboxgrp1').remove(selectedSuccessValues[i]);
                                var tempObj = new Ext.form.Checkbox(selectedSuccessValues[i]);
                                Ext.getCmp('chkboxgrp2').items.add(tempObj);
                            }

                            Ext.getCmp('chkboxgrp1').updateLayout();
                            Ext.getCmp('chkboxgrp2').updateLayout();

                        } 
                        },// end of 往右移



V120502 - Grid 的欄位允許編輯 - grid -欄位編輯

目的 : V120502 Grid的欄位允許編輯 

PS:  ExtJs 的Grid介紹與常用功能  - 

網址 :  https://wadehuanglearning.blogspot.com/2017/01/ext.html

處理說明: 1>Ext.Grid 必須透過官方套件才可以編輯內容,可以在 plugins 屬性載入                                                 Ext.grid.plugin.CellEditing 或 Ext.grid.plugin.RowEditing 便可對 Grid 資料進行編輯。   

                 2>columns 中,允許編輯的欄位,加入
             { header: "件號", dataIndex: "PN", width: 150, TMType: "string",editor: 'textfield',},
             { header: "數量", dataIndex: "QTY", width: 50, TMType: "string",
                editor: {   xtype: 'textfield',  
                                 allowBlank: false //不允許空白},
              },]




1>*.js  - grid 欄位允許編輯

  //包籤列印 sub_Grid
    var sub_Grid = Ext.create('TMGrid', {
        grid_id: 'sub_Grid',
        columns: sub_Columns,
        autoScroll: true,
        flex: 1,        
        store: Ext.create('gridstore', { model: sub_Fields }),
        plugins: [
            Ext.create('Ext.grid.plugin.RowEditing', {   // 加入官方 CellEditing 差件
                clicksToEdit: 1                           // 按一下進行編輯,預設為按兩下
            })
        ],
    });

var sub_Columns = [
        { header: "工號", dataIndex: "SAPNO", width: 150, TMType: "string" },
        { header: "件號", dataIndex: "PN", width: 150, TMType: "string",//editor: 'textfield',},
        {
            header: "數量", dataIndex: "QTY", width: 50, TMType: "string",            
            editor: {
                xtype: 'textfield',
                allowBlank: false   //不允許空白
            },
        },
        { header: "EO", dataIndex: "EOCND", width: 150, TMType: "string" },
        { header: "備註", dataIndex: "RMK", width: 200, TMType: "string", },
    ]







ExtJs 的Grid介紹與常用功能 - store -proxy() - reader - V120502 - Grid欄位修改

 目的: ExtJs 的Grid介紹與常用功能  

-   網址 :  https://wadehuanglearning.blogspot.com/2017/01/ext.html

處理說明: 1>Grid 主要分成兩部份:
                      1>>一個顯示欄位標題的Columns。
                     2>>一個儲存資料的Store 元件。
                 2>Columns 欄位定義:
                     1>>Columns用來Grid 的定義表格欄位,具有header與dataIndex屬性的物件陣列。 
                      2>>利用header 屬性來決定Grid 的欄位名稱。
                      3>>利用dataIndex 屬性來與Store 的資料相配對。
                      4>>Grid 的欄位顯示順序完全由此Columns 加入的順序決定。
                 3>Store 介紹: 用來存取表格的原始資料,
                      1>>可以是近端的二維陣列(Array ),或是遠端的JSON 或XML 資料。
                      2>>利用fields 屬性來與columns 欄位相配對。

                      3>>reader 用來解析原始資料,如原始資料格式為json,reader的type 就填json
                                     ,type 可以是 array, json, xml
                      5>>proxy : 資料來源 , type: 'memory',   //store.data  
                                                             type: 'ajax'       ,   //遠端資料庫 url ,np

一.簡單範例 - store資料來源: data(local)  , proxy.type:'memory'



var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone'],  //利用fields 與Columns 的dataIndex 做配對。
    data: {'items': [             //原始資料
            {'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224"},
            {'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234"},
            {'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244"},
            {'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254"}
        ]},
    proxy: {
        type: 'memory',    //若 store 資料來源為遠端,則proxy.type:'ajax' , url:'xx/xx/', getMethod: function () { return 'POST'; },
                           //若 store 資料來源為Data,則proxy.type:'memory' 
        reader: {
            type: 'json',  //reader用來解析原始資料,如原始資料格式為json,reader 的type 就填json 。 #可以是 array, json, xml
            root: 'items'  //告訴reader 要選擇data 中哪一個含有raw Data 的Array 的物件。
        }
    }
});

var columnModel = [     ////建立ColumnMode
    {text: '名稱', dataIndex: 'name'},
    {text: '電子信箱', dataIndex: 'email', flex: 1},
    {text: '電話', dataIndex: 'phone'}
];

Ext.create('Ext.grid.Panel', {    // 新增Grid
    title: 'Grid 範例',
    store: store,                 //將預先寫好的store 填入grid
    columns: columnModel,         //將預先寫好的columns 填入grid
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});




二. 產生子視窗 - 含Grid  - 利用 Template , 遠端資料庫


1>*.js
//產生子視窗 - 含 Grid
function PrnPackBtn_click() {
    var sub_Columns = [
        { header: "工號", dataIndex: "SAPNO", width: 150, TMType: "string" },
        { header: "件號", dataIndex: "PN", width: 150, TMType: "string",//editor: 'textfield',},
        {
            header: "數量", dataIndex: "QTY", width: 50, TMType: "string",            
            editor: {
                xtype: 'textfield',
                allowBlank: false   //不允許空白
            },
        },
        { header: "EO", dataIndex: "EOCND", width: 150, TMType: "string" },
        { header: "備註", dataIndex: "RMK", width: 200, TMType: "string", },
    ]

    var sub_Fields = [
        { name: "SAPNO" },
        { name: "PN" },
        { name: "QTY" },
        { name: "EOCND" },
        { name: "RMK" },
    ];
    //包籤列印 sub_Grid
    var sub_Grid = Ext.create('TMGrid', {
        grid_id: 'sub_Grid',
        columns: sub_Columns,
        autoScroll: true,
        flex: 1,        
        store: Ext.create('gridstore', { model: sub_Fields }),
        plugins: [
            Ext.create('Ext.grid.plugin.RowEditing', {   // 加入官方 CellEditing 差件
                clicksToEdit: 1                           // 按一下進行編輯,預設為按兩下
            })
        ],
    });

    //將子視窗 store 不分頁,  PageToolBar.Visible 設為 false , 不分頁
    Ext.getCmp('sub_Grid_ptb').setVisible(false);

2>TMGrid.js  : 定義 TMGrid   &  gridstore
Ext.define('gridstore', {
    extend: 'Ext.data.Store',
    pageSize: 30,
    //model: gridmodel,
    autoLoad: false,
    remoteFilter: true,
    //remoteSort: true,
    proxy: {
        type: "ajax",
        url: '',
        getMethod: function () { return 'POST'; },
        reader: {
            type: "json",
            root: 'T1',
            totalProperty: 'T1C[0].TOTAL'
        }
    },
    sorters: [],
    constructor: function (config) {
        Ext.apply(this, config); //將gridstore本身的屬性與input config結合
        if (typeof config.model != "undefined") {
            J_gridmodel = config.model;
        }
        Ext.define('gridmodel', {
            extend: 'Ext.data.Model',
            fields: J_gridmodel
        });
        this.model = gridmodel;
        this.callParent(config);
        this.getProxy().setModel(gridmodel, true);
    }
});





2023年4月5日 星期三

V80204B - 按鈕 icon - 圖示的設定 - 左移,右移

 目的: V80204B - 按鈕 icon - 圖示的設定

處理說明:  1>設定Button的 iconCls 屬性,     iconCls: 'icon-right',
                 2>實際讀取: ext-patch.css 的對應 icon設定(icon-right)
                 3>.icon-right {
                                         background-image: url('../images/icons/right.png');
                                       }  



2023年3月28日 星期二

AMM系統無法自動更新至最新版本 - 控制台移除應用程式,重新安裝即可

 目的: AMM系統無法自動更新至最新版本的處理說明

處理說明: 1>於控制台,刪除應用程式[AMM系統]

                  2>重新安裝[AMM系統]即可  - 於 TLS入口網站下載 [AMM系統],重新安裝即可






V20301 - [編輯]時, 顯示欄位挑選按鈕 - 按鈕顯示 , 顯示按鈕

 目的: 按[編輯]鈕時, 顯示欄位[挑選]按鈕

處理說明: 1>showFormButton('myform'); //20230329

                   2>showFormButton('myform', ['btn_DEPID']);  //顯示部份欄位按鈕


1>*.js
 //修改
    Ext.getCmp('btn_edit').on("click", function () {
        setFieldsCls('myform', [], ['TMCPCTRLNO', 'EFF'], ['DEPID', 'FILENO', 'GROP', 'CUSTODIAN', 'ENGINEER', 'DUEDT']);
        showFormButton('myform'); //20230329
        //showFormButton('myform', ['btn_DEPID']);
      });



V80204D - 日期區間 – 預設值: 一年前

目的: 畫面的日期預設為去年的今日(=今日-365)

處理說明:  1>*.js  以 ms 記錄日期(1天 = 1000*60*60*24)
                   2> var Tmp_DATA_DATE2 = DatetoStr(now, "Y/m/d");
                         var Tmp_DATA_DATE1 = DatetoStr((now - 365*1000 * 60 * 60 * 24), "Y/m/d");
                         Ext.getCmp("sub4_DATA_DATE1").setValue(Tmp_DATA_DATE1);
                         Ext.getCmp("sub4_DATA_DATE2").setValue(Tmp_DATA_DATE2);


1>*.js

    var Tmp_DATA_DATE2 = DatetoStr(now, "Y/m/d");
    var Tmp_DATA_DATE1 = DatetoStr((now - 365*1000 * 60 * 60 * 24), "Y/m/d");
    console.log("Tmp_DATA_DATE1:", Tmp_DATA_DATE1);
    Ext.getCmp("sub4_DATA_DATE1").setValue(Tmp_DATA_DATE1);
    Ext.getCmp("sub4_DATA_DATE2").setValue(Tmp_DATA_DATE2);