WebDesign 心得綜整

2026年5月27日星期三

V1060302-實體定更定檢清單 – 編輯欄位(AMM_CHKCHG_ASN)+CaluField(AMM_CHKCHG) -[存檔]錯誤

目的:V1060302-實體定更定檢清單 – 單檔維護 - 編輯欄位 - SQL多個Table
(AMM_CHKCHG_ASN)+CaluField(AMM_CHKCHG)
--> SQL 不用 CaluField, SQL用FROM AMM_CHKCHG_ASN A ,AMM_CHKCHG B
-->[編輯][存檔]時,更新的欄位不正確(Ex: AMM_CHKCHG.PTMVAL1,PTMVAL2)

處理說明: 1>Template.SQL 必需單一Table(AMM_CHKCHG_ASN),

將參考顯示欄位(AMM_CHKCHG)設為 CaluField

2>若 SQL 多個 Table(AMM_CHKCHG_ASN ,AMM_CHKCHG ) 時,

當[存檔]時,抓 Update 欄位會有問題

2026年5月26日星期二

V1060302 –實體定更定檢清單 - Item 挑選後 – change event 沒觸發

目的: V1060302 –實體定更定檢清單 - Item 挑選後 – change event 沒觸發

--> Item挑選後,顯示該Item的定更定檢資料

處理說明: 1>[Item] 挑選欄位值, 挑選後未觸發 change event

--> var win = EditPickx('ITEM', '../api/V1060302API/get_ITEMPick', ['ITEM'],

['ITEM'], J_pickstore_ITEM, J_pickcolumns_ITEM,true,false);

win.show();

--> EditPickx 預設會 Disable change event

2>呼叫 EditPickx 時,將 isSuspendEvent 設為 false

--> 不 Disable change event

1>*.js
//ITEM
Ext.getCmp('btn_ITEM').on("click", function () {
var win = EditPickx('ITEM', '../api/V1060302API/get_ITEMPick', ['ITEM'], ['ITEM'],

J_pickstore_ITEM, J_pickcolumns_ITEM,true,false);
win.show();
});
--> 將 EditPickx 的 isSuspendEvent 設為 false , 不 suspend change event

var Tmp_ITEM = Ext.getCmp("ITEM");

console.log("Tmp_ITEM:", Tmp_ITEM);

//若change 沒觸發 ,必需將 EditPickx 的 isSuspendEvent =false,

Ext.getCmp("ITEM").on('change', function (me, newValue, oldValue, eOpts) {

//Ext.getCmp("ITEM").on('blur', function (me, eOpts) {

var Tmp_PROJID = Ext.getCmp("PROJID").getValue();

var Tmp_TYPE = Ext.getCmp("TYPE").getValue();

var Tmp_ITEM = Ext.getCmp("ITEM").getValue();

if ((!checkisnull(Tmp_PROJID)) && (!checkisnull(Tmp_TYPE)) && (!checkisnull(Tmp_ITEM)))

Show_AMM_CHKCHG_Data(Tmp_PROJID, Tmp_TYPE, Tmp_ITEM);

});

2026年5月25日星期一

V1060301- 專案定更定檢件清單 - 單檔維護(新增/修改/刪除/挎貝) - 下載匯入格式/匯入/匯出

目的: V1060301- 專案定更定檢件清單 - 單檔維護(新增/修改/刪除/挎貝) - 匯入/匯出

處理說明: 1>單檔維護(新增/修改/刪除/挎貝)
var S_DB = Ext.create('S_DB', {
apiName: 'V1060301'
});

呼叫 ..\V1060301API\Update() , Insert()

2>編輯欄位挑選:

