WebDesign 心得綜整

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);

2023年4月10日星期一

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

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

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

2023年4月5日星期三

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

2023年3月28日星期二

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

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

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

WebDesign 心得綜整

追蹤者

網誌存檔

關於我自己

2023年4月10日 星期一

2023年4月5日 星期三

2023年3月28日 星期二

追蹤者

網誌存檔

關於我自己

2023年4月10日星期一

2023年4月5日星期三

2023年3月28日星期二