WebDesign 心得綜整

2022年8月30日星期二

[修改]鈕.click 時 , parent & child click程式的執行順序

目的: [修改]鈕.click 時 , parent & child click程式的執行順序

處理說明: 1>先執行 parent 的程式, 再執行 child 的程式

2>如何 disable parent 的程式

V20306 - RadioGroup 存回資料庫 - 欄位值取得MAX+1

目的: 編輯畫面 RadioGroup 欄位存回資料庫, PK=MAX(PK)+1

處理說明: 1> PK=MAX(PK)+1
1>>*.js np["ASPNO"] = "ASP" + DatetoStr(now, "Ymd");

2>>*.cs Tmp_NEXT_ASPNO = Tmp_ASPNO + (int.Parse(Tmp_MAX_ASPNO.Substring(11, 3))+1).ToString("000");

2> RadioGroup欄位值

1>>每一Radio.id均不同, 傳回後端每一Radio均有一值(true/false)

2>>RadioGroup欄位值由 np["STAT"]=Ext.getCmp("name").getValue(); 取得送至後端

1>*.js - 設定 PK=MAX(PK)+1

var buttonModel = Ext.create('G_buttonModel');

//存檔時,自動設定欄位值 : PK,
Ext.getCmp('btn_save').setFormValue = function () {
//1>取得 PK= MAX(PK)+1 , 新增時,才設定 PK 欄位值, 編輯時 , 不設定欄位值
var modelType = buttonModel.getModelType();
if (!(modelType == 1))
return true;
var Tmp_NEXT_ASPNO = get_NEXT_ASPNO();
Ext.getCmp("ASPNO").setValue(Tmp_NEXT_ASPNO);

//2>設定 RadioGroup 欄位值 , 由 S_DB.add_np 設定特別的欄位值

S_DB.add_np = {};

S_DB.add_np["WTLV"] = Ext.getCmp("WTLV").getValue();

S_DB.add_np["ITPR"] = Ext.getCmp("ITPR").getValue();

return true;
}

var np=s_JSON('myform');

--> Template 先執行 setFormValue() , 再執行 np 取欄位值,

所以 setFormValue() 的欄位值, 會存入 np 參數

2>*.cs

1>>取得 MAX(PK)+1

[HttpPost]

public HttpResponseMessage GET_NEXT_ASPNO()