{

xtype: "fieldcontainer", fieldLabel: "分類", labelWidth: 160, layout: "hbox", items: [

{ id: "TYPE", name: "TYPE", xtype: "textfield", width: 30, padding: "0 4 0 0", maxLength: 1 },

{ id: "TYPE_", name: "TYPE_", xtype: "textfield", width: 60, fieldCls: "calculate", readOnly: true, padding: "0 4 0 0" },

{

id: "btn_TYPE", name: "btn_TYPE", xtype: "button", text: "...",

//handler: function () {

// var win = EditPickx('挑選分類', '../api/V1060301API/get_TYPEPick',

// ['TYPE', 'DESCPT'], ['TYPE', 'TYPE_'],

// J_pickstore_TYPE, J_pickcolumns_TYPE);

// win.show();

//}

}

], labelStyle: "font-size:11pt;"

//分類 - on 不可用 handler -屬性名稱, click 才是event 名稱

Ext.getCmp('btn_TYPE').on("click", function () {

var win = EditPickx('分類', '../api/V1060301API/get_TYPEPick', ['TYPE', 'DESCPT'], ['TYPE', 'TYPE_'], J_pickstore_TYPE, J_pickcolumns_TYPE);

win.show();

});

3>下載匯入格式/匯入/匯出

{ // checkbox 方式 - 分頁勾選

xtype: 'button', text: '下載匯入格式', id: 'DownloadBtn_1',

listeners: {

click: function () {

document.location = "../api/VUTLAPI/dnloadSS_File?FNAME=V1060301_專案定更定檢清單_匯入.xlsx";

}

{ //以 checkbox 分頁勾選方式 , 由 cbxArr1() 至後端取得資料匯入

xtype: 'button', text: '匯入', id: 'XlsInBtn_1',

listeners: {

click: function () {

CALL_V1060301B();

}

1>*.js

{ // checkbox 方式 - 分頁勾選

xtype: 'button', text: '下載匯入格式', id: 'DownloadBtn_1',

listeners: {

click: function () {

//DownloadBtn_1_click();

document.location = "../api/VUTLAPI/dnloadSS_File?FNAME=V1060301_專案定更定檢清單_匯入.xlsx";

}

{ //以 checkbox 分頁勾選方式 , 由 cbxArr1() 至後端取得資料匯入

xtype: 'button', text: '匯入', id: 'XlsInBtn_1',

listeners: {

click: function () {

//XlsInBtn_1_click();

CALL_V1060301B();

}

{ //以 checkbox 分頁勾選方式 , 由 cbxArr1() 至後端取得資料匯出

xtype: 'button', text: '匯出', id: 'XlsOutBtn_1',

listeners: {

click: function () {

Ext.Ajax.request({

url: '../api/V1060301API/getGridData_M?par_paging=false',

method: 'POST',

params: { all: 1 },

async: false, //將非同步功能關閉

failure: function (response, opts) {

success: function (response, opts) {

let Tmp_DataAry1 = [];

var obj = Ext.decode(response.responseText);

obj.T1.forEach(function (item, i) {

Tmp_DataAry1.push(item);

});

CALL_V1060301C(Tmp_DataAry1); //排程資料匯出

}

});

}

{ //以 checkbox 分頁勾選方式 , 由 cbxArr1() 至後端取得資料匯出

xtype: 'button', text: '撤銷', id: 'RemoveBtn_1',

listeners: {

click: function () {

var Tmp_Str;

var Tmp_CHKCHG_NM;

var cur_recs = Ext.getCmp('grid_Single').getSelectionModel().getSelection();

var cur_rec = null;

if (cur_recs.length == 0)

{

Tmp_Str = "請先選擇要撤銷的定更定檢項目!!";

myalert(Tmp_Str);

}

else {

console.log("cur_recs:", cur_recs);

cur_rec = cur_recs[0];

console.log("cur_rec:", cur_rec);

Tmp_CHKCHG_NM = nulltoStr(cur_rec.data['CHKCHG_NM']).toString();

Tmp_Str = "確定將本定更定檢項目(" + Tmp_CHKCHG_NM + ")\r\n"

+ "撤銷嗎?\r\n";

var id = confirm(Tmp_Str);

if (id) {

CALL_V1060301D();

};

}

2026年5月24日星期日

V1060302 – 專案定更檢清單 - 分類 – Runtime 設定挑選欄位 - click - 不可用handler

目的: V1060302 – 專案定更檢清單 - 分類 – Runtime 設定挑選欄位

處理說明: 1> click 才是 event 名稱, 不可用 handler

handler 是屬性名稱,不是 event name , 所以不可用在 on('handler', function(){

1>*.js
//設定[編輯]畫面 - 欄位挑選(DoubleClick)設定

Ext.getCmp('btn_TYPE').on("click", function () {

var win = EditPickx('分類', '../api/V1060301API/get_TYPEPick',

['TYPE', 'DESCPT'], ['TYPE', 'TYPE_'], J_pickstore_TYPE, J_pickcolumns_TYPE);
win.show();
});

--> 不可用 on("handler",function(){

2026年5月7日星期四

按[F12]鈕 - Network Debug 的範例 - 當前端發出一個 Url Request 時(../API/V80E01AAPI/get_sub_TreeData1) , Debug 資料是否正確

目的: 按[F12]鈕 - Network Debug 的範例
當前端發出一個 Url Request 時(../API/V80E01AAPI/get_sub_TreeData1) ,
Debug 資料(url/Request method/傳入參數/傳回值/..)是否正確

-Ex: V80E01A - 展開節點時, 按 F12 ,可以看到 URL , FormData 及傳回資料

處理說明: 1>當呼叫後端Request(url) 時,按 [F12]鈕,

可以看到[Network]頁列出後端的 URL

2>於 [Network]頁, 點[Header]Sheet, 看到 Request method: Post/Get

3>點[Payload]Sheet, 看到傳入參數: Form Data

4>點[PreView]Sheet,看到傳回的資料(DataSet/Table)

5>點[Respons]Sheet,看到傳回的資料(json結構)

1>[Network]頁: URL

2>[Header]Sheet: Request method

3>[Payload]Sheet: 傳入參數(Form Date)

4>[Preview]Sheet : 傳回結果(dataset/datatable)

5>[Response]Sheet: 顯示 json結構

好的，我來示範一個「Network Debug 範例」，讓你能在瀏覽器 F12 檢查 TreeStore 的請求是否真的送出到後端：

🔧 步驟

打開瀏覽器開發者工具
- 在 Chrome/Edge 按 F12 或 Ctrl+Shift+I。
- 切換到 Network 面板。
展開節點觸發請求
- 在你的 Ext.tree.Panel 裡點擊某個節點。
- 如果 TreeStore 正常設定，這時候應該會送出一個 HTTP 請求。
檢查請求細節
- 在 Network 面板找到對應的請求 (通常 URL 是 ../api/V80E01AAPI/get_sub_TreeData1)。
- 點擊該請求，檢查：
  - Request Method：是否為 POST（如果後端是 [HttpPost]）。
  - Request Payload / Form Data：是否有帶上 cur_DEPID。
  - Response：後端是否回傳 JSON，格式是否正確。
常見錯誤排查
- 如果請求沒有出現 → 代表 TreeStore 沒有觸發 Proxy，檢查 beforeload 是否正確設定。
- 如果請求出現但狀態碼是 405 Method Not Allowed → 前端用 GET，後端只允許 POST。
- 如果狀態碼是 404 Not Found → URL 路徑不匹配。
- 如果狀態碼是 200 OK 但沒有資料 → 後端查詢邏輯或回傳格式不符。

範例截圖檢查重點

Request URL: http://localhost:xxxx/api/V80E01AAPI/get_sub_TreeData1
Request Method: POST
Form Data:
```
cur_DEPID: AIDC
```

Response JSON:

[
  { "id":"A001", "text":"A001:部門", "leaf":false },
  { "id":"E001", "text":"E001:員工", "leaf":true }
]

👉 這樣你就能快速判斷：到底是 前端沒送出，還是 後端沒接到，或是 資料格式不符。

要不要我幫你寫一個「最小可測試範例」的 TreeStore + Controller，讓你可以直接跑起來測試 Network 面板？

2026年5月6日星期三

V80E01A - 以 Ext.Tree.Panel 的應用 - 以資料庫欄位建位 TreeView - store.proxy

目的: V80E01A -以 Ext.Tree.Panel & Ext.data.TreeStore 的應用
-以資料庫欄位建位 TreeView - store.proxy

處理說明: 1>資料庫結構 - HR_DEP & HR_EMPLYM & HR_DEPHIRCH

2>設 Ext.data.TreeStore 元件 - proxy / type / reader / actionMethods 的欄位值

proxy: {

  type: 'ajax',
  url: '../api/V80E01AAPI/get_sub_TreeData1',
  actionMethods: { read: 'POST' }, // 改成 POST
  reader: { type: 'json' },
}

3> 將 Ext.tree.Panel.store 設定成 myTreeStore

var cmp_sub_TreePanel1 =

get_cmp_treepanel1("sub_TreePanel1","AIDC",10, myTreeStore);

4>Ext.tree.Panel - DoubleClick 展開節點時, 會呼叫URL

會自動呼叫 URL (store.proxy.url) 讀取下層節點

SQL:

SELECT B.DPRTID as P_DEPID,A.DEPID as ID,A.DEPNM as NM,0 as leaf ,2 as itm

FROM HR_DEP A, HR_DEPHIRCH B

WHERE A.DEPID=B.DEPID

AND B.DPRTID='800'

union

SELECT C.DEPID as P_DEPID,C.EMPLYID as ID,C.EMPLYNM as NM,1 as leaf, 1 as itm

FROM HR_EMPLYM C

WHERE C.DEPID='800'

ORDER BY itm,ID;

2>store.proxy 的應用

function CALL_V80E01A() {

console.log(" 1 顯示 AIDC 組織圖 ");

//panel11 - 拆檢案專案日期選項

var myTreeStore =

{

xtype: 'treeStore',

proxy: {

type: 'ajax',

url: '../api/V80E01AAPI/get_sub_TreeData1',

actionMethods: { read: 'POST' }, // 改成 POST

reader: { type: 'json' },

root: {

id:'AIDC',

text: 'AIDC',

expanded: true,

children: [

{ text: '節點 A1', leaf: true },

{

text: '節點 A2', expanded: true, children: [

{ text: '節點 A2-1', leaf: true }

]

}

]

}

};

//透過連接資料庫,取得 TreeView 節點資訊

var cmp_sub_TreePanel1 = get_cmp_treepanel1("sub_TreePanel1","AIDC",10, myTreeStore);

sub_TreePanel1.on('beforeload', function (store, operation) {

// operation.node 是目前要展開的節點

var np = {};

np["cur_DEPID"] = operation.node.data.id;

if (operation.node.hasChildNodes())

return;

sub_TreePanel1.store.getProxy().extraParams = np;

//store.getProxy().setExtraParams(np);

});

//[顯示公司組織圖]鈕- 透過連接資料庫,取得 TreeView 節點資訊

function V80E01A_StoreProxy() {

var np = {};

np["cur_DEPID"] = "AIDC";

sub_TreePanel1.store.getProxy().url = '../api/V80E01AAPI/get_sub_TreeData1',

sub_TreePanel1.store.getProxy().extraParams = np;　//分頁OK,篩選條件OK

sub_TreePanel1.store.load();

};

JSON介紹 - 什麼是 JSON

JSON（JavaScript Object Notation）是一種輕量級的資料交換格式，常用來在不同系統之間傳遞資料。它的設計理念是「簡單、易讀、易解析」，既能讓人類直觀理解，也能被電腦快速處理。

1>✨ JSON 的特點

純文字格式：資料以文字形式儲存，通常是 .json 檔案。
結構清晰：由「鍵值對」組成，類似字典或物件。
跨平台通用：不依賴特定程式語言，幾乎所有語言都能解析。
常用於網路傳輸：例如 API 回傳資料時，最常見的格式就是 JSON

2> JSON範例

{
  "name": "Alice",
  "age": 25,
  "isStudent": true,
  "skills": ["Python", "JavaScript", "SQL"],
  "node": {856:"系統設計課",611292: "蔡聰進",610929:"楊清榮",} ,
}

字串：用雙引號 " " 包起來
數字：直接寫，不需要引號
布林值：true 或 false
陣列：用 [] 包起來
物件：用 {} 包起來，裡面是鍵值對

3> JSON 的用途

API 資料交換：伺服器和前端之間傳遞資料。
設定檔：許多應用程式用 JSON 來儲存設定。
資料儲存：簡單的資料庫或檔案系統也會用 JSON。

訂閱：文章 (Atom)

2026年5月27日星期三

V1060302-實體定更定檢清單 – 編輯欄位(AMM_CHKCHG_ASN)+CaluField(AMM_CHKCHG) -[存檔]錯誤

2026年5月26日星期二

V1060302 –實體定更定檢清單 - Item 挑選後 – change event 沒觸發

2026年5月25日星期一

V1060301- 專案定更定檢件清單 - 單檔維護(新增/修改/刪除/挎貝) - 下載匯入格式/匯入/匯出

2026年5月24日星期日

V1060302 – 專案定更檢清單 - 分類 – Runtime 設定挑選欄位 - click - 不可用handler

2026年5月7日星期四

按[F12]鈕 - Network Debug 的範例 - 當前端發出一個 Url Request 時(../API/V80E01AAPI/get_sub_TreeData1) , Debug 資料是否正確

🔧 步驟

範例截圖檢查重點

2026年5月6日星期三

V80E01A - 以 Ext.Tree.Panel 的應用 - 以資料庫欄位建位 TreeView - store.proxy

JSON介紹 - 什麼是 JSON

1>✨ JSON 的特點

WebDesign 心得綜整

追蹤者

網誌存檔

關於我自己

2026年5月27日 星期三

2026年5月26日 星期二

2026年5月25日 星期一

2026年5月24日 星期日

2026年5月7日 星期四

🔧 步驟

範例截圖檢查重點

2026年5月6日 星期三

1>✨ JSON 的特點

追蹤者

網誌存檔

關於我自己

2026年5月27日星期三

2026年5月26日星期二

2026年5月25日星期一

2026年5月24日星期日

2026年5月7日星期四

2026年5月6日星期三