I have this piece of code :
listeners:
{
beforerender: function()
{
if (importButton == true)
{
this.menu.add(
{
text: 'Import',
iconCls: 'importIcon',
listeners:
{
click: new ifAuthorizing('import')
}
})
}
this.menu.add(
{
text: 'Consultation',
iconCls: 'searchIcon',
listeners:
{
click: menuConsultation
}
})
}
}
that is supposed to add items to a menu when some conditions are OK.
It's working, the button are well added if the conditions matches.
The problem is coming from the
listeners:
{
click: new ifAuthorizing('import')
}
This listener is supposed to be appended to the menu item, but it is triggered during the beforerender event of its parent.
function ifAuthorizing(arg) {
console.log('import')
}
The 'import' is displayed in the console logs during the beforerender event, and then if I click on the menu item that is supposed to have a click method, nothing happens.
I would like to know why.
new ifAuthorizing('import')
Here operator new tries to create an object and interpretes ifAuthorizing as a constructor. The constructor is called immediately, that's why it fires on beforeRender event. As a result you get some object which is not a copy of function ifAuthorizing, so it can't be called on menu item's event with the desired result.
Related
I'm in the need to listen to a enable/disable event on a container and I've noticed that there's no such event. I tried to listen to it in case it wasn't mentioned in the docs but it definitely doesn't exist.
I google'd around a little and found this..
Ext.define('My.Custom.Container',{
extend:'Ext.Container',
onEnable:function(){
console.log("it's listening");
}
});
It looked promising but it didn't work at all.
Is there any way to listen to these events? I don't want to get jQuery mixed in here as it would be an overkill.
The container xtype from which many components inherit methods does have an event which fires on changing of it's disabled state. This event is called disabledchange and fires every time the container is either enabled/disabled.
In the below code we can see this in action working on a button purely as it gives a visually better demo (since you can immediately see the state) but it inherits the exact same method and event from Container.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.Viewport.add({
xtype: 'container',
padding: 10,
items: [{
xtype: 'button',
text: 'Button To be disabled/enabled',
listeners: {
disabledchange: function(button, value, oldValue, eOpts) {
console.log('changing my disabled state to ' + value);
}
}
}, {
xtype: 'button',
text: 'click to disable/enable above button',
listeners: {
tap: function() {
var isButtonDisabled = Ext.Viewport.query('button')[0].getDisabled();
Ext.Viewport.query('button')[0].setDisabled(!isButtonDisabled);
}
}
}]
});
}
});
Demo: https://fiddle.sencha.com/#fiddle/g46
Ok, I just found an answer to my question.
Ext.define('My.custom.Container',{
extend:'Ext.Container',
config:{
....config....
},
enable: function(){
this.callParent(arguments);
// do something else;
},
disable: function(){
this.callParent(arguments);
// do something else;
}
});
I'm still curious if there's another way around this though. So answers are still welcome.
Hi I have a plugin that opens a window with a own html-page.
tinymce.PluginManager.add('ds_format_edit', function (editor, url) {
editor.addMenuItem('ds_format_edit', {
text: 'Formatvorlage anpassen...',
icon: false,
onclick: function () {
editor.execCommand("ds_format_edit");
}
});
editor.addCommand('ds_format_edit', function () {
editor.windowManager.open({
title: "Formatvorlagen anpassen ...",
url: 'DSFormatEditDialog.html',
width: 800,
height: 350,
buttons: [
{
text: 'OK',
onclick: function () {
top.tinymce.activeEditor.windowManager.close();
}
},
{ text: 'Cancel', onclick: 'cancel' }
]
}, {
tinymce_formats: getFormats(),
});
});
});
tinymce_formats is my parameter which I pass to the window. The dialog modify this parameter. All thats works.
Now I want to reintialize the tinymce editor if the window has been closed (if the user pressed the OK button) to get the modified parameter.
Is there any open callback function or an other way to realize that?
Thanks Felix
EDIT:
I call this plugin with a Button. The Plugin open a window with a parameter. In this window I do something and modify the parameter. And if the window has been closed I want to use my reintialize function. I need a function which knows when the window is closed to execute the reintialize function.
To reset everything (button state & content) you need to unload the editor and initialize it again like this way :
# Remove TinyMCE instance
tinyMCE.remove();
# Initialize TinyMCE again
tinyMCE.init({ ... });
Or, if you only need to empty the text content, use this :
tinyMCE.get('#my-textarea-id').setContent("");
To tell to your main app the window has been closed, you can fire a custom event :
{
text:'OK',
onclick: function () {
jQuery(document).trigger('myCustomCloseEvent');
top.tinymce.activeEditor.windowManager.close();
}
}
In you main app, bind the event :
jQuery(document).on("myCustomCloseEvent", function()
{
alert('Window has been closed');
});
I saw in some source code (few days ago) that a program had a dblclick event or something like that on the panel.
If you look a the docs
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel
under events, there are no events for clicking.
I think I saw something like
ondblclick
and then
fn: function(){...}
Why it's not in documentation and how can I fire the dblclick event on the panel?
In addition to #sra answer I would say that it is possible to assign handlers to Component's dom using element option when assigning listener:
var panel = Ext.create('Ext.panel.Panel', {
// ...
listeners: {
dblclick: function() {
// handle event
},
element: 'body'
}
});
demo
The following example will work. The double click event will get fired by the Ext.Element which can be fetched after rendering from the body param of the panel. In the example I override the afterRender method cause there is no need to register a event for that. There I register a listener to the Ext.Element of the current panel.
Ext.define('Ext.ux.panel.DCPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.dcpanel',
initComponent: function() {
this.callParent(arguments);
},
afterRender: function() {
var me = this;
me.body.on('dblclick', function() { alert('hit'); }, me);
me.callParent();
}
});
Ext.create('Ext.ux.panel.DCPanel', {
width: 300,
height: 300,
title: 'Demo',
html: 'this is my data',
renderTo: Ext.getBody()
});
I am trying to use jQuery Editable Plugin in my Backbone.View Object in Symfony2.
When I perform dblclick on DOM element which class is editable it turns in input element as I wish.
Then when I perform keypress I get three issues:
No route found for "POST /[object Object]" 404 Not Found - NotFoundHttpException
the key entry "name" for the model turns to empty string.
the view does not change
My goal is to change the backbone.model and then automatically the view.
var MyView = Backbone.View.extend({
events: {
"dblclick .editable": "edit",
"keypress .editable": "updateOnEnter"
},
edit: function edit ()
{
$(this.el).find(".editable").editable({type:'input'}); // it works
},
updateOnEnter: function updateOnEnter (e)
{
if (e.keyCode == 13) {
this.close();
}
},
close: function close ()
{
this._model.set({
name: $(this.el).find(".editable").text()
});
}
});
someClass = Ext.extend(someClassB, {
_someFunctionC{
someButton = new Ext.button({
handler: function () {
this._onClick('click');
}
}),
_onClick(someMessage){
Ext.Msg.alert(someMessage);
}
}
}
_onClick eats one parameter; in the above code you put in the 'click' event because you want _onClick to be executed after the user clicks on the button. However, how do you specify this specific 'click' registration AND pass in a local variable as the _onClick parameter at the same time?
As an aside, why do you even have to specify 'click', when the API states that handler always pertains to a click? Is this additional information not unnecessary?
Typically you set it up like this. No real need to pass parameters since someFunction is a member of your 'class' and has access to any data you'd want.
var button = new Ext.Button({
handler: this.someFunction
scope: this
});
someFunction: function() {
// do something interesting.
}
So if i understand correctly you want to set the handler config option but set the arguments yourself in one go?
Does this do what you want?
// clicking the button alerts 'Hello World'
new Ext.Button({
text: 'Test',
handler: function(value){
alert('Hello, ' + value);
}.createCallback('World')
});
Notice the createCallback executed on the anonymous function, this creates a callback function for handler which only gets passed the arguments you pass to createCallback.
Another way that I've found to do this is to pass a custom config option along with your button. Say you wanted to have a splitbutton that could choose the amount of banners to add. (this is from a recent project)
{
xtype: 'splitbutton',
iconCls: 'icon addBanners',
ref: '../addBanner',
text: 'Add Banner',
menu: new Ext.menu.Menu({
items: [{
text: 'Add 10 Banners',
scope: this,
handler: this.addBanner,
numBanners: 10
},{
text: 'Add 20 Banners',
scope: this,
handler: this.addBanner,
numBanners: 20
}]
}),
scope: this,
handler: this.addBanner,
numBanners: 1
}
And in your function:
addBanner: function(button, event) {
if (button.numBanners) {
// do whatever
}
}
You can also create a callback function that inserts extra parameters when it is called:
var button = new Ext.Button({
handler: this.someFunction.createDelegate(button,['Some message'])
});