We Keep Coding

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)
}
};
});

Ext Js running a function for a Yes No Msg box

This could be a very stupid and obvious answer but I couldn't find any answer to this( a particular example by a user on Sencha Docs also didn't work ,the one in the comments section).
I want to create a popup which will take in yes no or cancel using Ext Js. In ExtJs 3, it is written as
Ext.onReady(function() {
Ext.Msg.show({
title: 'Milton',
msg: 'Have you seen my stapler?',
buttons: {
yes: true,
no: true,
cancel: true
},
icon: 'milton-icon',
fn: function(btn) {
Ext.Msg.alert('You Clicked', btn);
}
});
});
I want to do the same thing in Ext 4.2 but its not working
Ext.onReady(function() {
Ext.Msg.show({
title: 'Milton',
msg: 'Have you seen my stapler?',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.ERROR,
fn: function(btn) {
Ext.Msg.alert('You clicked',btn);
}
});
});
The function doesn't work at all. I tried them on Jsbin and Jsfiddle using SDN but they don't work. Here is the link to the JSBin code if it helps.

It works even with "btn". There is no problem if the local variable for the function "fn" is "btn" or "rec". There may be some other problem in you code. May be missing comma.

Sencha Touch 2: How to override back button on Navigation View

I was wondering how to ovverride the back button on a navigation view. I tried using onBackButtonTap but it doesnt seem to work http://www.senchafiddle.com/#8zaXf
var view = Ext.Viewport.add({
xtype: 'navigationview',
onBackButtonTap: function () {
alert('Back Button Pressed');
},
//we only give it one item by default, which will be the only item in the 'stack' when it loads
items: [
{
//items can have titles
title: 'Navigation View',
padding: 10,
//inside this first item we are going to add a button
items: [
{
xtype: 'button',
text: 'Push another view!',
handler: function() {
//when someone taps this button, it will push another view into stack
view.push({
//this one also has a title
title: 'Second View',
padding: 10,
//once again, this view has one button
items: [
{
xtype: 'button',
text: 'Pop this view!',
handler: function() {
//and when you press this button, it will pop the current view (this) out of the stack
view.pop();
}
}
]
});

The fiddle you've mentioned works well in my local project on my machine. For some reason, it doesn't work on fiddle site. Try running it on your local project.
Still instead of using onBackButtonTap config, it's good to extend Ext.navigation.View class and override onBackButtonTap method. That way you'll have more control over whole components. You'd also like to override other configs as well. Here's what I'd use -
Ext.namespace('Ext.ux.so');
Ext.define('Ext.ux.so.CustomNav',{
extend:'Ext.navigation.View',
xtype:'customnav',
config:{
},
onBackButtonTap:function(){
this.callParent(arguments);
alert('back button pressed');
}
});
the line this.callParent(arguments) will allow component to behave in default way + the way to wanted it to behave. And if you want to completely override the back button behavior you can remove this line. Try doing both ways.
To use this custom component, you can use -
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
var view = Ext.create('Ext.ux.so.CustomNav', {
fullscreen: true,
items: [{
title: 'First',
items: [{
xtype: 'button',
text: 'Push a new view!',
handler: function() {
//use the push() method to push another view. It works much like
//add() or setActiveItem(). it accepts a view instance, or you can give it
//a view config.
view.push({
title: 'Second',
html: 'Second view!'
});
}
}]
}]
});
}
Give this a shot. It'll work for you yoo.

Add click listener on on button in Ext.window.MessageBox

I am creating dinamically a message box (Ext.window.MessageBox)
var msgBox = Ext.create('Ext.window.MessageBox', {
title: '',
//message in window
msg: 'message text',
icon: 'WARNING',
//buttons
buttons: 'OKCANCEL',
//onclick funciton
fn: myfunc
});
I am adding OK and Cancel buttons. Is it possible to add click listener on the OK button so that I can do my stuff only when this OK button is pressed?
Also is it possible to add specific ids to the OK and Cancel buttons so that I can distinguish them more easily, instad of using the pregenrated ids from ExtJS?

You may use the following construction instead:
Ext.MessageBox.show({
title: "",
msg: "message text",
icon: Ext.MessageBox.WARNING,
buttons: Ext.MessageBox.OKCANCEL,
fn: function(buttonId) {
if (buttonId === "ok") {
// do on OK pressed
}
}
});
Here the first argument in the fn handler is a string value of pressed button.
DEMO: http://jsfiddle.net/xj9qY/

ExtJS buttons won't accept "id" config parameter?

I need specific IDs on ExtJS generated window buttons, but I'm having trouble specifying the ID. The documentation claims that this should be possible, but I still get an autogenerated id when I specify my own.
What gives?
dialog = new Ext.Window({
closeAction:'hide',
plain: true,
buttons: [
{
id: 'my-dialog',
text: 'Done',
handler: function() {
dialog.hide();
}
}
],
items:new Ext.Panel({
applyTo:'add-document-popup-panel'
}),
title: 'Add Documents',
layout: 'fit',
resizable: false,
draggable: false,
width: 300,
height: 300,
modal: true
});
}
dialog.show(this);

Check this topic: http://www.sencha.com/forum/showthread.php?24433-CLOSED-Cannot-assign-id-to-button-extjs-bug
The id of the container of the button is set, not the HTML button itself.

The id you specify is assigned to the button component (specific to extjs) and not necessarily to the underlying html button.
Does Ext.getCmp('my-dialog') successfully return the extjs button component?

The ID is set, but not on the actual button element. One of the containers is set with the correct id, and you can probably key off of this to get at whatever you need.

I had the same problem and I confirm:
The ID is set in the button's TABLE container.
Ext.getCmp('my-button') returns the extjs button component (object with xtype="button" and id="my-button").