init: function(){
this.callParent(arguments);
map = new Ext.util.KeyMap(Ext.getBody(),{
key: Ext.EventObject.F8,
scope: this,
target:this,
fn: this.onKeyPress
});
}
In the init method takes subscription on event. Is there a method, when I leave the page to perform map.destroy?The problem is when I go to a page occurs subscription event and pressing the F8 works everywhere. How to make that worked only on this page?
This behavior happens because you are targeting Ext.getBody() with your KeyMap.
Even though target points to this, you are adding it Ext.getBody() before, that means that no matter where you are on the page, the KeyMap will work.
So you have two options:
1) Assign your component element to your target. Note that the method onKeyPress will only be called if there is something selected in your component element.
Example:
If you set target: component.getEl(), the onKeyPress method will only be called if you press F8 while a textfield is focused inside your panel.
2) Keep adding it to Ext.getBody() if you want the onKeyPress method to be called no matter if there is anything focused on the page. But if it has to work only when a specific page is active, you should add conditionals to your onKeyPress method.
Example:
onKeyPress : function() {
currentTab = this.getActiveTab();
if (currentTab.title=='Foo') {
console.log('You hit F8');
}
}
Here is fiddle demonstrating the process: https://fiddle.sencha.com/#fiddle/g7a
Related
I want to add a listener which listens to updatedata event in my custom component.
I have several ways to do it, but don't know which one is correct:
inside config
config:{
updatedata:"dataUpdated"
},
dataUpdated: function() {
.........
}
2.
config:{
listeners:{
updatedata: function(thisComponent, newData, eOpts){
..............
}
}
}
Also, do I need to call something like:
me.updatedata() within the listener function?
Please correct me if something wrong in my code.
Thank you.
You would wrap listeners in config when executing Ext.define. During Ext.create, or in items you would place them at the root of passed object (not wrapped in config)
Events are explained in details in Sencha Touch Event Guide
I'm working on a component stub where I have a grid of tiles, each that require a click handler, and also a specific "new" tile that has a different click handler. I'm trying to get the click handlers working correctly, but the event never seems to fire.
Any ideas?
var grid = React.createClass({
onCreateNew: function () {
console.log("onCreateNew");
},
render: function () {
var tiles = [];
if (this.props.items) {
tiles = this.props.items.map(function (item, index) {
//create a tile for each item
});
}
//always append "new" tile for the last one
tiles.push(React.DOM.div({
onClick: this.onCreateNew, className: "tile new_tile"
},
React.DOM.div({ className: "plus", onClick: this.onCreateNew }, "+")
));
return React.DOM.div({ id: "flowsheetPane" }, tiles);
}
});
As commenters have mentioned, your code appears to work as expected in isolation.
React delegates to event handlers with a single event listener at the root of the DOM, so events need to propagate all the way to the top in order for React to call your function.
Could you have added some event listeners somewhere in the component hierarchy that are calling event.stopPropagation()? If you did this outside of React (e.g. natively or with jquery), it would cause the events to never reach the top of the DOM, and React would never have a chance to delegate out to your methods.
I need "good style" advice. I have a form which is populated from json. The code which populates the form is put inside render listener. The problem is, many form elements have change listeners, so when the form is populated these change listeners are triggered. I want to prevent this unwanted behavior.
// many form elements with change listeners come here
listeners:{
render:function(){
var frm=this.getForm();
Ext.Ajax.request({
url:'../handlers/instruct.handler.php?id='+id,
method:'POST',
params:{action:'params'},
success:function(result,request){
json=Ext.decode(result.responseText,1);
frm.setValues(json); // form population
// triggers change listeners
}
});
}
}
PS. I use ExtJs 4.2
You could suspend events on the fields:
var fields = form.getForm().getFields();
fields.each(function(f) {
f.suspendEvents();
});
form.setValues(json);
fields.each(function(f) {
f.resumeEvents();
});
I can successfully add a listener to the painted event in the view for a selectfield. But, how do I do this in the controller?
control: {
"#form #field": {
painted: 'onPainted'
}
}
// omitted onPainted method that logs message in console
This doesn't work. However, directly adding a listener in the view works.
// in the view for the selectfield (works)
listeners: {
painted: function() {
console.log("Painted");
}
}
What am I missing?
From a comment in the docs:
This event is not bubbled up to the controller, "for performance reasons".
I am using Extjs 4.1. I need to identify event on grid when data renderred and arrived.
I checked ''afterrender' event. But it fires to early
grid.on('afterrender', function () {
alert(333);
});
Please advice
You're correct grid rendered event would fire after grid was rendered not after the data is displayed. What about subscribing to the store load event?
store.on('load', function() {
...
})
If you simply need to know when the grid has first loaded data, use the Ext.grid.Panel viewready event, it fires when the data has been loaded in and the grid rows have been rendered.
Example:
this.control({
'mygridpanel': {
// select the first record
viewready: function(grid) {
var store = grid.getStore(),
view = grid.getView(),
selModel = grid.getSelectionModel();
if (store.getAt(0)) {
view.focus();
selModel.select(0);
}
},
},
});
This example is configured in the init function of a controller using the MVC pattern, I'm not sure if you are using MVC pattern? The snippet in your comment should work fine either way though.
Also this event passes the Ext.grid.Panel object that fired it as the first argument, as you can see from the example above, you can use that to get a reference to your grid and perform whatever logic you need to do on it in your handler.