WebDesign 心得綜整: Query

顯示具有 Query 標籤的文章。顯示所有文章

2023年8月15日星期二

V120401 - 設定 Query高度 - Query 高度亂掉 - radio - 字折行

目的: V120401 - 編輯後 - Query 高度亂掉 - radio

處理說明: 1> Query的高度設為固定
var Query = new Ext.FormPanel({
id: 's_form',
height:120,
layout: { type: 'hbox', align: 'stretch' },

2> 按[存檔]後,重新顯示資料

Ext.getCmp('btn_save').setFormValue = function () {

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

return true;

};

1>*.js

//篩選條件畫面

var Query = new Ext.FormPanel({

id: 's_form',

height:120,

layout: { type: 'hbox', align: 'stretch' },

fieldDefaults: { labelAlign: 'right' },

defaults: { margin: { top: 3 } },

items: [

{

xtype: 'panel', id: 'panel1', layout: { type: 'hbox', align: 'stretch' }, flex: 14, border: 0,

items: [

{

xtype: 'panel', id: 'panel11', layout: { type: 'vbox', align: 'stretch' }, flex: 25, border: 0,

items: [cmp_TMNOXX, cmp_DOCNO, cmp_TMNO],

}, // end of panel11

{

xtype: 'panel', id: 'panel12', layout: { type: 'vbox', align: 'stretch' }, flex: 30, border: 0,

items: [cmp_VOL, cmp_STLCT, cmp_MKDT],

}, // end of panel12 , flex:16

{

xtype: 'panel', id: 'panel13', layout: { type: 'vbox', align: 'stretch' }, flex: 20, border: 0,

items: [cmp_STAT],

}, // end of panel13 , flex:16

{

xtype: 'panel', id: 'panel14', layout: { type: 'vbox', align: 'stretch' }, flex: 20, border: 0,

items: [cmp_TYPE],

}, // end of panel13 , flex:16

{

xtype: 'panel', id: 'panel15', layout: { type: 'vbox', align: 'stretch' }, flex: 20, border: 0,

items: [],

}, // end of panel13 , flex:16

]

}, // end of panel1

{

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

np["s_TYPE"] = Ext.getCmp('s_TYPE').getValue();

//console.log('1 gridstore: ', gridstore);

//var gridstore = Ext.getCmp('grid_Single').store;

gridstore.getProxy().url = '../api/V120401API/getGridData_M';

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

Ext.getCmp('grid_Single').store.pageSize = 30;

Ext.getCmp('grid_Single').reloadGridData();

CHK_PK_OBJ.PK_LIST = [];

CHK_PK_OBJ.ALL_LIST = [];

}

}, // 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

] // end of items of [顯示資料][清除條件]

} // end of panel2 //顯示按鈕

] // end of items of Query

});

Ext.getCmp('grid_Single').addDocked({

dockedItems: [{

items: [Query]

}]

});

//存檔.設定欄位值, 重新顯示資料, 以便畫面顯示正常

//若沒重新顯示,則 radiobox 間距會加大, 畫面顯示不正常

Ext.getCmp('btn_save').setFormValue = function () {

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

return true;

};

// panel11

var cmp_TMNOXX = get_cmp_txt1('技令編號', 's_TMNOXX', 80, 130);

var cmp_pick_TMNOXX = get_pick_btn0('挑選技令編號', 's_btn_TMNOXX',

'../api/V120401API/get_s_TMNOXXPick?isComplete=0',

['TMNOXX'], ['s_TMNOXX'], J_pickstore_s_TMNOXX, J_pickcolumns_s_TMNOXX);

cmp_TMNOXX.items.push(cmp_pick_TMNOXX);

cmp_TMNOXX.items[0].value = '11P10-6-7';

// DOCNO

var cmp_DOCNO = get_cmp_txt1('文件編號', 's_DOCNO', 80, 130);

