2022年11月1日 星期二

CSS - selector # - Extjs panel 元件的 bodyStyle 設定方式 - font-size - px,pt,cm

 目的: Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)是用來描述HTML的樣式

selector(選取器),也就是要定義的對象。

將樣式套用在 selector(選取器)

我們想設定一些標籤的基本樣式

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-size: 20px;
}



方法1:完整的html如下,請記得這些內容要放在<head> </head>中,而不是放在<body> </body>中:

<!DOCTYPE html>
<html>
<head>
<style>
body {
       background-color: lightblue;
}

h1 {
color: white;
text-align: center;
background-color: darkblue;
}

p {
font-size: 20px;
}

</style>
</head>

<body>

<h1>吳濟聰</h1>
<p>輔大資管系助理教授</p>
<p>印地安那大學博士</p>

</body>

</html>

2>方法2:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="my.css"/>

</head>

<body>


<h1>吳濟聰</h1>

<p>輔大資管系助理教授</p>

<p>印地安那大學博士</p>


</body>

</html>


my.css的內容則不需要有<style></style>,如下面的範例:

body {

background-color: lightblue;

}


h1 {

color: white;

text-align: center;

background-color: darkblue;

}


p {

font-size: 20px;

}




CSS的語法是一開始是selector(選取器),也就是要定義的對象。

selector可以是

  1. html的基本元素(element),如:body、h1等等。上面的範例就是針對基本元素定義樣式。

  2. 當我們希望只針對某一個特定元件定義樣式,我們可以利用在html中所定義的id定義樣式。

  3. 當我們希望只針對某一群元件定義樣式,我們可以利用在html中所定義的class定義樣式。

要針對id定義樣式的話,在selector前加「#」:


1>針對特定元件(id)設定樣式 - 由 id="xxxx" 設定樣式


<!DOCTYPE html>

<html>

<head>

<style>

#primaryHeading {

text-align: center;

color: red;

}

</style>

</head>

<body>


<h1 id="primaryHeading">HTML</h1>

<h1>CSS</h1>


</body>

</html>


2>多元件(class)套用同一樣式
     因為在同一個網頁中id是不能重複,如果有多個元件要套同一個樣式,
     那就要使用class,要針對class定義樣式的話,在selector前加「.」:



<!DOCTYPE html>

<html>

<head>

<style>

.importantHeadings {

text-align: center;

color: red;

}

</style>

</head>

<body>


<h1 class="importantHeadings">HTML</h1>

<h1 class="importantHeadings">CSS</h1>

<h1>JavaScript</h1>

<h1>jQuery</h1>


</body>

</html>


3>利用 tag (p, body, h1) 套用樣式



<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

}


h1 {

color: white;

text-align: center;

background-color: darkblue;

}


p {

font-size: 20px;

}

</style>

</head>

<body>


<h1>吳濟聰</h1>

<p>輔大資管系助理教授</p>

<p>印地安那大學博士</p>


</body>

</html>


4>div span

雖然div及span都算是html的基本語法,但是,通常是用在樣式的設定上。

div與span的差別在於div是可以用來定義一個區塊的樣式,而且在<div></div>前後會換行。

span只能在一行之中,而且不會換行

<!DOCTYPE html>

<html>
<head>

<style>

.importantHeadings {

text-align: center;

color: red;

background-color:black;

padding:20px

}

</style>

</head>

<body>


<div class="importantHeadings">

<h1>My Important Heading</h1>

<h1>My Second Heading</h1>

</div>


<p>hello</p>

</body>

</html>




<!DOCTYPE html>

<html>

<head>

<style>

.importantHeadings {

text-align: center;

color: red;

background-color:black;

padding:20px

}

</style>

</head>

<body>


<h1><span class="importantHeadings">My Important Heading</span></h1>

<h1><span class="importantHeadings">My Second Heading</span></h1>

<p>hello</p>



</body>

</html>


2>Extjs 的 panel. bodyStyle 設定 兩種方式   CSS 字串


1>CSS字串方式:
bodyStyle: 'background:#ffc; padding:10px;