{

var c = HttpContext.Current;

NameValueCollection nvc = c.Request.Form;

var response = this.Request.CreateResponse();

string Tmp_ASPNO = nvc["ASPNO"];

string Tmp_Str = "";

OracleConnection conn = new OracleConnection(DBService.ConnectionString(DBLINK));//

OracleCommand cmd = new OracleCommand();

OracleDataReader reader;

conn.Open();

conn.ClientInfo = User.Identity.Name;

conn.ModuleName = BaseSYS + "_" + BaseMODID;

conn.ActionName = ActionName;

cmd.Connection = conn;

string Tmp_MAX_ASPNO = "", Tmp_NEXT_ASPNO = "";

try

{

string Tmp_Sql = " SELECT MAX(ASPNO) as MAX_ASPNO "

+ " FROM AMM_ASP "

+ " WHERE ASPNO LIKE " + myfunc.AA(Tmp_ASPNO+"%");

cmd.CommandText = Tmp_Sql;

reader = cmd.ExecuteReader();

if (reader.Read())

{

Tmp_MAX_ASPNO = reader["MAX_ASPNO"].ToString();

if (myfunc.checkisnull(Tmp_MAX_ASPNO))

Tmp_NEXT_ASPNO = Tmp_ASPNO + "001";

else

{

Tmp_NEXT_ASPNO = Tmp_ASPNO + (int.Parse(Tmp_MAX_ASPNO.Substring(11, 3))+1).ToString("000");

}

Tmp_Str = "{success: true , NEXT_ASPNO:" + myfunc.AA(Tmp_NEXT_ASPNO) + ","

+ " }";

response.Content = new StringContent(Tmp_Str); // 回應內容

return response;

}// end of try

catch (Exception e)

{

Tmp_Str = "{success: false , NEXT_ASPNO:" + myfunc.AA(Tmp_NEXT_ASPNO) + ","

+ " }";

response.Content = new StringContent(Tmp_Str); // 回應內容

return response;

}

finally

{

conn.Close();

}

} // end of get_NEXT_ASPNO

//移除 nvc 由 RadioGroup 的每一Radio欄位值(true/false)

2>>

[HttpPost]

public void Insert()

{

var c = System.Web.HttpContext.Current;

NameValueCollection nvc = c.Request.Form;

NameValueCollection nvc1= new NameValueCollection();

//nvc 移除 radio開頭的 key , 以免加入 Insert Sql

var Tmp_key = "";

foreach(string key in nvc.Keys)

{

if (!key.Contains("radio"))

nvc1[key] = nvc[key];

}

excuteInsert(nvc1, DBTable);

}

2022年8月29日星期一

V20306 - css 的應用

目的: *.CSS檔案放置目錄及 CSS class

處理說明: 1> *.css 檔案放置在 Content 子目錄

2> css class 定義字型大小,顏色,寬度,長度

V20306 - RadioGroup 的設定 - 1>含TextField 2>Label文字太長

目的: 設定 RadioGroup 1>含TextField 2>Label文字太長

處理說明: 1>Radio Label太長, 加大 width
2>Radio含 TextField, 以 Panel 包含 Radio+TextField

1>*.js
{
xtype: 'radiogroup', fieldLabel: '重量等級', labelWidth: 100, layout: 'vbox',
id: 'WTLV',
items: [
{
boxLabel: '極重(木箱)',
name: 'WTLV',
inputValue: 'A',
border: 1,

width: 300,
}, {
boxLabel: '很重(七層紙箱)',
//boxLabel: '七層紙箱',
name: 'WTLV',
inputValue: 'B',
border: 1,
}, {
boxLabel: '重(五層紙箱)',
name: 'WTLV',
inputValue: 'C',
checked: true,
},
{
boxLabel: '一般(三層紙箱)',
name: 'WTLV',
inputValue: 'D',
}
]
}, // end of WTLV重量等級
{
xtype: 'radiogroup', fieldLabel: '內層包裝需求', labelWidth: 100, layout: 'vbox',
id: 'ITPR',
items: [
{
boxLabel: '旭化層',
name: 'ITPR',
inputValue: 'A',
}, {
boxLabel: '大氣泡布',
name: 'ITPR',
inputValue: 'B',
}, {
boxLabel: '小氣泡布',
name: 'ITPR',
inputValue: 'C',
checked: true,
},

{
xtype: 'panel', layout: { type: 'hbox' }, border: 0,
items: [
{xtype: 'radio',boxLabel: '其他',name: 'ITPR',inputValue: 'E', },
{xtype: 'textfield', id: 'ITPR1', width: 150, padding: "0 5 0 5" },
]
},
]
}, // end of ITPR
]
}

V120103 - Ext.Ajax 1> async=true/false 的不同 2>Ext.Ajax 和 Form.submit 的不同 3>loadMask

目的: 說明 Ext.Ajax - async : true/false 的不同

處理說明: 1>async: true, 不等後端執行完,即往下執行
async: false, 等後端執行完,才往下執行

2>Ext.Ajax : 由 response.responseText 取得傳回值

form.submit : 由 opts.response.responseText 取得傳回值

3>LoadMask : 適用於 async: true

1>*.js async=true/false 的區別