var cmp_pick_DOCNO = get_pick_btn0('挑選文件編號', 's_btn_DOCNO',

'../api/V120401API/get_s_DOCNOPick?isComplete=0',

['DOCNO'], ['s_DOCNO'], J_pickstore_s_DOCNO, J_pickcolumns_s_DOCNO);

cmp_DOCNO.items.push(cmp_pick_DOCNO);

// TMNO

var cmp_TMNO = get_cmp_txt1('條碼編號', 's_TMNO', 80, 130);

var cmp_pick_TMNO = get_pick_btn0('挑選條碼編號', 's_btn_TMNO',

'../api/V120401API/get_s_TMNOPick?isComplete=0',

['TMNO'], ['s_TMNO'], J_pickstore_s_TMNO, J_pickcolumns_s_TMNO);

cmp_TMNO.items.push(cmp_pick_TMNO);

//panel12

// 冊號(VOL)

var cmp_VOL = get_cmp_txt1('冊號', 's_VOL', 80, 130);

var cmp_pick_VOL = get_pick_btn0('挑選冊號', 's_btn_VOL',

'../api/V120401API/get_s_VOLPick?isComplete=0',

['VOL'], ['s_VOL'], J_pickstore_s_VOL, J_pickcolumns_s_VOL);

cmp_VOL.items.push(cmp_pick_VOL);

//儲位(STLCT)

var cmp_STLCT = get_cmp_txt1('儲位', 's_STLCT', 80, 130);

var cmp_pick_STLCT = get_pick_btn0('挑選儲位', 's_btn_STLCT',

'../api/V120401API/get_s_STLCTPick?isComplete=0',

['STLCT'], ['s_STLCT'], J_pickstore_s_STLCT, J_pickcolumns_s_STLCT);

cmp_STLCT.items.push(cmp_pick_STLCT);

//建檔日期

var cmp_MKDT = get_cmp_dt1('建檔日期', 's_MKDT1', 80, 100);

var cmp_MKDT_lbl = get_cmp_lbl0(" ~ ", 20);

var cmp_MKDT2 = get_cmp_dt0('s_MKDT2', 100);

cmp_MKDT.items.push(cmp_MKDT_lbl, cmp_MKDT2);

// panel13

var cmp_STAT = get_cmp_rdgrp1('現況', 's_STAT', 80);

var cmp_STAT1 = get_cmp_rd0('全部(不含刪除)', 's_STAT', 50, 'ALL');

cmp_STAT1.checked = true;

var cmp_STAT2 = get_cmp_rd0('可借閱', 's_STAT', 50, 'A');

var cmp_STAT3 = get_cmp_rd0('已借出', 's_STAT', 50, 'B');

var cmp_STAT4 = get_cmp_rd0('已刪除', 's_STAT', 50, 'Z');

cmp_STAT.items.push(cmp_STAT1, cmp_STAT2, cmp_STAT3, cmp_STAT4);

var cmp_TYPE = get_cmp_rdgrp1('類別', 's_TYPE', 80);

var cmp_TYPE1 = get_cmp_rd0('全部', 's_TYPE', 50, 'ALL');

cmp_TYPE1.checked = true;

var cmp_TYPE2 = get_cmp_rd0('藍圖', 's_TYPE', 50, 'D');

var cmp_TYPE3 = get_cmp_rd0('技令', 's_TYPE', 50, 'T');

cmp_TYPE.items.push(cmp_TYPE1, cmp_TYPE2, cmp_TYPE3);

2>myfunc.js

function get_cmp_chk0(par_caption, par_name, par_l_width, par_value, par_margin) {

if (checkisnull(par_margin))

par_margin='0 0 0 0 '

var rtn_cmp =

{

xtype: 'checkbox', boxLabel: par_caption, name: par_name, labelWidth : par_l_width,

inputValue: par_value,

margin: par_margin,

width: '100%', //避免 radio字折行

}

return rtn_cmp;

}

2023年4月20日星期四

Extjs 利用 query - 找詢元件的方法

目的: Extjs 利用 query - 找詢元件的方法

https://ithelp.ithome.com.tw/articles/10134838

