V120502B 顯示 二維條碼 圖示 - genQRcodeDiv("mypanel", "5325YET064602&test&123eee"); - genQRcodeStr("TEST QRCODE",90,90);

目的: V120502B 產生二維條碼的圖案

處理說明:  1> 二維條碼 函式庫:  myfunc.js
                         Ext.Loader.loadScript({    url: '../JsFunction/qrcode.js'});
                          //barcode 文字(Tmp_barcode_text)=件號&ECNO&日期&數量&工號&備註(機號)   
                          genQRcodeStr(Tmp_barcode_text,90,90,false);

                    2>[顯示二維修碼] 鈕

                        //將 QRCODE 圖片放於 sub_panel4                        

                       genQRcodeDiv("sub_panel4", "5325YET064602&test&123eee");

1>*.js  

- myfunc.js

Ext.Loader.loadScript({

    url: '../JsFunction/qrcode.js'

});

/*

//產生二維條碼的範例 -

 var mypanel = new Ext.Panel({

        id: 'mypanel',

        layout:'fit'

    });

1>>於 DOM元件 加入  二維條碼圖片  - genQRcodeDiv

      Ex: genQRcodeDiv("mypanel", "5325YET064602&test&123eee");

  

 function genQRcodeDiv(destId, v, cm_x, cm_y) {

    //參考網址:https://github.com/papnkukn/qrcode-svg

    var qrcode = new QRCode({

        content: v,

        join: true, //Crisp rendering and 4-5x reduced file size

        width: 100, //px

        height: 100, //px,

        padding: 0

    });

    var svg = qrcode.svg();

    //$('<div></div>').html(svg+'<br>'+v).appendTo('#' + destId);

    document.getElementById(destId).innerHTML = svg + '<br>' + v;

}

2>>產生  二維條碼圖片字串  - genQRcodeStr

       Ex: Tmp_Str=Tmp_Str+ "<div id='my_div_barcode" + Tmp_uni + "'>"

                                                + genQRcodeStr("TEST QRCODE")

                                                +"</div>" ;

 function genQRcodeStr( v, px_w, px_h, is_showtxt) {
    //參考網址:https://github.com/papnkukn/qrcode-svg
    if (checkisnull(px_w))
        px_w = 50;
    if (checkisnull(px_h))
        px_h = 50;
    var qrcode = new QRCode({
        content: v,
        //container: "svg-viewbox", //Responsive use
        join: true, //Crisp rendering and 4-5x reduced file size
        width: px_w, //px
        height: px_h, //px,
        padding: 0
    });
    var svg = qrcode.svg();
    var Tmp_RtnStr = svg + '<br>' ;
    if (is_showtxt)
        Tmp_RtnStr = Tmp_RtnStr + v;
    console.log("QR Code Str", Tmp_RtnStr);
    return Tmp_RtnStr;

3>> V120502.js - [顯示二維條碼]
{
                            xtype: 'button',
                            id: 'sub_btn_OK',
                            flex: 3,
                            border: 1,
                            text: '二維標籤 ',  //sub2
                            hidden: true,
                            iconCls: 'icon-search',
                            handler: function () {
                               //顯示 [二維條碼] 在下方的 panel(sub_panel4)
                              genQRcodeDiv("sub_panel4", "5325YET064602&test&123eee");
                            }
                        },  // end of 確定                                        

PS: 條碼套件使用參考文件 -

Ext.Net 1.2.0_演示 Ext.Net+QR 码封装条形码控件

https://www.cnblogs.com/liuning8023/archive/2012/05/20/2511015.html