在 Sencha 框架内使用外部 javascript 文件添加二维码

Question

我们正在尝试向旧系统添加功能。我们的客户使用扫描仪，所以如果我们可以在屏幕上添加二维码供他们扫描，那将是理想的选择。我找到了一个显示 QR 码的小型开源 javascript 库。我想使用它，但我从数据库中提取 URL，将其放入商店，然后在屏幕上填充 link。所以，我有以下内容：

        this.searchForm = {
            frame: true,
            xtype: 'form',
            layout: 'form',
            labelWidth: 150,
            items: [{
                xtype: 'component',
                fieldLabel: 'Wireless App',
                tpl: '<div id="qrcode" style="width:100px; height:100px;"></div><a href="{Url}">{Url}</a>',
                data: { Url: '' },
                ref: '../../WirelessAppLabel'
            }, {
                xtype: 'label',
                ref:'../../StatusLabel'
            }]
        };

        lookupRF: function(search) {
            this.createRFLookup();
            this.lookupRFWindow.show();

            this.WirelessAppStore = WirelessAppUrl.getInstance().createStore();
            
            PM.Retriever.retrieve([this.WirelessAppStore], {
                callback: function (response, success) {
                    if (success) {
                        this.WMSAppUrl = this.WirelessAppStore.data.items[0].data.Url;

                        this.lookupRFWindow.WirelessAppLabel.update({ Url: this.WMSAppUrl });
                        new QRCode(document.getElementById("qrcode"), this.WMSAppUrl);
                    }
                },
                scope: this
            });
        }

其中 PM 是我们内部创建的命名空间。（这两个函数不在同一个文件中，但一个引用另一个）。但是，我不断收到错误消息，说 QRCode 未定义。我尝试使用 Ext.Loader.load() 加载它，并且还只是在 index.html 中添加对脚本的引用，但是这两个选项都不起作用。有什么建议吗？

这是我们尝试使用的 QR 码 javascript 的 link：https://davidshimjs.github.io/qrcodejs/

Answer 1

我找到了一种更简单的方法。与其尝试在 Javascript 中做所有事情，它已经在攻击服务器以从数据库中提取数据，因此我添加了一个 QR 码生成器，它创建了一个位图服务器端，将其转换为 Base64String。所以，现在我的代码如下所示：

    this.searchForm = {
        frame: true,
        xtype: 'form',
        layout: 'form',
        labelWidth: 150,
        items: [{
            xtype: 'component',
            fieldLabel: 'Wireless App',
            tpl: '<a href="{Url}">{Url}</a><br/><img src="data:image/jpeg;base64, {Image}" style="width:100px;height:100px;" />',
            data: {
                Url: '',
                Image: ''
            },
            ref: '../../WirelessAppLabel'
        }, {
            xtype: 'label',
            ref:'../../StatusLabel'
        }]
    };

    lookupRF: function(search) {
        this.createRFLookup();
        this.lookupRFWindow.show();

        this.WirelessAppStore = WirelessAppUrl.getInstance().createStore();
        
        PM.Retriever.retrieve([this.WirelessAppStore], {
            callback: function (response, success) {
                if (success) {
                    this.WMSAppUrl = this.WirelessAppStore.data.items[0].data.Url;
                    this.WMSAppImage = this.WirelessAppStore.data.items[0].data.QRCode;

                    this.lookupRFWindow.WirelessAppLabel.update({
                        Url: this.WMSAppUrl,
                        Image: this.WMSAppImage
                    });
                }
            },
            scope: this
        });

然后为了实际创建 QRCode，我使用了这个开源包：https://github.com/codebude/QRCoder

不完全是所要求的解决方案，但效果非常好。

在 Sencha 框架内使用外部 javascript 文件添加二维码

Add QR code using external javascript file within Sencha framework

javascript

qr-code

extjs3