function mySub1_OkBtn_click() {

//取得 [類別][匯入機號][拆移工場]

console.log('0 xlsToV120101 click - mySub1_OkBtn_click !!');

//1 > 讀取子畫面的過濾條件

var np = {};

var Tmp_sub_CLS = Ext.getCmp("sub_CLS").getValue();

var Tmp_sub_ASN = Ext.getCmp("sub_ASN").getValue();

var Tmp_sub_FACWC = Ext.getCmp("sub_FACWC").getValue();

np["sub_CLS"] = Tmp_sub_CLS;

np["sub_ASN"] = Tmp_sub_ASN;

np["sub_FACWC"] = Tmp_sub_FACWC;

console.log('5 before show mask !!');

var Tmp_upPanel = Ext.getCmp("mySub1_OkBtn").up("panel");

//console.log("Tmp_upPanel:", Tmp_upPanel);

//var mask = new Ext.LoadMask(Ext.getBody(), {

var mask = new Ext.LoadMask(Tmp_upPanel, {

msg: '處理中,請稍待...'

});

mask.show();//使用 mask 需手動呼叫show() 方法下

//顯示結果訊息..

//console.log('5.5 mask.show() !!');

console.log('6 before timer !!');

var timer = setInterval(function () {

clearInterval(timer);

mask.hide();

console.log('6.5 mask.hide() - after 20 sec !!');

timer = null;

//var r = r_cookies('EX_DFile');

//console.log("r_cookies=", r);

//if (!checkisnull(r)) {

// mysuccessalert(r);

//}

}, 30000); //5000ms = 5sec

//Ext.getCmp('mySubForm').submit({

Ext.Ajax.request({

url: '../../api/V120103API/xlsToV120101',

method: 'POST',

async: false,

//standardSubmit: true, // 非 Ajax 的方式 //若要傳送檔案至前端, standardSubmit必需設為 true

params: np,

success: function (response, opts) {

console.log('0 xlsToV120101 sucess!!');

//console.log('0 opts:', opts);

//console.log('0 response:', response);

console.log("success response.responseText:", response.responseText);

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

//console.log("obj:", obj);

if (obj["success"]) {

console.log(' 1 xlsToV120101 obj[sucess] true !!');

Tmp_Str = "[匯入]完成 !! <br>"

+ obj["Rtn_Msg"];

mysuccessalert(Tmp_Str);

console.log("success=true , Tmp_Str=", Tmp_Str);

Ext.getCmp('mySub1_OkBtn').up("window").close();

Ext.getCmp('mySub1_OkBtn').up("window").destroy();

Ext.getCmp('btn_Show').fireHandler();

}

else {

console.log(' 2 xlsToV120101 obj[sucess] false !!');

Tmp_Str = "[匯入]失敗 !! <br>"

+obj["Rtn_Msg"];

mysuccessalert(Tmp_Str);

}

failure: function (response, opts) {

//console.log('uploadFileToDB failure !!');

//console.log(" failure opts.response.responseText:", opts.response.responseText);

console.log(' 3 xlsToV120101 failure !!');

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

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

Tmp_Str = "[匯入]失敗!! <br>"

+ obj["Rtn_Msg"];

mywarnalert(Tmp_Str);

} // end of failure

}); // end of submit

console.log('7 Ext.Ajax finished !!');

}; // end of function mySub1_OkBtn_click()

2>success: function (response, opts) {

1>>若 Ext.Ajax 則由 response.responseText

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

2>>若 Form.submit 則由 opts.response.responseText

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

3>Loadmask的用法: 適用於 async : true

2022年8月28日星期日

V120402 - Radiobox 處理 - 取得 radioGroup 欄位值

目的: 在畫面上顯示 Radiobox

處理說明: 1> {xtype: 'radiogroup', fieldLabel: '現況', labelWidth: 40, layout: 'vbox',
id: 's_STAT',
items: [
{
boxLabel: '全部(不含已刪除)',
name: 's_STAT',
inputValue: 'ALL',
width: 200,
checked: true,
}, {
boxLabel: ' 可借閱',
name: 's_STAT',
inputValue: 'A',
//width: 200,
}, { :

1>*.js
{
xtype: 'radiogroup', fieldLabel: '現況', labelWidth: 40, layout: 'vbox',
id: 's_STAT',
items: [
{
boxLabel: '全部(不含已刪除)',
name: 's_STAT',
inputValue: 'ALL',
width: 200,
checked: true,
}, {
boxLabel: ' 可借閱',
name: 's_STAT',
inputValue: 'A',
}, {
boxLabel: '已借出',
name: 's_STAT',
inputValue: 'B',
},
{
boxLabel: '已刪除',
name: 's_STAT',
inputValue: 'Z',
}

//顯示資料
{
//xtype: 'toolbar',
xtype: 'panel',
id: 'panel2',
layout: { type: 'vbox', align: 'right' },
flex: 1,
border: 0,
items: [
{
xtype: 'button',
id: 'btn_Show',
flex: 2,
border: 1,
text: '資料顯示',
iconCls: 'icon-search',
handler: function () {
var np = s_JSON('s_form'); //TMFunction.js, 組合form上的查詢條件為json參數傳遞
np["s_STAT"] = Ext.getCmp('s_STAT').getValue();

gridstore.getProxy().url = '../api/V120402API/getGridData_M';
gridstore.getProxy().extraParams = np;　//分頁OK,篩選條件OK
Ext.getCmp('grid_M').reloadGridData();
}
}, // end of 顯示資料
{
xtype: 'button',
id: 'btn_clear',
flex: 2,
border: 1,
text: '清除條件',
iconCls: 'icon-clear',
handler: function () {
var f = Query.getForm();
f.reset();
}
}, // end of 清除條件
{ xtype: 'label', id: 'label151', flex: 2, border: 0, text: '', }, // end of label
{ xtype: 'label', id: 'label152', flex: 2, border: 0, text: '', }, // end of label
] // end of items of [顯示資料][清除條件]
} // end of panel2
] // end of items of Query

2>V20107.js - 下載匯入格式 - 出現子視窗 - 勾選下載類別

//[下載匯入格式]鈕 - 子視窗

function downloadBtn_click() {

console.log("step1");

//按鈕 : [確認] [取消] - [借閱登記]鈕

var sub_downloadFlds_Btns = [

{

xtype: 'button', text: '確定', id: 'sub_downloadFlds_OkBtn',

listeners: {

click: function () {

//mysuccessalert("mysub2_確定 ");

sub_downloadFlds_OkBtn();

}

{

xtype: 'button', text: '取消', id: 'sub_downloadFlds_CancelBtn',

listeners: {

click: function () {

//mysuccessalert("mysub2_取消");

var Tmp_win = this.up("window");

if (Tmp_win == undefined) {

Ext.Msg.alert("取消時未取到Window Object");

}

this.up("window").close();

this.up("window").destroy();

}

];

console.log("step2");

// [下載匯入格式]鈕 - 子畫面欄位

var sub_downloadFlds = [

{

type: 'panel', bodyStyle: "background-color:transparent;", border: 0, padding: "5",

//layout: 'border',

items: [

{

xtype: 'radiogroup', fieldLabel: '選擇匯入格式', labelWidth: 100, layout: 'vbox',

id: 'sub_MAIN_SUB',

items: [

{

boxLabel: 'V20107_主檔匯入格式 ',

inputValue: 'MAIN',

width: 200,

flex: 50,

checked: true,

}, {

boxLabel: ' V20107_子步序匯入格式 ',

inputValue: 'SUB',

flex: 50,

//width: 200,

]

}, //end of sub2_panel11 , flex:20

] // end of layout: "vbox", padding: "5", items: [

} //end of sub_downloadFlds , [{}

] //end of sub_downloadFlds , [

var win = getMyWindow("選擇要下載的匯入格式", sub_downloadFlds, sub_downloadFlds_Btns);

win.setWidth(350);

win.setHeight(200);

win.show();

} // end of function downloadBtn_click() {

//下載匯入格式

function sub_downloadFlds_OkBtn() {

var Tmp_MAIN_SUB;

//radioGroup取得欄位值為 Object 需 Object.["sub_MAIN_SUB"] 才是字串

Tmp_MAIN_SUB = Ext.getCmp('sub_MAIN_SUB').getValue();

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

var Tmp_FName=""

if (Tmp_MAIN_SUB["sub_MAIN_SUB"] == "MAIN")

//if (Tmp_MAIN_SUB == "MAIN")

Tmp_FName = "V20107_主檔匯入格式.xlsx"

else

Tmp_FName = "V20107_子步序匯入格式.xlsx"

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

document.location = "../api/VUTLAPI/dnloadSS_File?FNAME="+Tmp_FName;

};

V120403 - TreeView 挑選員工 - getEmpTree 新方法

1>目的以 TreeView 方式挑選員工 - getEmpTree 新方法

處理說明: 1>呼叫 getEmpTree
Ext.Loader.loadScript({ url: '../GUITemplate/EmployeeTree.js' });
2>{xtype: "button", id: "btn_MTEMPLYID", name: "btn_MTEMPLYID", text: "...",

handler: function () {

var win_tree = GetEmpTree('維修人員挑選', 'MTEMPLYID', 'MTEMPLYID_');

win_tree.show();

}

2>目的: 以 TreeView 方式挑選員工 - 原始方法 TreePanel

處理說明: 1>//載入 [員工編號] TreeView 挑選 source

Ext.Loader.setConfig({enabled: true,paths: { 'EmployeeTree': '../GUITemplate/EmployeeTree.js' } });

2>Create TreeView 物件, Ext.create('EmployeeTree',

--> 不可加 id, 因為同一畫面可能多個人員挑選, 有多個同一id, 會 Error

1>*.js

//載入 [員工編號] TreeView 挑選 source

Ext.Loader.setConfig({ enabled: true, paths: { 'EmployeeTree': '../GUITemplate/EmployeeTree.js' } });

//path : The mapping from namespaces to file paths { 'Ext': '.', // This is set by default, Ext.layout.container.Containe...

{

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

handler: function () {

var treepanel = Ext.create('EmployeeTree', {

listeners: {

itemclick: function (view, record, item, index, e) {

if (record.raw.leaf) {

var info = record.raw.text;

var newStr = info.split(":");

Ext.getCmp('CUSTODIAN').setValue(newStr[0]);

Ext.getCmp('CUSTODIAN_').setValue(newStr[1]);

win_tree.close();

}

}// end of listeners ); //end of treepanel

var win_tree = getWindow('保管人員挑選', treepanel);

win_tree.height = 400;

win_tree.show();

} // end of handler } // end of button ] // end of items[] },

-->

win_tree=getWindow() 的 Window.closeAction: 'hide' , 不會自動 destroy() , 需自行 destroy

Window.[關閉]鈕 , 會執行 win_tree.destroy()

訂閱：文章 (Atom)

2022年8月30日星期二

[修改]鈕.click 時 , parent & child click程式的執行順序

V20306 - RadioGroup 存回資料庫 - 欄位值取得MAX+1

2022年8月29日星期一

V20306 - css 的應用

V20306 - RadioGroup 的設定 - 1>含TextField 2>Label文字太長

V120103 - Ext.Ajax 1> async=true/false 的不同 2>Ext.Ajax 和 Form.submit 的不同 3>loadMask

2022年8月28日星期日

V120402 - Radiobox 處理 - 取得 radioGroup 欄位值

V120403 - TreeView 挑選員工 - getEmpTree 新方法

WebDesign 心得綜整

追蹤者

網誌存檔

關於我自己

2022年8月30日 星期二

2022年8月29日 星期一

2022年8月28日 星期日

追蹤者

網誌存檔

關於我自己

2022年8月30日星期二

2022年8月29日星期一

2022年8月28日星期日