We Keep Coding

tinyMCE 6 insert link to server side content

I'm upgrading an old internal system used in my academic department. The page that I'm rewriting allows users to modify webpages containing information and content relevant to a course. The old system is using cleditor which I am replacing with the free version of tinyMCE 6.2.0.
One of the functionalities that needs to be replaced is a custom button that brings up a list of URLs to uploaded content and then turns the highlighted text into a link to the selected content (example of this in current system). I have been able to create my own custom button, and I have found the panel and selectbox features, but I haven't found how to populate the list in selectbox using a URL like one can for link_list.
Below is an example of the javascript that I have:
tinymce.init({
selector: '.course_page_editor',
toolbar: 'custContentLink',
setup: (editor) => {
editor.ui.registry.addButton('custContentLink', {
text: 'Insert Content Link',
onAction: (_) => insert_content_link_dialog(tinymce.activeEditor)
});
}
});
function insert_content_link_dialog(editor)
{
editor.windowManager.open({
title: 'Insert Content Link',
body: {
type: 'panel',
items: [{
type: 'selectbox',
name: 'content_list',
label: 'Choose the file that the link should point to:',
size: 5,
//TODO: generate list of uploaded content URLs
items: [
{text: 'Primary', value: 'primary style'},
{text: 'Success', value: 'success style'},
{text: 'Error', value: 'error style'}
],
flex: true
}]
},
onSubmit: function () {
//TODO: replace highlighted text with selected link
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
text: 'Add content link',
type: 'submit',
primary: true,
enabled: true
}
]
});
};
How do I create a popup list of links to server side content

My original process was overly complicated. TinyMCE has the link_list functionality which does exactly what I'm looking for. I then created a page to return a JSON array of link items as outlined in this other question I asked.

how to navigate page in sencha touch2?

I am new in sencha touch and i am refer this project for learning purpose.
In this project, i am trying to add login module, if login is successful then the other things is display (which is already in project).
I made changes in app.js file and load login form(this is worked).
app.js :
ToolbarDemo = new Ext.Application({
name: "ToolbarDemo",
launch: function() {
this.views.Home = new this.views.Home();
//this.views.viewport = new this.views.Viewport();
//this.views.homecard = this.views.viewport.getComponent('home');
}
});
and In Home.js, i create login screen and if username is not blank i want to redirect it to Viewport.js which contain other pages.
I try some things which is commented in if blocks.
Home.js :
ToolbarDemo.views.Home = Ext.extend(Ext.form.FormPanel, {
fullscreen: true,
title: 'Login',
cls:'Loginscreen',
id:'loginFormPanel',
items:
[
{
html: '<div align="center"><img style="height: 100px; width: 100px;" src="stylesheets/images/main-logo.png" /></div>'
},
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'name',
id:'name',
placeHolder : 'User Name',
},{
xtype: 'passwordfield',
name : 'password',
placeHolder : 'Password',
}
]
},
{
xtype: 'button',
text: 'Login',
cls:'LogingButton',
ui: 'confirm',
itemId:'loginbutton',
handler: function() {
var name = Ext.getCmp('name').getValue();
//var pass = Ext.getCmp('password').getValue();
if(name != '')
{
//ToolbarDemo.app.switchMainView('ToolbarDemo.view.Viewport');
//Ext.Viewport.setActiveItem(Ext.create('ToolbarDemo.view.Viewport'));
//this.redirectTo('Viewport');
//var firststep = Ext.create('ToolbarDemo.view.Viewport');
//Ext.Viewport.setActiveItem(firststep);
/*ToolbarDemo = new Ext.Application({
name: "ToolbarDemo",
launch: function() {
this.views.viewport = new this.views.Viewport();
this.views.homecard = this.views.viewport.getComponent('home');
}
});*/
alert("aa");
}
}
}
],
});
Viewport.js :
ToolbarDemo.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
xtype: 'viewport',
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'homecard', id: 'home' },
{ xtype: 'searchcard' },
{ xtype: 'actioncard' },
{ xtype: 'logincard' },
{ xtype: 'settingscard' },
{ xtype: 'morecard' }
]
});
ToolbarDemo.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
so how to navigate the page? I am try this and this but it is not helped.
another quetion:
I am also refer other tutorials and also the official website of sencha in which they use controller,model and view type patterns and in my project there is no controller.
so which types of coding format should i follow that helped me to understand senchatouch?
Is my project is good for practice?
I refer diff. tutorials and i become confused. so what shoud i do?
Thanks in advance.

Read the 4th point - Animate and activate containers from a common function from this article Sencha Touch coding guidelines you should follow: Part 1 and you will understand how to do this. We generally have a common function in our Utility class that takes care of page navigation.
Regarding Sencha Touch practice, it seems you still lack some understanding. You should find a good book and spend some time understanding the basic concepts. Here is a good tutorial on how to create a Sencha Touch app: How to Create a Sencha Touch 2 App
If you want an advanced tutorial, here is a thorough tutorial that provides a step-by-step app development process:
Create a Location-Aware Site with Sencha Touch
Create a Location-Aware Site with Sencha Touch – Displaying Locations

Added an enter event to EXT JS Application search text box to fire search

Hi I have the code below my my enter event is never triggering, any help will be appreciated.
items: [{
xtype: 'textfield',
id: 'idhere',
name: 'namehere',
fieldLabel: 'lablehere:',
width: 500,
handler: {
key:13,
fn : function () {
if (e.getKey() == e.ENTER) {
alert("You pressed an enter button in text field.");
}
}
}
},{
xtype: 'button',
text: 'texttodisplay',
handler: function() {
//my function.
}
}]
I actually solved this by using:
listeners: {
specialkey: function (f,e) {
if (e.getKey() == e.ENTER) {
loadData();
}
}
}

I am not sure why Sencha never included Ext.ux.form.SearchField in the API docs but the component has been included in all versions of the framework I've used. It is set-up to fire a submit and a cancel event and includes the appropriate search and cancel buttons attached to the field.
You can find it in your framework files at: [extjs-root]\examples\ux\form\SearchField.js
I would recommend using that component instead of trying to create your own searchfield. I usually override the default search function to fit my own needs but there have been a few scenarios where I did not need to also.
If you add a requires statement at the top of your component JS you can create it like any other (non-UX) component:
E.g:
Requires statement:
Ext.define('MyApp.view.SomeComponent', {
extend: 'Ext.grid.Panel',
alias: 'widget.mycomponent',
requires: [
'Ext.ux.form.SearchField'
],
...
Creating a search field in the panel's bottom toolbar:
bbar: {
items: [{
text: 'A Button'
}, {
text: 'Another Button'
}, '-', {
xtype: 'searchfield', // <- can use this xtype with requires stmt
itemId: 'search',
width: 250,
emptyText: 'Enter first and last name to search...'
}]
},
...
If you have trouble with the requires statement you could also just create it like this:
var search = Ext.create('Ext.ux.form.SearchField', {
itemId: 'search',
width: 250,
emptyText: 'Enter first and last name to search...'
});

Just to supply how to add such a listener. There is a specialkey event that can be used for such a case
fieldinstance.on('specialkey', function(f, e){
if (e.getKey() == e.ENTER) {
// your action
}
});
Anyway I recommend to use the ux component that #Geronimo mentioned

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

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.