I have a Window that contains several child components (example only contains a Panel). When I hide this Window, I want the child components to do some processing. Is there an event the child components can listen for when the parent is hidden? I tried using hide, disable, and deactivate, but none of them fired.
This is the example code and Fiddle I'm working with:
var myPanel = Ext.create('Ext.panel.Panel', {
title: 'My Panel'
});
myPanel.on('afterrender', function() {
myPanel.el.on('hide', function() {
alert('el hidden');
}, this);
}, this);
myPanel.on('hide', function() { alert('hidden'); }, this);
myPanel.on('deactivate', function() { alert('hidden'); }, this);
myPanel.on('disable', function() { alert('hidden'); }, this);
var myWindow = Ext.create('Ext.window.Window', {
height: 300,
width: 300,
items: [myPanel],
closeAction: 'hide'
});
var button = Ext.create('Ext.button.Button', {
text: 'Toggle Window',
renderTo: Ext.getBody()
});
button.on('click', function() {
if (myWindow.isVisible()) {
myWindow.hide();
}
else {
myWindow.show();
}
}, this);
When the Window gets hidden, I want to enter the event listeners. I even started experimenting with getting the DOM Element, but there's no such event as hide. I realize I can control the processing from the Window, but I'd rather have each component listen for an event and take care of itself autonomously.
Any thoughts?
As far as i know, you cant listen directly to another component's events, although you could do some processing in a controller and accomplish this.
The most similar approach to what you asked that i could come up with was to listen to the hide event in the parent, and fire the same event in the child component.
-working fiddle:
https://fiddle.sencha.com/#fiddle/c74
you could iterate all children and do what you need.
Related
I have created a custom component that extends from Ext.Panel. I have added a click listener to the custom component so that when it's clicked it will fire an event. I am instantiating the custom component in a view and I want to handle the event thats fired from the custom component in the viewController associated with that view.
However, when I fire the event, it's not bubbling up to the viewController. Is there a way to fire an event on the global scope? How do I go about handling an event in a viewController where the component that fires the event is instantiated in the view associated with the view controller?
My custom component looks somthing like so:
Ext.define('MyApp.ux.CustomComponent', {
extend: 'Ext.Panel',
xtype: 'custom-component'
initComponent: function() {
var me = this;
me.callParent();
me.addListener({
'render': function(panel) {
panel.body.on('click', function() {
me.fireEvent('customEventName');
});
}
});
}
});
I am instantiating my custom component in a view like so:
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.container.Container',
controller: 'main'
items: [{
xtype: 'custom-component'
}]
});
And in my viewController (for the view that im instantiating my custom component in) I have the following listener:
customEventName: function () {
console.log('I have been fired');
}
View controllers listen for child item listeners, but not manually fired events. So, you need to use listener config for this like this e.g.
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.container.Container',
controller: 'main'
items: [{
xtype: 'custom-component',
listeners: {
customEventName: 'customHandlerNameInController'
}
}]
});
Now when you fire your custom event, your view controller method must work.
To fire events globally, you can use:
Ext.GlobalEvents.fireEvent('eventName', {args});
http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.GlobalEvents-method-fireEvent
Edit:
You can try a workaround:
Ext.GlobalEvents.fireEvent('customEventName');
In your controller:
listen: {
global: {
'customEventName': 'onClick'
}
}
onClick: function(){
Ext.log('click happened');
}
I have a div generated by a backbone.js view. When the user clicks on this div, a class active is added to the div and the function addToSet is executed.
Problem: I want another function to be triggered when the View's div has the class active. However, my attempt shown below always cause addToSet function to run when its clicked.
Now, I remove 'click': 'addToSet' from the events function, leaving only 'click .active': 'removeFromSet'. Clicking on the div does not cause anything to happen! Is this because the event handler cannot select the div of the view itself, just the elements inside it?
Any idea how I can solve this problem? Thanks!
JS Code
SetView = Backbone.View.extend({
tagName: 'div',
className: 'modal_addit_set',
template: _.template( $('#tpl_modal_addit_set').html() ),
events: {
'click': 'addToSet',
'click .active': 'removeFromSet'
},
initialize: function(opts) {
this.post_id = opts.post_id;
},
render: function() {
$(this.el).html( this.template( this.model.toJSON() ) );
if(this.model.get('already_added'))
$(this.el).addClass('active');
return this;
},
addToSet: function() {
$.post('api/add_to_set', {
post_id: this.post_id,
set_id: this.model.get('id'),
user_id: $('#user_id').val()
});
},
removeFromSet: function() {
$.post('api/remove_from_set', {
post_id: this.post_id,
set_id: this.model.get('id')
});
}
});
Have you tried to use a :not(.active) selector for one of your event delegates? This may help differentiate between the two scenarios.
Something like this:
events: {
'click :not(.active)' : callback1
'click .active' : callback2
}
These events:
events: {
'click': 'addToSet',
'click .active': 'removeFromSet'
}
don't work and you sort of know why. From the fine manual:
Events are written in the format {"event selector": "callback"}. The callback may be either the name of a method on the view, or a direct function body. Omitting the selector causes the event to be bound to the view's root element (this.el).
So your 'click': 'addToSet' binds addToSet to a click on the view's el itself but 'click .active': 'removeFromSet' binds removeFromSet to a .active element inside the view's el.
I think the easiest solution is to have a single event:
events: {
'click': 'toggleInSet'
}
and then:
toggleInSet: function() {
if(this.$el.hasClass('active')) {
$.post('api/remove_from_set', {
post_id: this.post_id,
set_id: this.model.get('id')
});
}
else {
$.post('api/add_to_set', {
post_id: this.post_id,
set_id: this.model.get('id'),
user_id: $('#user_id').val()
});
}
}
You could use an instance variable instead of a CSS class to control the branching in toggleInSet if that makes more sense.
I am using a panel (say parentPanel) having another child panel (say childPanel). How can i fire a custom event from childPanel that will be caught by parentPanel?
Like so:
Ext.define('Ext.ux.form.Panel', {
extend: 'Ext.form.Panel',
title: 'Simple Form',
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {
anchor: '100%'
},
defaultType: 'textfield',
initComponent: function() {
var me = this;
me.items = [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
}];
me.callParent(arguments);
},
afterRender: function() {
var me = this;
me.callParent(arguments);
// in case of a form you can also use the findField() method
// I used down() because it will work with all sort of containers
me.down('textfield[name=first]').on('change',me.onFirstnameChange,me);
},
onFirstnameChange: function(field) {
// custom handler
}
});
Doing this just on single instances work the same way expect that you will need to use the afterrender event instead of the static template method.
Note:
I this doesn't fit your needs you will need to post a more detailed question (with example code) for a more detailed answer.
Edit:
Adding a custom event to a new component:
initComponent: function() {
// ...
me.addEvents('customeventname');
// ...
}
you can now register listeners to this events on instances of this component and fire the event by calling fireEvent('customeventname', args) where args are the arguments you want to call each listeners with.
I want to capture whenever the user changes the content of an HtmlEditor in ExtJS 4. I have tried the sync, change, and push events all with no success. Sync seems to be fired whenever focus is gained, change isn't fired, and I can't tell what causes push to be fired.
Can anyone tell which event is fired when the user changes the content of an HtmlEditor?
Thanks
Edit:
I have tried the following code which does not work for me, any ideas?
init: function() {
this.control({
'htmleditor[name="reportHtmlEditor"]': {
render: this.addKeyHandler
}
});
},
addKeyHandler: function(field) {
// This gets called fine on the component render
var el = field.textareaEl;
if (Ext.isGecko) {
el.on('keypress',
function() {
// Do Stuff, which never gets called
}, this, { buffer: 100});
}
if (Ext.isIE || Ext.isWebKit || Ext.isOpera) {
el.on('keydown',
function() {
// Do Stuff, which never gets called
}, this, { buffer: 100});
}
},
For some more information, I am using Firefox to test this, and I got the other information from this post.
It looks like there is textarea used for editing source. This field, like any other in html, fires change event only after blur (HtmlEditor seems to rely on this event). You should probably bind to other event eg keydown and then depending on key pressed, fire appropriate event. You can do it in render handler:
{
xtype: 'htmleditor',
listeners: {
render: function(){
this.textareaEl.on('keydown', function() {
this.fireEvent('sync', this, this.textareaEl.getValue());
}, this, { buffer: 500 });
},
sync: function(sender, html){
debugger;
}
}
}
I have a simple scenario where a panel needs a masked loading indicator over it while its loading the content. I have the mask working fine using the following code but the loading indicator appears at the top when calling it the first time. When calling it after the panel is shown, ie. on a button event, the mask appears correctly in the center of the panel. Any ideas?
var pnl = new Ext.Panel({
title: 'test',
width: 500,
height: 500,
renderTo: 'controls',
listeners: {
render: function(comp) {
comp.load();
}
},
load: function() {
this.el.mask('loading...', 'loadingMask');
}
});
It appears the mask is applied to the panel before the html has been rendered completely. A simple solution was to delay the mask shortly before applying it.
render: function(comp) {
setTimeout(function() { comp.loadPermissions(); }, 100);
}
Just call this.el.mask() from 'render' listener too. Also check this.rendered property before calling the mask in this.load method.