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.

How to validate tinyMCE popup textbox value

Please any one help me. I need the tinyMCE popup textbox validation. how to validate the textbox when click on ok Here i use the code below.
tinymce.PluginManager.add('weblink', function(editor, url) {
editor.addButton('weblink', {
text: 'Web Link',
icon: false,
onclick: function() {
editor.windowManager.open({
title: 'Web Link',
body: [
{type: 'textbox', name: 'caption', label: 'Enter Your Caption',maxLength:20},
{type: 'textbox', name: 'weburl', label: 'Enter Your Web URL',maxLength:32}
],
onsubmit: function(e){
var weblinkTxt = "href='"+e.data.weburl+"'";
if(hyperlink!='' && (hyperlink==1 || hyperlink =='1'))
{
editor.insertContent("<a "+weblinkTxt+">"+ e.data.caption+"</a>")
}
else
{
editor.insertContent("<img src='"+emailImg+"'>"+ e.data.caption+" "+e.data.weburl)
}
}
});
}
});
});

I just came across the need to validate the input from a dialog in TinyMCE as well. Unfortunately, it seems there is no native way to do it. However, I found a way to do it, using e.preventDefault().
The idea is to use the e.preventDefault() right after the submit function starts, and manage the dialog window afterwards. This way, it is possible to validate the input:
If it is not valid, then show a warning to the user and do nothing to the dialog window. It will be kept open, and the user will have to insert a new value;
If it is valid, then close the window dialog and continue the method to do whatever you want.
Applied to you example, it would be like this:
tinymce.PluginManager.add('weblink', function(editor, url) {
editor.addButton('weblink', {
text: 'Web Link',
icon: false,
onclick: function() {
editor.windowManager.open({
title: 'Web Link',
body: [
{type: 'textbox', name: 'caption', label: 'Enter Your Caption',maxLength:20},
{type: 'textbox', name: 'weburl', label: 'Enter Your Web URL',maxLength:32}
],
onsubmit: function(e){
//this will prevent TinyMCE from closing the window dialog
e.preventDefault();
/*here you apply your validations to e.data.weburl
and to e.data.caption*/
if(isNotValid){
/*The validation failed, so let's tell the user about it.
The empty function is to let TinyMCE know that it should
do nothing when clicking on the "OK" button. Without it,
I experienced different behaviour when clicking on
"OK" and when pressing "Enter".*/
editor.windowManager.alert('Invalid input!', function(){});
} else {
/*It is valid, so let's first close the
dialog window, and then do what you want*/
editor.windowManager.close();
var weblinkTxt = "href='"+e.data.weburl+"'";
if(hyperlink!='' && (hyperlink==1 || hyperlink =='1'))
{
editor.insertContent("<a "+weblinkTxt+">"+ e.data.caption+"</a>")
}
else
{
editor.insertContent("<img src='"+emailImg+"'>"+ e.data.caption+" "+e.data.weburl)
}
}
}
});
}
});
});
Hope this can still help you or anyone also facing this problem!

TinyMce create toolbar dropdown containing more toolbar items