2>object 方式設定  CSS:
   bodyStyle: { background: '#ffc', padding: '10px' }


 {
            xtype: 'panel', bodyStyle: "background-color:transparent; border: 1px red solid;",  padding: "0",            
            layout: 'border',            
            items: [
                {  //sub_panel1 : table panel                                        
                    xtype: 'panel',
                    id: 'sub_panel1',                    
                    layout: 'fit',                    
                    items: [],                                       
                },  //end of panel1                                                    
            ] // end of   layout: "vbox", padding: "5", items: [
        }  //end of  sub_PrnTableFlds , items[{


3>font-size 的設定

說到font-size,就必須要知道該屬性設定值的問題,font-size可設定的值Amos會將其區分成三大類:
關鍵字 :  small  , large, larger,
絕對單位:  
                        px (1pixel = 1/96in) , 螢幕上顯示數據的最基本的點
                        pt (1point = 1/72in) ,
是印刷行業常用單位
                        cm
                        mm

                       in (1inch = 96px = 2.54cm)

相對單位:   % (百分比)


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选择器、Xpathhtml元素,也就是通过上述表达式来匹配目标元素。

2.2$(element)

$()可以是 $(element),即一个特定的DOM元素。如常用的DOM对象有documentlocationform等。

2.3$(function)

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

1

2

3

$(document).ready(function(){

alert("Hello world!");

});

可以写作:

1

2

3

$(function(){

alert("Hello world!");

});

 


Array 及 Object 的宣告, 及新增元素, 取得元素值處理

 目的: Array 及  Object 的宣告, 及新增元素 取值處理

處理說明:  1>Array  及 Object 的宣告
                       var Tmp_Ary=[];      //宣告 Array   
                       var Tmp_Obj={};     //宣告 Object

                   2>Array 及 Object 設定值
                       var Tmp_len=0;
                       for (var i=1; i<=5;i++)
                       { 
                           Tmp_len=Tmp_Ary.push(i) //傳回目前 Tmp_Ary.length
                           //Tmp_Ary[Tmp_len-1]=整數,並非Object ,所以無法設定property(newSet)
                           Tmp_Ary[Tmp_len - 1].newSet = i;    //undefined
                        } 
                       
                        Tmp_Obj = {
                             name: "蔡聰進",
                             gender: "男",
                        };             
                        Tmp_Obj.newSet=1;  //新增  Object 的屬性,直接 Assing 即可 

                        Tmp_len=Tmp_Ary.push(Tmp_Obj) ;
                        //Tmp_Ary[Tmp_len-1] 為 Object ,所以可以設定 property(newSet2) , 取值也會正常
                        Tmp_Ary[Tmp_len-1].newSet2=2;  

                   3>Array 及 Object 取值 
                       var Tmp_Ary=[1,2,3,4,5] ;
                       var  Tmp_Obj={
                               name: "蔡聰進",
                               gender: "男",
                               newSet: 1,
                               }
                      var Tmp_Str="";
                       //取得  Array 元素值_1  for 
                      for (var i=0; i<=Tmp_Ary.length-1;i++)
                     { 
                         Tmp_Str="Tmp_Ary[i]="+Tmp_Ary[i];
                        console.log(Tmp_Str) ;
                      }
                      //取得  Object property值  for 
                     for (var prop in Tmp_Obj)
                     {
                        Tmp_Str="Tmp_Obj["+prop +"]="+Tmp_Obj[prop];
                        console.log(Tmp_Str) ;
                      }

                      //取得  Array元素值_2  Ext.each
                      Ext.each(Tmp_Ary, functon(item,index){
                        Tmp_Str="Tmp_Ary["+index+"]="+item;
                        console.log(Tmp_Str) ;
                      });


