We Keep Coding

Add QR code using external javascript file within Sencha framework

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>{Url}',
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: '{Url}<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.

Angular ng-smart-table delete confirm modal dose not work

Trying to use ng-smart-table to shows delete confirm modal when user try to delete row, but the modal does not appear.
I added delete related settings following documents and other examples but still modal does not show.
<ng2-smart-table [settings]="settings" [source]="data" (deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table>
settings = {
mode: 'external',
pager: {perPage: 10},
hideSubHeader: true,
sort: false,
actions: {
position: 'right',
edit: false,
delete: true,
add: false,
},
delete: {confirmDelete: true},
columns: {
id: {title: 'ID'},
},
}
onDeleteConfirm($event: any) {
if (window.confirm('Are you sure you want to delete?')) {
$event.confirm.resolve();
} else {
$event.confirm.reject();
}
}
Nothing shows on Chrome Console log.

Remove mode: 'external' from the settings.
Please refer the demo for better understanding. DEMO https://stackblitz.com/edit/example-ng2-smart-table

As you can see in the ng2-smart-table documentation:
Triggered only if table confirmDelete = true and mode = inline.
So please change the mode in settings to inline instead of external.

Electron window reloads when saved file is overwriten / replaced

So, I have the save function written and it works exactly as intended the first time I save a file. However, if I try to overwrite the file by saving it again, the file saves fine, but the window reloads clearing all the data that's been entered. I can just load the saved file and continue editing, but that will get annoying fast. I cannot find any info on how to resolve this issue, anywhere. Any help would be greatly appreciated.
function saveData(){
let data = {}
data.item1 = getItem1()
data.item2 = getItem2()
data.item3 = getItem3()
// convert data object to a string
let dataString = JSON.stringify(data, null, 4)
// open save dialog and chooses path
let savePath = dialog.showSaveDialog({filters: [{name: 'Save File', extensions: ['json']},]})
// save file to disk
if (savePath != undefined){
fs.writeFile(savePath, dataString, function(err) {
// file saved or err
})
}
}
And here is the menu template entry:
{ label: 'File',
submenu: [
{ label: 'New', click: SendEvent('file-new')},
{ label: 'Open', click: SendEvent('file-open')},
{ label: 'Save', accelerator: 'CmdOrCtrl+S', click: function(){
saveData();
}
},
{ label: 'Save As',
accelerator: 'CmdOrCtrl+Shift+S',
click: SendEvent('file-save-as')},
{ label: 'Close', click: SendEvent('file-close')},
{ type: 'separator'},
{ label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: function() {app.quit();}},
{ type: 'separator' },
{ label: 'Print', accelerator: 'CmdOrCtrl+P', click(){win.webContents.print({silent: false, printBackground: false})} }
]
},
And the getItem1 function:
function getItem1(){
const item1 = document.getElementById('itemID').src
return item1
}

Now I'm feeling a bit dumb. It turns out that the reason it was reloading was because I'm using the electron-reload package to automatically reload the page when I save the source files. It was also causing the page to reload when the save file was overwritten. Good to know going forward.
Edit:
You can tell electron-reload to ignore a directory by ammending your require statement to look something like this:
require('electron-reload')(__dirname, {ignored: /<folder_to_be_ignored>|[\/\\]\./});
https://github.com/yan-foto/electron-reload#api

Dragging windows

I did some research on this and still can't find a good solution for it. I wrote my app in ExtJS 4.1 and when I run it on an iPod the dragging functionality is disabled by default (which is what I want), but if I write the same app in ExtJS 6.2 all windows can be draggable which causes issues of visibility of the app. With that being said, Does anyone know how to disable window dragging when using Tablets (iPod, iPad, etc.)? I'm using ExtJS 6.2
Here's my working code that works great for a single window, but I want a general solution that will stop ALL windows from being dragged.
var win = Ext.create('Ext.Window', {
title: "My Window",
width: 500,
modal: true,
layout: 'fit',
items: form,
buttons: [{
text: 'Close',
handler: function() {
win.hide();
}
}]
});
win.show();
if(Ext.os.deviceType === 'Tablet') {
win.dd.disable();
}

A "global solution" sounds like you want to use an override to apply one of the other answers globally to your application:
Ext.define('MyAppName.override.Window', {
override: 'Ext.window.Window',
initComponent: function() {
this.callParent(arguments);
if(Ext.os.deviceType === 'Tablet') {
this.dd.disable();
}
}
})
or
Ext.define('MyAppName.override.Window', {
override: 'Ext.window.Window',
initComponent: function() {
if(Ext.os.deviceType === 'Tablet') {
this.draggable = false;
}
this.callParent(arguments);
}
})
To make the override work, put it into the file app/override/Window.js and add a reference to your requires array in Application.js:
requires: [
'MyAppName.override.Window'
],

You are looking for Ext.os class.
More precisely Ext.os.is method, according to the docs it has all the values you would need.
I am not sure why you want to block only iPads and not tables in general. If you wan tablets than you can use if(Ext.os.deviceType === 'Tablet') {...}
Otherwise if(Ext.os.is.iPad) {...}.
UPDATE Solution:
If you want to force anything across all classes in the ExtJS you would use Ext.override.
So the solution would be to put at the beginning of the app this code:
if (Ext.os.deviceType === 'Tablet') {
Ext.override('Ext.Window', {
privates: {
initDraggable: function(){}
}
})
}
FYI You can check the Ext.Window source code. I had to override this method, the default value draggable: false doesn't work.
https://fiddle.sencha.com/#view/editor&fiddle/2iqi
To test it, just press F12 switch to table mode.
But this solution has 1 drawback:
If the target is a class declared using Ext.define, the override
method of that class is called
Which means this solution don't work when you use Ext.create('Ext.Window',{})
Solution for that would be to define our own Ext.Window class and than inside the app when you are using Ext.create('Ext.Window' you would use Ext.create('Fiddle.view.MyWindow', and when we have our own function already we don't need to use override but can put if directly into the class definition like this:
Ext.define('Fiddle.view.MyWindow', {
extend: 'Ext.Window',
alias: 'widget.mywindow',
draggable: (function(){
if (Ext.os.deviceType === 'Tablet') {
return false;
} else {
return true;
}
})()
});
https://fiddle.sencha.com/#view/editor&fiddle/2iqj
I don't know how to override it for Ext.create('Ext.Window' if you still insists on using it. One solution would be to re-write Ext.create or simply edit the framework source itself but I highly discourage from that.

Why you are not using draggable: false in window config
Here is some code in FIDDLE
var win = Ext.create('Fiddle.view.MyWindow', {
title: "My Window",
width: 500,
draggable: false,
modal: true,
layout: 'fit',
buttons: [{
text: 'Close',
handler: function() {
win.hide();
}
}]
});
win.show();

What is wrong with this javascript?

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
var usr = 'charliesheen';
function changeusr()
{
usr = document.getElementById("usrText").value;
updatetwitter();
}
var twitter;
newtwitter();
function updatetwitter()
{
twitter.render().setUser(usr).start();
}
function newtwitter()
{
twitter =
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 200,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#367542'
},
tweets: {
background: '#e3dfe3',
color: '#000000',
links: '#110af5'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser(usr).start();
}
</script>
<br/>
Change user:
<input name="usrText"/>
<button onclick="changeusr()">Go</button>
The results I see are: It loads fine. When I enter a new username and click "go" it may or may not reload the twitter widget, and the link "join the conversation" points to the correct url. I'd like it to reload the url with the new user entered. I'm a complete javascript noob. Thanks in advance.

Your input needs an id:
<input id='usrText' name="usrText"/>
Internet Explorer will return elements by name from "getElementById()", but that is simply legacy broken behavior and it's not imitated by other browsers.
edit — an update:
There doesn't appear to be much documentation for that widget thing. Things work somewhat better if you set the "live" feature to true. Also, when you update the user, you have to zap an internal variable on the widget:
function updatetwitter()
{
twitter._profileImage = null;
twitter.setUser(usr).render().start();
}
Here is the jsfiddle if you'd like to see it.