This seems like it ought to be simple to do, but I'm having a hard time figuring it out. I have a tinymce instance, and for various reasons I want to have all the toolbar items on one long line. The problem is that there are slightly too many items for it all to fit so I'd like to create a custom button and put the toolbar items in there. Something like:
tinyMCE.init({
...
setup: function(editor) {
editor.addButton('insertMenu', {
type: 'listbox',
text: 'Insert',
icon: false,
items: 'code link'
});
},
toolbar1: 'insertMenu undo redo | bold italic |alignjustify | ...
Obviously that doesn't work because the items: 'code link' isn't correct for a listbox.. but it I'd hope it's possible to do this sort of thing in tinyMCE. Yes I have looked at examples like http://www.tinymce.com/tryit/3_x/menu_button.php but they always contain text links etc. whereas I just want to reuse the existing toolbar icons and functionality.

You were almost there. You could use something like this if you wanted to define your button inline in the initialiser as you're doing it, or else you might be better off moving the functionality out into a separate plugin and requiring that in your initialiser. http://www.tinymce.com/wiki.php/Tutorials:Creating_a_plugin
editor.addButton('insertMenu', function() {
var items = [{text: 'Option 1', value: 'option1Value'}, {text: 'Option 2', value: 'option2Value'}];
return {
type: 'listbox',
text: 'select box title',
tooltip: 'a tooltip',
values: items,
fixedWidth: true,
onclick: function(e) {
console.log('Value selected: ' + e.control.settings.value)
}
};
});

tinyMCE plugin accessing element

I'm trying to write a tinymce plugin, so I checked out the tutorial "Creating a plugin" on http://www.tinymce.com/. Inserting and Replacing Content is no problem, everything works fine.
Now i want to change the value of the textbox automatically after changing the value of the listbox. As an example, after changing the listbox element, the value of the active element should be written to the textbox above. How can I access this element?
tinymce.PluginManager.add('myexample', function(editor, url) {
// Add a button that opens a window
editor.addButton('myexample',
{
text: 'Example',
onclick: function()
{
// Open window
editor.windowManager.open({
title: 'Example Plugin',
body: [
// Text
{type: 'textbox', name: 'title', label: 'Text', value: 'temp'},
// Listbox
{type: 'listbox', name: 'test', label: 'Ziel',
'values':
[
{text: 'Eins', value: '1'},
{text: 'Zwei', value: '2'}
],
onselect: function(v)
{
console.log(this.value());
// CHANGE THE VALUE OF THE TEXTBOX ...
// ????
}
}
],
onsubmit: function(e)
{
console.log(e.data.title, e.data.test);
}
});
}
});
});

I know this is an old question, but I was facing the same issue and I found this answer in another forum that saved my day.
The standard tinymce way to do this is to save the popup window in a variable:
var win = editor.windowManager.open({ //etc
And then for accessing the element:
win.find('#text'); // where text is the name specified
I hope this can help someone else in the future.

Now I found a solution. The best method is not to use the internal form-designer. You can use an IFrame with an external html-page, then you can work with document.getElementById(...)
Here you can find an example

Sencha Touch 2: data intigration or how to share dynamic information between sencha and javascript

I'd like to start quick.
What is my problem:
Within ST2 I structured my application with the MVC pattern. I have a store, a model, a controler and the views (for more information scroll down).
Workflow:
I click a list item (List View with a list of elements from store)
Controller acts for the event 'itemtap'
Controller function is looking for main view and pushes a detail view
Record data will be set as data
Detail view uses .tpl to generate the output and uses the data
Problem
Now I want to add a button or link to enable audio support.
I thought about a javascript function which uses the Media method from Phonegap to play audio
and I want to add this functionality dynamicly within my detail view.
Do you have any idea how I can achive that behavoir? I'm looking for a typical "sencha" solution, if there is any.
Detail Overview of all files starts here
My list shows up some data and a detail view visualize further information to a selected record.
The list and the detail view a collected within a container, I'll give you an overview:
Container:
Ext.define('MyApp.view.ArtistContainer', {
extend: 'Ext.navigation.View',
xtype: 'artistcontainer',
layout: 'card',
requires: [
'MyApp.view.ArtistList',
'MyApp.view.ArtistDetail'
],
config: {
id: 'artistcontainer',
navigationBar: false,
items: [{
xtype: 'artistlist'
}]}
});
List
Ext.define('MyApp.view.ArtistList', {
extend: 'Ext.List',
xtype: 'artistlist',
requires: [
'MyApp.store.ArtistStore'
],
config: {
xtype: 'list',
itemTpl: [
'<div>{artist}, {created}</div>'
],
store: 'ArtistStoreList'
}
});
Detail View
Ext.define('MyApp.view.ArtistDetail', {
extend: 'Ext.Panel',
xtype: 'artistdetail',
config: {
styleHtmlContent: true,
scrollable: 'vertical',
title: 'Details',
tpl: '<h2>{ title }</h2>'+
'<p>{ artist }, { created }</p>'+
'{ audio }'+
'',
items: [
//button
{
xtype: 'button',
text: 'back',
iconCls: 'arrow_left',
iconMask: true,
handler: function() {
var elem = Ext.getCmp("artistcontainer");
elem.pop();
}
}
]
}
});
And finally the controller
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
artistContainer: 'artistcontainer',
},
control: {
'artistlist': {
itemtap: 'showDetailItem'
}
}
},
showDetailItem: function(list, number, item, record) {
this.getArtistContainer().push({
xtype: 'artistdetail',
data: record.getData()
});
}
});
Puh, a lot of stuff to Read

Here you can see an example of how to load audio from an external url with Sencha Touch "Audio" Component. Haven't work with it but I think it fits your needs. Declaring it is as simple as follows:
var audioBase = {
xtype: 'audio',
url : 'crash.mp3',
loop : true
};
Iwould reuse the component and load the songs or sound items by setting the url dynamically. By the way I tried it on Chrome and Ipad2 and worked fine but failed on HTC Desire Android 2.2 default browser.