I'm trying to develop a custom TinyMCE plugin which will load the items for a selectbox list based on the options of another selectbox list. However, I cannot figure out how to detect any even on the selectbox list.
The documentation is almost entirely useless, as it provides no mention of custom plugin options - only the boilerplate code to start off.
How can I detect an onchange event when the select lists's selection is altered?
tinymce.PluginManager.add('custom', function(editor, url) {
var openDialog = function () {
return editor.windowManager.open({
title: 'Custom',
body: {
type: 'panel',
items: [
{
type: 'selectbox',
name: 'options',
label: 'Options',
items: [
{text: 'Primary', value: 'primay style'},
{text: 'Success', value: 'success style'},
{text: 'Error', value: 'error style'}
],
onchange: function() {
alert('hi');
},
flex: true,
}, {
type: 'selectbox',
name: 'selection',
label: 'Selection',
items: [
],
flex:true,
}
]
},
buttons: [
{
type: 'cancel',
text: 'Close'
},
{
type: 'submit',
text: 'Save',
primary: true
},
],
onSubmit: function (api) {
var data = api.getData();
/* Insert content when the window form is submitted */
editor.insertContent(data);
api.close();
}
});
};
/* Add a button that opens a window */
editor.ui.registry.addButton('custom', {
text: 'Custom',
onAction: function () {
/* Open window */
openDialog();
}
});
/* Adds a menu item, which can then be included in any menu via the menu/menubar configuration
*/
editor.ui.registry.addMenuItem('custom', {
text: 'Custom',
onAction: function() {
/* Open window */
openDialog();
}
});
/* Return the metadata for the help plugin */
return {
getMetadata: function () {
return {
name: 'Example plugin',
url: 'http://exampleplugindocsurl.com'
};
}
};
});
Related
I have CKEDITOR dialog with two tabs:
- view one
- view two
Inside view one I have a button that should open view two if clicked by the user.
But I don't know how to do this. This is my CKEDITOR.dialog code:
CKEDITOR.dialog.add('placeholder', function(editor) {
var lang = editor.lang.placeholder,
generalLabel = editor.lang.common.generalTab,
validNameRegex = /^[^\[\]<>]+$/;
return {
title: 'some title',
minWidth: 300,
minHeight: 150,
contents: [{
id: 'initial-view',
label: 'view one',
title: generalLabel,
elements: [{
id: 'name-one',
style: 'width: 100%;',
type: 'html',
html: 'Organizational units'
}, {
type: 'button',
id: 'buttonId',
label: 'Click me',
title: 'My title',
setup: function(widget) {
},
onClick: function(widget) {
// this = CKEDITOR.ui.dialog.button
My code should go here........?
}
}]
}, {
id: 'organizational-unit-view',
label: 'view two',
title: generalLabel,
elements: [
// Dialog window UI elements.
{
id: 'list-of-vars',
style: 'width: 100%;',
type: 'html',
html: 'second view --- html goes here',
label: lang.name,
setup: function(widget) {
this.setValue(widget.data.name);
},
commit: function(widget) {
widget.setData('name', this.getValue());
}
}
]
}]
};
});
My question is how should I handle that button click? What method should I use? Basically how to open view two?
I found a solution. On click event is should use getDialog():
this.getDialog().selectPage('your-content-id);
Like this:
onClick: function(widget) {
this.getDialog().selectPage('organizational-unit-view');
}
I'm creating CKEDITOR plugin. Suppose, I have following:
CKEDITOR.plugins.add('internallink', {
icons: 'internallink',
toolbar: 'insert,100',
init: function (editor) {
editor.addCommand('internallink', new CKEDITOR.dialogCommand('internalLinkDialog'));
editor.ui.addButton('InternalLink', {
label: 'Internal link',
command: 'internallink',
toolbar: 'links'
});
CKEDITOR.dialog.add('internalLinkDialog', function (editor) {
return {
title: 'Internal link',
minWidth: 600,
minHeight: 400,
contents: [
{
id: 'tab-main',
label: 'Select page',
elements: [
{
type: 'select',
id: 'page_tree',
label: 'Select page',
items: [[1],[2],[3]],
},
]
}
],
};
});
}
});
I want a tooltip to appear while hovering one of select options.
How can I insert event listener for this?
option element doesn't have onMouseOver event.
That's it )
So, for example, I have CKEDITOR plugin
CKEDITOR.plugins.add('internallink', {
icons: 'internallink',
toolbar: 'insert,100',
init: function (editor) {
editor.addCommand('internallink', new CKEDITOR.dialogCommand('internalLinkDialog'));
editor.ui.addButton('InternalLink', {
label: 'Internal link',
command: 'internallink',
toolbar: 'links'
});
CKEDITOR.dialog.add('internalLinkDialog', function (editor) {
return {
title: 'Internal link',
minWidth: 600,
minHeight: 400,
contents: [
{
id: 'tab-main',
label: 'Select page',
elements: [
{
type: 'select',
id: 'page_tree',
label: 'Select page',
items: [[1],[2],[3]],
onChange: function() {
...
}
},
]
}
],
onShow: function () {
...
},
onOk: function () {
...
},
};
});
}
});
As you can see, there is select item with options.
And when I've selected one of select's options, I need to display this value.
How can I get this value in
onChange: function () {
...
}
Tell me, please, how can I do it :)
Well, the solition is:
onChange: function() {
alert( 'Current value: ' + this.getValue() );
}
http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition.select
I searched hours and hours for a solution but can't find one. I want to submit something to a php api function. it looks like this:
/*global Ext:false */
Ext.onReady(function ()
{
var i = 0;
var form = Ext.create('Ext.form.Panel', {
title: 'base_entity_id',
bodyPadding: 5,
width: 350,
defaultType: 'textfield',
items: [{
fieldLabel: 'base_entity_id',
name: 'first',
allowBlank: false
}],
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true,
//only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
}
}],
})
var tabs = Ext.create('Ext.tab.Panel',
{
renderTo: 'tabs',
id: 'tabs',
itemId: 'tabs',
fullscreen: true,
renderTo: document.body,
items:
[
{
title: 'Home',
margin: 40,
items: [form],
},
{
title: 'Results',
itemId: 'Results',
listeners:
{
activate: function (tab)
{
if(i == 0)
{
var panel = Ext.create('Ext.tab.Panel',
{
id: 'tabs2',
width: window,
height: window,
renderTo: document.body,
items:
[
{
title: '1',
itemId: '1',
closable: true,
html: '10329u9iwsfoiahfahfosaofhasohflhsalkfhoihoi3riwoifhoiashfkhasofhosahfsahfahsfosafoisaiohfaoishfoihsaoifasoifsaifhsaoifasoihfoiahsfoihasfoihasoifoisfoihsafoihasfoiasoihasfoihaoifhaoihfoiahfoiaoaffoafoiafsaoafohaoh'
},
{
title: '2',
itemId: '2',
closable: true,
}
]
})
tab.add(panel);
tab.doLayout();
i = 1;
}
}
}
}]
})
});
But when i'm submitting i get no response, can someone help me with this? I dont know what the next steps are...
I have a simple application done with Ext JS/PHP and the following code worked for me:
myFormPanel.getForm().submit({
clientValidation: true,
url: 'updateConsignment.php',
params: {
id: myFormPanel.getForm().getValues().first
},
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
}
}
});
Source:
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.BasicForm-method-submit
Well, you have set no URL for your form, and the submit button doesn't have the submit method so I'm not really sure how this was supposed to work.
You will need to add the url config to your form:
Ext.create('Ext.form.Panel', {
title: 'base_entity_id',
method: 'POST',
url: 'myBackEnd.php' // Or whatever destination you are using for your backend.
...
});
Also, I saw that you are using formbind: true and later checking if the form was valid, one action renders the other unnecessary, so choose one, there is no need for both!
Add this your button handler:
form.submit({
params: {
id: form.getForm().getValues().first
},
success: function(form, action) {
Ext.Msg.alert('Success', 'Your form was submitted successfully');
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response');
}
});
Then you should check for $_POST['id']
For more information on form methods and configurations check this doc: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.Basic
I'm trying to learn how to use Sencha Touch to build web apps. I've been following the tutorial Here and I am a bit stuck. Below have created one controller, two views and a model (All other code is copy & paste from the tutorial). The first view, Index works great. However if I try to access the second, it brings up a blank page, none of the toolbar buttons work and it doesn't fire the alert.
If I do comment out the line this.application.viewport.setActiveItem(this.editGyms);, the alert will fire, but obviously, it doesn't render the page.
I've looked at a couple other tutorials, and they seem to also be using the setActiveItem member to switch views.. Am I missing something, or do I have to somehow deactivate the first view to activate the second or something?
HomeController.js
Ext.regController('Home', {
//Index
index: function()
{
if ( ! this.indexView)
{
this.indexView = this.render({
xtype: 'HomeIndex',
});
}
this.application.viewport.setActiveItem(this.indexView);
},
editGyms: function()
{
if ( ! this.editGyms)
{
this.editGyms = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGyms);
Ext.Msg.alert('Test', "Edit's index action was called!");
},
});
views/home/HomeIndexView.js
App.views.wodList = new Ext.List({
id: 'WODList',
store: 'WODStore',
disableSelection: true,
fullscreen: true,
itemTpl: '<div class="list-item-title"><b>{title}</b></div>' + '<div class="list-item-narrative">{wod}</div>'
});
App.views.HomeIndex = Ext.extend(Ext.Panel, {
items: [App.views.wodList]
});
Ext.reg('HomeIndex', App.views.HomeIndex);
views/home/EditGymStore.js
App.views.EditGymStore = Ext.extend(Ext.Panel, {
html: 'Edit Gyms Displayed Here',
});
Ext.reg('EditGymStore', App.views.EditGymStore);
models/appModel.js
Ext.regModel('WOD', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'wod', type: 'string' },
{ name: 'url', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title' }
]
});
Ext.regStore('WODStore', {
model: 'WOD',
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'wod-app-localstore'
},
// REMOVE AFTER TESTING!!
data: [
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc1</br><br/>' },
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc2</br><br/>' }
]
});
viewport.js with toolbar
App.views.viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',
dockedItems: [
{
xtype: 'toolbar',
title: 'The Daily WOD',
buttonAlign: 'right',
items: [
{
id: 'loginButton',
text: 'Login',
ui: 'action',
handler: function() {
Ext.Msg.alert('Login', "This will allow you to Login!");
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconMask: true,
iconCls: 'refresh',
ui: 'action',
handler: function() {
Ext.Msg.alert('Refresh', "Refresh!");
}
}]
},
],
});
Thanks for the help!!
In HomeController.js your action function (editGyms) is the same name as the variable you're using for your view (this.editGyms) so when it tries to setActiveItem(this.editGyms) its actually passing the controllers action function rather than the results of this.render({...})
Either change the name of the controller action or change the name of the variable you use to hold the view.. like
editGyms: function() {
if ( ! this.editGymView) {
this.editGymView = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGymView);
Ext.Msg.alert('Test', "Edit's index action was called!");
}
I am colleagues with the guy that wrote the tutorial you are referring to. You should add a comment on that post because I described your problem to him and he said that he knows the solution.
You can just add a link to this page so that you won't need to describe everything again.
Also he will (very) soon publish the 3rd part of that tutorial that will cover some similar things.