var cmp= Ext.ComponentQuery.query('gridpanel'); //找到 gridpanel xtype 的元件
var cmp= Ext.ComponentQuery.query('.gridpanel'); //找到 class=.gridpanel

var Tmp_form = Ext.ComponentQuery.query('#s_form'); //找到 id=#_form

var btnOk= Ext.ComponentQuery.query('button[iconCls]'); //找到按鈕含 iconCls 屬性

2022年10月31日星期一

jQuery - $("#my_id") - $(".my_class") - $("h1") - $的用法

1>jQuery 是什麼 ?

jQuery 是一個 JavaScript 函式庫 (Javascipt Framework)，
主要目的就跟 Logo 上面寫的精神一樣：「write less, do more」，
由於如果要直接用 Javascript 將所有功能實作出來，常常要費時費力且造成大量且難以閱讀的程式碼，更嚴重者，有於瀏覽器之間的差異，常常要針對不同瀏覽器寫不同的程式碼，讓程式碼維護的難度大為提升。

jQuery 就是一個讓你加速網頁程式開發速度的工具
如何有效率的產出大量的 javascript 與 ajax ，就是 jQuery 所主打的目標。

其中的 $() 符號就是 jQuery 常用的選擇器，善用選擇器可以快速找到網頁當中的物件，不知道各位有沒有感受到 jQuery 的威力了呢 ?

Ex:

整個流程應該會是 (1) 找出所有 input 元素 (2) 當元素是 radio button 且屬於某個 group (3) 確認某個選項已經被勾選了 (4) 將勾選的值指派給 checkValue 變數

1>傳統寫法:

