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/
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.