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.

Open only one popup window (panel)

So i have this function onDisplayError which is called each time if request fails. This means if user press save button and 3 request are failing i currently getting 3 popup messages. My goal is that this function checks if my popup window is already opened. If it is then i will append errors in my already opened window otherwise it should open this error popup
onDisplayError: function (response, message) {
var errorPanel = Ext.create('myApp.view.popup.error.Panel',{
shortMessage: message,
trace: response
});
if(errorPanel.rendered == true){
console.log('Do some other stuff');
}else{
errorPanel.show();
}
},
This is Panel.js
Ext.define('myApp.view.popup.error.Panel', {
extend: 'Ext.panel.Panel',
requires: [
'myApp.view.popup.error.PanelController'
],
controller: 'myApp_view_popup_error_PanelController',
title: 'Fail',
glyph: 'xf071#FontAwesome',
floating: true,
draggable: true,
modal: true,
closable: true,
buttonAlign: 'center',
layout: 'border',
shortMessage: false,
width: 800,
height: 200,
initComponent: function() {
this.items = [
this.getMessagePanel(),
this.getDetailsPanel()
];
this.callParent(arguments);
},
getMessagePanel: function() {
if(!this.messagePanel) {
var message = this.shortMessage;
this.messagePanel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5,
height: 200,
region: 'center',
border: false,
html: message
});
}
return this.messagePanel;
},
getDetailsPanel: function() {
if(!this.detailsPanel) {
this.detailsPanel = Ext.create('Ext.panel.Panel', {
title: 'Details',
hidden: true,
region: 'south',
scrollable: true,
bodyPadding: 5,
height: 400,
html: '<pre>' + JSON.stringify(this.trace, null, 4) + '</pre>'
});
}
return this.detailsPanel;
}
The problem is that i'm still getting multiple popups displayed. I think that the problem is that var errorPanel loses reference so it can't check if this popup (panel) is already opened. How to achieve desired effect? I'm working with extjs 6. If you need any additional information's please let me know and i will provide.

You could provide to your component definition a special xtype.
Ext.define('myApp.view.popup.error.Panel', {
extend: 'Ext.panel.Panel',
xtype:'myxtype'
and then you could have a very condensed onDisplayError function:
onDisplayError: function (response, message) {
var errorPanel = Ext.ComponentQuery.query('myxtype')[0] || Ext.widget('myxtype');
errorPanel.appendError(message, response)
errorPanel.show();
},
The panel's initComponent function should initialize an empty window, and appendError should contain your logic to append an error (which may be the first error as well as the second or the third) to the list of errors in the panel.

Using Ext.create will always create a new instance of that class.
You can use the reference config to create a unique reference to the panel.
Then, use this.lookupReference('referenceName') in the controller to check if the panel already exists, and show().
You also have to set closeAction: 'hide' in the panel, to avoid panel destruction on close.
Otherwise, you can save a reference to the panel in the controller
this.errorPanel = Ext.create('myApp.view.popup.error.Panel' ....
Then, if (this.errorPanel) this.errorPanel.show();
else this.errorPanel = Ext.create...

How do I set data in an unrelated ViewModel

I have a sign in process that I've roughed into a fiddle (the part I'm stuck on starts at line 110).
Here's a copy of the code:
Ext.define('MyApp.MyPanel',{
extend: 'Ext.panel.Panel',
title: 'My App',
controller: 'mypanelcontroller',
viewModel: {
data:{
email: 'Not signed in'
}
},
width: 500,
height: 200,
renderTo: Ext.getBody(),
bind:{
html: "Logged in as: <b>{email}</b>"
},
buttons:[
{
text: 'Sign in',
handler: 'showSignInWindow'
}
]
});
Ext.define('MyApp.MyPanelController',{
extend: 'Ext.app.ViewController',
alias: 'controller.mypanelcontroller',
showSignInWindow: function (b,e,eOpts){
Ext.widget('signinwindow').show();
}
});
Ext.define('MyApp.SignInWindow',{
extend: 'Ext.window.Window',
title: 'Sign in',
controller: 'signincontroller',
xtype: 'signinwindow',
width: 400,
title: 'Sign In',
modal: true,
layout: 'fit',
items:[
{
xtype: 'form',
reference: 'signinfields',
layout: 'anchor',
bodyPadding: 5,
defaults: {
anchor: '100%',
xtype: 'textfield'
},
items:[
{
fieldLabel: 'Email',
name: 'email',
allowBlank: false
},
{
fieldLabel: 'Password',
name: 'password',
allowBlank: false,
inputType: 'password'
}
],
buttons:[
{
text: 'forgot password',
width: 120,
//handler: 'onForgotPassword'
},
'->',
{
text: 'sign in',
width: 120,
handler: 'onSignIn'
}
]
}
]
});
Ext.define('MyApp.SignInController',{
extend: 'Ext.app.ViewController',
alias: 'controller.signincontroller',
onSignIn: function (button, event, eOpts){
var data = button.up('form').getValues();
button.up('window').mask('Signing in...');
Ext.Ajax.request({
// sorry, I don't know how to fake an API response yet :/
url: '/authenticate/login',
jsonData: data,
scope: this,
success: function (response){
var result = Ext.decode(response.responseText);
if(result.loggedIn == true){
/*
This is where I need help.
From the sign in window, I would like to update the viewmodel in `MyApp.MyPanel` with the
email returned in the response. If the window was a child of MyPanel, I would be able to update
via the ViewModel inheritance, but I can't here because the window isn't part of the `items` config.
*/
this.getViewModel().set('email', result.data[0].email);
Ext.toast({
title: 'Sign in successful',
html: "You've been signed in.",
align: 't',
closable: true,
width: 300
});
button.up('window').destroy();
} else {
Ext.toast({
title: 'Sign in failed',
html: "You sign in failed: " + result.message,
closable: true,
width: 300,
align: 't'
});
button.up('window').unmask();
}
},
failure: function (){
// debugger;
}
})
},
onForgotPassword: function (){
Ext.Ajax.request({
url: '/authenticate/test',
success: function (response){
},
failure: function (){
}
})
// Ext.Msg.alert('trigger forgot password logic', "This is where you need to trigger the API to send the forgot email form. <br>Say something here about how you'll get an email");
}
});
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('MyApp.MyPanel');
}
});
What I'm trying to do is:
Show a panel with a sign in button
Clicking on the button shows a sign in window
Submitting the sign in form attempts an authentication against the server
On a successful authentication, the email for the user is set in the initial panel's ViewModel
The last bullet is what I'm having a problem with.
If the sign in window was a child of the panel then I could set it through the ViewModel inheritance, but since I'm using a widget show I can't set back through the panel's items config.
Is there a way of doing this correctly?

