I know it is possible to add listeners to events that fire after the event has fired like this:
oDocumentCategories.addAfterListener("activeitemchange", function(oContainer, sValue, oldValue){
//Do stuff here
});
But is it also possible to attach them whilst creating the elements?
Just like this:
var oButton = Ext.create("Ext.Button", {
text: "Button",
listeners: {
tap: function(){
//Tap event here
}
}
});
But only then for an after listener.
Question
Is it possible to attach an after event listener whilst creating an element?
Just like the listeners configuration property but then for an after event listener.
var oButton = Ext.create("Ext.Button", {
text: "Button",
listeners: {
tap: {
fn: function(){
//Tap event here
},
// scope: this,
// options: {single: true}
order: 'after'
}
}
});
Cheers, Oleg
Related
{xtype : 'container',
id:'leaderPhotoContainer',
listeners:{click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(e,panel,obj){ //click function
console.log('click el'); //It will work.
obj.fireEvent('click');
//if I adding my code here ,it is worked ,but I want to fire this event to the controller ,and be handled there.
//How I can get the 'container' here ?
//container.fireEvent('click') I guess it will work.
}
}}}
Can someone help me? Thank you.
listeners:{click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(e,panel,obj){ console.log('click el');
this.down('#leaderPhotoContainer').fireEvent('click');
}
,scope:this//It must be a upper container.
}
Maybe It is a silly way to slove it,but It is worked . Is there a better way?
You can bind your event in your controller.
//...
init: function () {
this.control({
'yourpanel': {
afterrender: function(panel) {
panel.mon(panel.el, 'click', this.foo);
}
}
});
},
foo: function() {
console.log('Foo');
}
//...
I am working in extjs4. i have extjs view as-
Ext.define('Balaee.view.kp.Word.SearchWord', {
extend:'Ext.form.Panel',
id:'WordId',
alias:'widget.SearchWord',
bodyPadding: 30,
defaults:{
margin:'0 20 0 70'
},
layout: {
type: 'hbox'
},
items:[
{
xtype:'textfield',
fieldLabel:'Enter the Word:',
name:'Word',
// height:30,
border:false,
allowBlank:false,
emptyText: 'Enter the word',
id:'wordtext'
},
{
xtype: 'image',
width: 30,
height: 22,
src: 'http://www.asien-news.de/wp-content/uploads/new-york.jpg',
}
],});
I want to call controller's function on click of above image. So how to catch image click event in controller?
You can use listeners propetry from Observable class;
A config object containing one or more event handlers to be added to
this object during initialization. This should be a valid listeners
config object as specified in the addListener example for attaching
multiple handlers at once.
Simply bind it on the underlying element, like this:
listeners: {
el: {
click: function() {
Ext.Msg.alert("Image clicked");
}
}
}
here is a example.
I have created a View by extending Ext.container.Container and have given it an alias widget.myCustomView. Since I'm using it in different places.
The view as usual Ext form components like textfield, dataview, etc. Now I adding this view into other view using xtype as follows:
{
xtype: 'myCustomView',
itemId: 'myCustomView'
}
Now, I want to add change event handler such that if any component's change is fired, I can fire the change event of myCustom view. In short, do something like this.
{
xtype: 'myCustomView',
itemId: 'myCustomView',
listeners: {
'change' : function(viewObj, eOpts) {
//do something
}
}
}
How to do it?
Use the relayEvents() method to... well, relay the change event from child fields.
Here's some basic code that does that:
Ext.define('My.Container', {
extend: 'Ext.Container'
,layout: 'form'
,initComponent: function() {
this.callParent(arguments);
// i want to support nested containers
this.parseContainerItems(this);
}
,onItemAdded: function(item) {
if (item instanceof Ext.Container) {
this.parseContainerItems(item);
} else if (item instanceof Ext.form.field.Base) {
this.relayEvents(item, ['change']);
}
}
,parseContainerItems: function(ct) {
if (ct.items) {
ct.items.each(this.onItemAdded, this);
}
}
});
Example usage:
Ext.create('My.Container', {
renderTo: 'ct' // render to a test div
,height: 200
,width: 200
,items: [{
xtype: 'textfield', name: 'foo', fieldLabel: 'Foo'
},{
xtype: 'container'
,items: [{
xtype: 'checkbox', name: 'bar', fieldLabel: 'Bar'
}]
}]
,listeners: {
change: function(item, newValue, oldValue) {
console.log(Ext.String.format('Value of item {0} changed from {1} to {2}', item.name, oldValue, newValue));
}
}
});
Going further...
As I've said my implementation is quite rudimentary since it only supports fields that are added to the container by configuration. If you want to make that component flexible, you'll have to handle fields that are added after the component creation.
For that you'll need to watch the add event of the container to relay from fields that are added after its creation. The doc says that this event bubbles from child containers, but from my tests it does not :-( So (until that's fixed?) you'll also have to watch the add event of child containers.
Here's the updated code for the parseContainerItems() method:
parseContainerItems: function(ct) {
ct.on('add', function(me, item) {
this.onItemAdded(item);
}, this);
if (ct.items) {
ct.items.each(this.onItemAdded, this);
}
}
If you also want to support the possibility of removing fields dynamically, that's when things will go awry... You'd have to implement your own version of relayEvents() because, as far as I know, it is not possible to stop relaying events with the one provided by Ext. Then you'd have to watch the remove event to remove the listeners you've added to child fields and containers.
I have an app with a carousel. On all of the carousel pages there are elements such as buttons and datepickers. I would like to handle the tapStart event on each of these elements using Sencha Touch but I haven't been able to find anything to allow me to do this.
Does anyone have an idea?
UPDATE
I asked this question on the Sencha Forums as well. Here is the link to the Sencha Forum thread: http://www.sencha.com/forum/showthread.php?262804-Handle-tapStart-Event-on-a-button&p=963782#post963782
You can try using touchstart which can be bound to any element including button
I figured out a solution to my problem with help from the Sencha Touch Forums.
First I used the initConfig function to initialize my configuration of my container.
Ext.define('MyApp.view.ViewName', {
...
// Very Important, this is what I use in the controller to handle the events
xtype: 'myxtype',
...
initConfig: function () {
var me = this;
this.config = {
...
items: {
...
{
xtype: 'button',
...
listeners: {
element: 'element',
// This is where my code handles the tapstart
// (touchstart) event
touchstart: function () {
// Fire an event on the controller (me)
me.fireEvent('buttondown');
}
}
},
...
}
}
this.callParent([this.config]); // Very Important when using initConfig
}
});
Then, in my controller I added this code:
Ext.define('MyApp.controller.MainController', {
...
config: {
views: [
'ViewName',
...
],
...
},
...
init: function () {
this.control({
'myxtype': {
buttondown: this.myFunction
}
})
},
myFunction: function () {
// Do something
}
});
I am using extjs 3.4. i need to disable ENTER key event for the combo. I tried with following code but could not succeed. Please help.
var combo = new Ext.form.comboBox({
id: 'id',
enableKeyEvents: true,
store: store,
triggerAction: 'all',
listeners: {
keydown: function(combo, e) {
var key = e.getKey();
if (key == e.ENTER) {
e.stopEvent();
}
}
}
});
The above does not work. Still enter event works for combo. Please help.
Hi you can simply use the following...
onkeypress="if(event.keyCode==13){return false;}"
Looking at ext-all-debug.js you should be able to override the keyNav's enter handler after the combobox is created:
listeners: {
render: function() {
this.keyNav.enter = function() { ... };
}
}