var checkValue;
var elements = document.getElementsByTagName(‘input’);
for (var n = 0; n < elements.length; n++){
if (elements[n].type == ‘radio’ && elements[n].name == ‘RadioGroup’ && elements[n].checked){
checkedValue = elements[n].value;
}

-->

document.getElementById() $("#my_id")

document.getElementsByTagName() $("h1") $("input")

document.getElementsByClassName() $(".my_class")

2>jQuery寫法:

$("[name='RadioGroup']")

$("#my_id").click();

3> 引用 jQuery

1>>第一種是將js檔案下載下來，並在html的<head></head>中定義使用下載的js檔案。

<head>

<script src="jquery-3.1.1.min.js"></script>

</head>

2>>直接引用 網路的 jQuery

第二種是使用Content Delivery Network (CDN)，直接引用網路上的js檔案。網路上有很多CDN可以使用，如:google或微軟，如果使用google的CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
如果使用微軟的CDN:<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>

2>jQuery的基本語法是: $(selector).action()
 $(this).hide() - hides the current element.
  $("p").hide() - hides all <p> elements.
  $(".test").hide() - hides all elements with class="test".
  $("#test").hide() - hides the element with id="test".






1、$的含义

JS应用库JQUERY的作者将 $ 做为一个自定义函数名，这个函数是获取指定网页元素的函数。


 
  
  1
  2
  3
  
  
  function $(Nid){
  return document.getElementById(Nid);
  }
  
 


2、简单用法

这里介绍三种简单的使用方法。

2.1、$(expresion)

$()可以是 $(expresion)，即css选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。

2.2、$(element)

$()可以是 $(element)，即一个特定的DOM元素。如常用的DOM对象有document、location、form等。

2.3、$(function)

$()可以是$(function)，即一个函数，它是 $(document).ready()的一个速记方式。


 
  
  1
  2
  3
  
  
  $(document).ready(function(){ 
  alert("Hello world!"); 
  });
  
 


可以写作：


 
  
  1
  2
  3
  
  
  $(function(){ 
  alert("Hello world!"); 
  });

2022年8月26日星期五

V20306 - EditPick - 挑選欄位值 - 依目前畫面[交修單號]欄位值 ,來過濾挑選資料 -? - QueryString - 需即時,每次均重抓

目的: 挑選欄位值 - 依目前畫面[交修單號]欄位值 ,來過濾挑選資料 -url= xxx ?RPNOAF=xxxx

處理說明: 1>由 url - xxxx?RPNOAF=xxxx 傳入目前的參數值
2>後端由 QueryString 取得傳入 url 的 ? 參數
string Tmp_RPNOAF = c.Request.QueryString["RPNOAF"];

1>*.js

{
xtype:"fieldcontainer",fieldLabel:"LRU件號",labelWidth:160,layout:"hbox",items:[
{id:"PN",name:"PN",xtype:"textfield",width:200,padding:"0 4 0 0",maxLength:32},
{
id: "btn_PN", name: "btn_PN", xtype: "button", text: "...",
handler: function () {
var Tmp_RPNOAF = Ext.getCmp("RPNOAF").getValue();
var win = EditPickx('LRU件號', '../api/V20306API/get_F_PNPick?RPNOAF='+Tmp_RPNOAF, ['PN'], ['PN'], J_pickstore_F_PN, J_pickcolumns_F_PN);
win.show();
} }

2>*.cs - c#

//過濾條件 [LRUPN]挑選

//url = ?RPNOAF=xxxxx --> 可由傳入的參數 or Request.QueryString 取得

[HttpPost]

public dynamic get_F_PNPick(string RPNOAF="", string PN = "",int isComplete = 0)

{

var c = HttpContext.Current;

NameValueCollection nvc = c.Request.Form;

//string Tmp_RPNOAF = nvc["RPNOAF"];

string Tmp_RPNOAF = c.Request.QueryString["RPNOAF"];

Tmp_RPNOAF=RPNOAF; //也可

string Tmp_Sql = " SELECT DISTINCT PN "

+ " FROM AMM_FM "

+ " WHERE 1 = 1 "

+ " AND PN IS NOT NULL ";

if (!myfunc.checkisnull(Tmp_RPNOAF))

Tmp_Sql = Tmp_Sql + " AND RPNOAF = " + myfunc.AA(Tmp_RPNOAF);

string n = funId + "F_PN"; //同一欄位的挑選, 但畫面挑選的n命名需和過濾條件不同

//即時抓SQL , 每次均重取, 不由現有的緩衝資料取行

//public DataSet setupPickDs(string pickKey, string sql, string[] tables, bool paging = true, bool realTime = false)

DataSet ds = setupPickDs(n, Tmp_Sql, new string[] { "AMM_FM" },true,true);

if (PN != null && !PN.Equals(""))

{

if (isComplete == 1)

{

ds = getPickDsbyCondi(n, "PN='" + PN + "'");

}

else

{

ds = getPickDsbyCondi(n, "PN LIKE '%" + PN + "%'");

}

return ds;

} // end of get_F_PNPick

2023年8月15日星期二

V120401 - 設定 Query高度 - Query 高度亂掉 - radio - 字折行

2023年4月20日星期四

Extjs 利用 query - 找詢元件的方法

2022年10月31日星期一

jQuery - $("#my_id") - $(".my_class") - $("h1") - $的用法

2022年8月26日星期五

V20306 - EditPick - 挑選欄位值 - 依目前畫面[交修單號]欄位值 ,來過濾挑選資料 -? - QueryString - 需即時,每次均重抓

WebDesign 心得綜整

追蹤者

網誌存檔

關於我自己

2023年8月15日 星期二

V120401 - 設定 Query高度 - Query 高度亂掉 - radio - 字折行

2023年4月20日 星期四

Extjs 利用 query - 找詢元件的方法

2022年10月31日 星期一

jQuery - $("#my_id") - $(".my_class") - $("h1") - $的用法

2022年8月26日 星期五

V20306 - EditPick - 挑選欄位值 - 依目前畫面[交修單號]欄位值 ,來過濾挑選資料 -? - QueryString - 需即時,每次均重抓

WebDesign 心得綜整

追蹤者

網誌存檔

關於我自己

2023年8月15日星期二

2023年4月20日星期四

2022年10月31日星期一

2022年8月26日星期五