Nevermind, I figured it out. The answer was in my question all along:
If the sign in window was a child of the panel then I could set it through the ViewModel inheritance, but since I'm using a widget show I can't set back through the panel's items config.
Just make the window a child of the panel:
Ext.define('MyApp.MyPanelController',{
extend: 'Ext.app.ViewController',
alias: 'controller.mypanelcontroller',
showSignInWindow: function (b,e,eOpts){
// Instead of creating the widget and showing it, create it and add it to the panel.
// The window is going to float anyway, so being a child of the panel is no big deal
var signinwindow = Ext.widget('signinwindow');
this.getView().add(signinwindow).show();
}
});
Doing it this way means the window inherits the viewmodel of the panel and you can set the viewmodel data like so:
Ext.define('Registration.view.signin.SignInController', {
extend: 'Ext.app.ViewController',
alias: 'controller.signin-signin',
onSignIn: function (button, event, eOpts){
var data = button.up('form').getValues();
button.up('window').mask('Signing in...');
Ext.Ajax.request({
url: '/authenticate/login',
jsonData: data,
scope: this,
success: function (response){
debugger;
var result = Ext.decode(response.responseText);
if(result.loggedIn == true){
// Now that the window has inherited the panel's viewmodel
// you can set it's data from the windows controller
this.getViewModel().set('username', result.data[0].eMail);
...
emoji-for-exasperated :/

How to submit data from Ext.FormPanel with tabs?

There are several tabs on a FormPanel:
Code:
var podform = new Ext.FormPanel({
labelAlign: 'left',
id: 'tab_6',
frame:true,
title: 'Договоры подряда',
bodyStyle:'padding:5px 5px 0',
width: 600,
listeners: {
'activate' : function(podform,records,options) {
console.log("store:"+store_form);
this.loaded = true;
var record = store_form.getAt(0);
podform.getForm().loadRecord(record);
}
},
reader : new Ext.data.XmlReader({
record : 'zem',
// success: '#success'
}, [
]),
items: []
});
podform.add(tabs_pod);
Now i try submit data to server:
podform.addButton({
text: 'Submit',
//disabled:true,
handler: function(){
podform.getForm().submit({
url:url_servlet+'submit.jsp',
waitMsg:'Saving Data...',
success: function(form, action) {
Ext.Msg.show({
title:'Success'
,msg:'Form submitted successfully'
,modal:true
,icon:Ext.Msg.INFO
,buttons:Ext.Msg.OK
});
}
});
}
});
But firebug says that i subbmit data only with panels that I have seen. Its means if i not click on second tab i cant get data from it.
Its possible to fix it?
UPDATE
When i use deferredRender:false, first tab shows normal but another tabs looks like this:

I think the problem you are seeing is that the tab panel is not rendering the fields in inactive tabs dues to lazy rendering - a performance enhancing technique. You can try to explicitly force rendering of those sub panels with deferredRender:false
see full doc here
ExtJS 3.4 -> http://docs.sencha.com/ext-js/3-4/#!/api/Ext.TabPanel-cfg-deferredRender
ExtJS 4.1 -> http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-cfg-deferredRender

Extjs how submit form without ajax?

Good day!
I am try submit extjs form without ajax and show result on the next page. This is my code:
Ext.define('test.from', {
extend: 'Ext.form.Panel',
alias: 'widget.test.form',
initComponent: function () {
var me = this;
Ext.apply(this, {
frame: true,
bodyPadding: 7,
border: 0,
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'contact_attr'
}, {
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'contact_attr'
}],
buttons: [{
text: 'Send',
handler: function () {
me.getForm().submit({
url: '/salary/public/auth/',
standardSubmit: true,
method: 'POST'
});
}
}]
});
But redirect to other page doesn't occur and I receive error: You're trying to decode an invalid JSON String. Can anybody help me? Thank you!

ok, so you have 2 error.
why not redirect(standarssubmit), and
why you got "error decode"
i guess you're using extjs4:
1 . From the docs api. it say that submit() method is Shortcut to do a submit action. and the parameter is The options to pass to the action (see doAction for details). so, putting standardSubmit to submit method isn't the correct way. there is no standardSubmit option. more info. myanswer, you have 2 alternative way.
first, use the init:
Ext.apply(this,{
standardSubmit:true, // not working...
frame: true,
bodyPadding: 7,
.......
Edits:
.......
me.getForm().standardSubmit=true; //just like OP comment
me.getForm().submit({
url: '/salary/public/auth/',
standardSubmit: true,
method: 'POST'
});
.......
second, use doAction:
...
me.getForm().doAction('standardsubmit',{
url: '/salary/public/auth/',
standardSubmit: true,
method: 'POST'
});
...
2 . the error decode, i don't know what is your salary/public/auth look like....
try my first solution, if error exists, it mean the error is somewhere else...