Add QR code using external javascript file within Sencha framework

Question

We are trying to add functionality to an old system. Our clients use scanners, so it would be ideal if we could add a QR code on screen for them to scan. I found a small open source javascript library that displays QR codes. I wanted to use that, but I am pulling the URL from the database, putting it into a Store, and then populating a link on screen. So, I have the following:

        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
            });
        }

where PM is a namespace we created internally. (These two functions are not in the same file, but one references the other). But, I keep getting errors saying QRCode is not defined. I tried loading it using Ext.Loader.load() and also just adding a reference to the script in index.html, but neither option worked. Any suggestions?

Here is the link to the QR Code javascript we are attempting to utilize: https://davidshimjs.github.io/qrcodejs/

Answer 1

I found a much easier approach. Rather than try to do everything in Javascript, it is already hitting the server to pull from the database, so I added a QR Code generator that created a Bitmap server side, which converts it into a Base64String. So, now my code looks like this:

    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
        });

And then to actually create the QRCode, I used this open source package: https://github.com/codebude/QRCoder

Not exactly the solution that was asked for, but it works really well.