實際案例:
                    var Tmp_Ary = [];
                    var Tmp_Obj = {};
                    var cur_recs = Ext.getCmp('grid_Single').getView().getSelectionModel().getSelection();
                    var cur_rec;
                    if (cur_recs.length > 0) {
                        cur_rec = cur_recs[0];
                        Tmp_Ary.push(cur_rec);
                        cur_rec.newSet = 0;
                    }
                    console.log("cur_rec.newSet:", cur_rec.newSet);
            console.log("Tmp_Ary[Tmp_Ary.length-1].newSet:", Tmp_Ary[Tmp_Ary.length - 1].newSet);
                    console.log("0 Tmp_Ary.length:", Tmp_Ary.length);
                    //mysuccessalert("cur_rec.newSet:" + cur_rec.newSet.toString());                    
                    var Tmp_len;
                    var Tmp_Str = "";

                   //0.5
                    for (var i = 1; i <= 5; i++) {                     
                        Tmp_len = Tmp_Ary.push(i);
                        console.log("0.5 Tmp_len:", Tmp_len);
                        Tmp_Ary[Tmp_len - 1].newSet = i;
                        //因 Tmp_Ary[Tmp_len - 1]=整數,非 Object , 所以,newSet undefined
                        console.log("0.5  Tmp_Ary[Tmp_len - 1].newSet:", Tmp_Ary[Tmp_len - 1].newSet);
                    }
                    for (var i = 1; i <= 5; i++) {
                        var Tmp_Obj1 = {};
                        Tmp_Obj1.value = i;
                        Tmp_len = Tmp_Ary.push(Tmp_Obj1);
                        console.log("1 Tmp_len:", Tmp_len);
                        //因 Tmp_Ary[Tmp_len - 1]= Object , 所以,newSet 可存值
                        Tmp_Ary[Tmp_len - 1].newSet = i;    
                        console.log("1  Tmp_Ary[Tmp_len - 1].newSet:", Tmp_Ary[Tmp_len - 1].newSet);
                    }
                    console.log("1 Tmp_Ary.length:", Tmp_Ary.length);
     
                    //1.5
                    //item 為 Array 元素
                    Ext.each(Tmp_Ary,
                        function (item, index) {
                            console.log("1.5 index:", index);
                            Tmp_Str = " 1.5  Tmp_Ary[index]=" + Tmp_Ary[index];
                            console.log(Tmp_Str);
                            Tmp_Str = " 1.5  Tmp_Ary[index].newSet=" + Tmp_Ary[index].newSet;
                            console.log(Tmp_Str);
                    )  
 
                    //1.8     
                    for (var index in Tmp_Ary) {
                        Tmp_Str = " 1.8  index=" + index;
                        console.log(Tmp_Str);
                        Tmp_Str = " 1.8  Tmp_Ary[index].newSet=" + Tmp_Ary[index].newSet;
                        console.log(Tmp_Str);
                    }
                    
                    //1.9  
                    Tmp_Str = " 1.9  Tmp_Ary.length=" + Tmp_Ary.length;
                    console.log(Tmp_Str);                     
                    for (var index = 0; index < Tmp_Ary.length ; index++) {
                        Tmp_Str = " 1.9  index: " + index;
                        console.log(Tmp_Str);
                        Tmp_Str = " 1.9  Tmp_Ary[index].newSet=" + Tmp_Ary[index].newSet;
                        console.log(Tmp_Str);
                    }
                    Tmp_Obj = {
                        name: "蔡聰進",
                        gender: "男",
                    };                 
                    Tmp_Obj.newSet = 1;

                    //2  
                    for (var item in Tmp_Obj) {
                        Tmp_Str = "2 Tmp_Obj[" + item + "] is " + Tmp_Obj[item];
                        console.log(Tmp_Str);
                    }

輸出結果:
0 Tmp_Ary.length: 1
0.5 Tmp_len: 2
0.5  Tmp_Ary[Tmp_len - 1].newSet: undefined
0.5 Tmp_len: 3
0.5  Tmp_Ary[Tmp_len - 1].newSet: undefined
0.5 Tmp_len: 4
0.5 Tmp_Ary[Tmp_len - 1].newSet: undefined
0.5 Tmp_len: 5
0.5  Tmp_Ary[Tmp_len - 1].newSet: undefined
0.5 Tmp_len: 6
0.5  Tmp_Ary[Tmp_len - 1].newSet: undefined

1 Tmp_len: 7
1  Tmp_Ary[Tmp_len - 1].newSet: 1
1 Tmp_len: 8
1  Tmp_Ary[Tmp_len - 1].newSet: 2
1 Tmp_len: 9
1  Tmp_Ary[Tmp_len - 1].newSet: 3
1 Tmp_len: 10
1  Tmp_Ary[Tmp_len - 1].newSet: 4
1 Tmp_len: 11
1  Tmp_Ary[Tmp_len - 1].newSet: 5
1 Tmp_Ary.length: 11

1.5 index: 0
1.5  Tmp_Ary[index]=[object Object]
1.5  Tmp_Ary[index].newSet=0
1.5 index: 1
1.5  Tmp_Ary[index]=1
1.5  Tmp_Ary[index].newSet=undefined
1.5 index: 2
1.5  Tmp_Ary[index]=2
1.5  Tmp_Ary[index].newSet=undefined
1.5 index: 3
1.5  Tmp_Ary[index]=3
1.5  Tmp_Ary[index].newSet=undefined
1.5 index: 4
1.5  Tmp_Ary[index]=4
1.5  Tmp_Ary[index].newSet=undefined
1.5 index: 5
1.5  Tmp_Ary[index]=5
1.5  Tmp_Ary[index].newSet=undefined
1.5 index: 6
1.5  Tmp_Ary[index]=[object Object]
1.5  Tmp_Ary[index].newSet=1
1.5 index: 7
1.5  Tmp_Ary[index]=[object Object]
1.5  Tmp_Ary[index].newSet=2
1.5 index: 8
1.5  Tmp_Ary[index]=[object Object]
1.5  Tmp_Ary[index].newSet=3
1.5 index: 9
1.5  Tmp_Ary[index]=[object Object]
1.5  Tmp_Ary[index].newSet=4
1.5 index: 10
1.5  Tmp_Ary[index]=[object Object]
1.5  Tmp_Ary[index].newSet=5

1.8  index=0
1.8  Tmp_Ary[index].newSet=0
1.8  index=1
1.8  Tmp_Ary[index].newSet=undefined
1.8  index=2
1.8  Tmp_Ary[index].newSet=undefined
1.8  index=3
1.8  Tmp_Ary[index].newSet=undefined
1.8  index=4
1.8  Tmp_Ary[index].newSet=undefined
1.8  index=5
1.8  Tmp_Ary[index].newSet=undefined
1.8  index=6
1.8  Tmp_Ary[index].newSet=1
1.8  index=7
1.8  Tmp_Ary[index].newSet=2
1.8  index=8
1.8  Tmp_Ary[index].newSet=3
1.8  index=9
1.8  Tmp_Ary[index].newSet=4
1.8  index=10
1.8  Tmp_Ary[index].newSet=5


1.9  Tmp_Ary.length=11
1.9  index: 0
1.9  Tmp_Ary[index].newSet=0
1.9  index: 1
1.9  Tmp_Ary[index].newSet=undefined
1.9  index: 2
1.9  Tmp_Ary[index].newSet=undefined
1.9  index: 3
1.9  Tmp_Ary[index].newSet=undefined
1.9  index: 4
1.9  Tmp_Ary[index].newSet=undefined
1.9  index: 5
1.9  Tmp_Ary[index].newSet=undefined
1.9  index: 6
1.9  Tmp_Ary[index].newSet=1
1.9  index: 7
1.9  Tmp_Ary[index].newSet=2
1.9  index: 8
1.9  Tmp_Ary[index].newSet=3
1.9  index: 9
1.9  Tmp_Ary[index].newSet=4
1.9  index: 10
1.9  Tmp_Ary[index].newSet=5

2 Tmp_Obj[name] is 蔡聰進
2 Tmp_Obj[gender] is 男
2 Tmp_Obj[newSet] is 1

2022年10月27日 星期四

V20107 – 若有新增/修改, 則 MD不可再跳到其他筆資料 - selectionchange - beforedeselect

 目的: V20107 – 編輯 – MDD – 子步序說明 若有新增/修改, MD不可再跳到其他筆資料

處理說明:  1>判斷 MDD- grid_D1 是否有異動資料
                       if (Ext.getCmp('grid_D1').store.tempData.length > 0) {
                       }
                    2>在 grid_D 的 beforedeselect event (目前選擇的資料 deselect 時)
                        判斷 grid_D1 是否有異動資料, 若有,則不允許選擇( return false)
                       Ext.getCmp('grid_D').on("beforedeselect", function (me, record, index, eOpts) {
                      })

                    



1>*.js
 Ext.getCmp('grid_D').on("beforedeselect", function (me, record, index, eOpts) {
        //若 M-D-D(grid_D1) 已有新增/修改/刪除,則不允許 grid_D 跳至另一筆資料
        if (Ext.getCmp('grid_D1').store.tempData.length > 0) {
            var Tmp_Str = "";            
            Tmp_Str = Tmp_Str+"子步序說明的資料已有異動<br>"
                + " 不可移動至另一工作步序說明<br>"
                + "請先按[存檔]鈕<br>"
                + "再移動步序說明";
            mysuccessalert(Tmp_Str);
            return false;
        }
    }); // beforedeselect
--> 

  不可選   beforeselect event  
  --> 因為beforeselect event 時,目前選擇資料已不被選擇(deselect) ,
        若不符 return false, grid_D 會無選擇資料

2022年10月26日 星期三

V20107 – [刪除]鈕, 除刪除主檔外, 連明細檔一起刪除 or [刪除]鈕, 只刪除主檔, 顯示訊息 " 明細檔必需先刪除,才可刪主檔

目的: V20107 – [刪除]鈕, 除刪除主檔外, 連明細檔一起刪除   (Default)

           or  [刪除]鈕,  只刪除主檔, 顯示訊息 " 明細檔必需先刪除,才可刪主檔

處理說明: 1> [刪除]鈕, 除刪除主檔外, 連明細檔一起刪除   (Default)

                  2>  [刪除]鈕,  只刪除主檔, 顯示訊息 " 明細檔必需先刪除,才可刪主檔


1>*.js
  1>> [刪除]鈕, 除刪除主檔外, 連明細檔一起刪除   (Default)
          不需額外處理

  2>> [刪除]鈕, 只刪除主檔外, 若仍有明細檔,則不允許刪除
        Ext.getCmp("btn_del").delMessage = "確定要刪除本筆工作程序主檔嗎 ?<br>"
                                                                   + "請先刪除子步序資料,才可刪除主檔資料<br> ";


    //主檔.[刪除]前,先判斷子Table 是否有資料,
    //若有的顯示訊息,請先刪除子Table資枓
    Ext.getCmp("btn_del").beforeDel = function () {
        var Tmp_grid_D1 = Ext.getCmp("grid_D1");
        var Tmp_grid_D = Ext.getCmp("grid_D");
        var Tmp_Str = "";
        if (!checkisnull(Tmp_grid_D1) && !checkisnull(Tmp_grid_D)) {
            if ((Tmp_grid_D1.store.getCount() > 0) || (Tmp_grid_D.store.getCount() > 0)) {
                Tmp_Str = "主工作程序還有明細資料(子步序), 不可刪除主工作程序資料<br>"
                    + "請先刪除主工作程序明細資料(步序說明/子步序說明)<br>"
                    + "才可刪除主工作程序資料";
                mywarnalert(Tmp_Str);
                return false;
            }
        }
    }



2>*.cs
  1>> [刪除]鈕, 除刪除主檔外, 連明細檔一起刪除   (Default)
       [HttpPost]
        public void Delete()
        {
            var c = System.Web.HttpContext.Current;
            NameValueCollection nvc = c.Request.Form;
            string[] arrCondition;
            //string[] arrCondition = getPK("AMM_WKSTPDD"); //需修改成指定的key
             //除刪除主檔外, 連明細檔一起刪除   (Default)
            arrCondition = getPK("AMM_WKSTP"); //需修改成指定的key
            excuteDelete(nvc, "AMM_WKSTPDD", arrCondition);

            //arrCondition = getPK("AMM_WKSTPD"); //需修改成指定的key
            arrCondition = getPK("AMM_WKSTP"); //需修改成指定的key
            excuteDelete(nvc, "AMM_WKSTPD", arrCondition);

            arrCondition = getPK();
            excuteDelete(nvc, DBTable, arrCondition);
        }

      2>> [刪除]鈕, 只刪除主檔外, 若仍有明細檔,則不允許刪除
        [HttpPost]
        public void Delete()
        {
            var c = System.Web.HttpContext.Current;
            NameValueCollection nvc = c.Request.Form;
            string[] arrCondition;          

            arrCondition = getPK();
            excuteDelete(nvc, DBTable, arrCondition);
        }