Event flow (newbie question)

[dontbugme]

I am having difficulties understanding how events work in Sencha Touch (and ExtJS on this matter).
For example I have 2 panels, a parent and a child one, and I want to trace some data when user touches (or mouse downs) the sub-panel. Any advice what am I missing?


Ext.setup({
icon:"icon.png",
glossOnIcon:true,
onReady:function() {
var sub1 = new Ext.Panel({
id:"sub1",
style: {
"background-color":"#FF00FF",
"border":"solid"
},
width:200,
height:200,
listeners: {
touchdown:function(event) {
console.info("touchdown", event);
},
"touchend":function(event) {
console.info("touchend", event);
},
"mousedown":function(event) {
console.info("mousedown", event);
}
},
html:"sub1 panel"
});
// Adding 2 soft and 1 browser events
sub1.addEvents("touchstart", "touchend", "mousedown");

var extended = new test.ExtendedPanel({
id:"extended",
style: {
"background-color":"#00FF00",
"border":"solid"
},
fullscreen:true,
html:"Extended Panel",
layout: {
type:"vbox"
}
});
extended.addSubPanel(sub1);
}
});

Ext.ns("test");
test.ExtendedPanel = Ext.extend(Ext.Panel, {
constructor:function(config) {
config = config || {};

// Array of sub panels
this.panels = [];

this.supr().constructor.call(this, config);
},

// Adds a panel to the end of panels
addSubPanel:function(panel) {
this.panels.push(panel);
this.add(panel);
this.doLayout();
},

// Removes last panel
removePanel:function() {
this.remove(this.panels[this.panels.length - 1]);
this.panels.pop();
this.doLayout();
}
});

[mikeyroy]

You can find the common listeners under Events for Panel in the API: http://dev.sencha.com/deploy/touch/docs/?class=Ext.lib.Panel

Check out on under Public Methods for Panel in the API, that is how you attach event listeners to specific objects you make:
ex: Ext.get('logout-button').on('tap', this.onLogout, this);
ex: this.on('touch'), this.eventFn, this);

[dontbugme]

Thanks for the reply.

The real challenge is there are so many different ways to add an event listener and just one specific example in Sencha sources (Kitchensink - Touch events).

What I wanted to do is assigning event listeners to a "Panel" instance, not the "Panel" class body, something similar to Actionscript 3 event listeners creations.

Anyway, I figured it out (not the best way, plenty of options to improve but heading to the right direction) and below is the working code, might be helpful to someone else:


Ext.setup({
icon:"icon.png",
glossOnIcon:true,
onReady:function() {
Ext.ns("test");

test.ExtendedPanel = Ext.extend(Ext.Panel, {
constructor:function(config) {
config = config || {};
// Array of sub panels
this.panels = [];
this.supr().constructor.call(this, config);
},

// Adds a panel to the end of panels
addSubPanel:function(panel) {
this.panels.push(panel);
this.add(panel);
this.doLayout();
},

// Removes last panel
removePanel:function() {
this.remove(this.panels[this.panels.length - 1]);
this.panels.pop();
this.doLayout();
}
});

var sub1 = new Ext.Panel({
id:"sub1",
style: {
"background-color":"#FF00FF",
"border":"solid"
},
width:200,
height:200,
html:"sub1 panel"
});

var extended = new test.ExtendedPanel({
id:"extended",
style: {
"background-color":"#00FF00",
"border":"solid"
},
fullscreen:true,
html:"Extended Panel",
layout: {
type:"vbox"
}
});
extended.addSubPanel(sub1);

// Must be after ExtendedPanel.addSubPanel(), since rendering should be completed before allowing "el" access
sub1.mon(sub1.el, {
mousedown:function(event) {
event.stopEvent();
console.info(event.type);
},
touchstart:function(event) {
event.stopEvent();
console.info(event.type);
},
touchend:function(event) {
event.stopEvent();
console.info(event.type);
}
});
}
});

[dimitar71]

Slight improvements of your code, just hooking touch event sniffing into render listener:


Ext.setup({
icon:"icon.png",
glossOnIcon:true,
onReady:function() {
Ext.ns("test");
test.ExtendedPanel = Ext.extend(Ext.Panel, {
constructor:function(config) {
config = config || {};
this.supr().constructor.call(this, config);
// Array of sub panels
this.panels = [];
},

// Adds a panel to the end of panels
addSubPanel:function(panel) {
this.panels.push(panel);
this.add(panel);
this.doLayout();
},

// Removes last panel
removePanel:function() {
var p = this.panels[this.panels.length - 1];
p.removeListener("render", extended_clickHandler);
this.remove(p);
this.panels.pop();
this.doLayout();
}
});

var sub1 = new Ext.Panel({
id:"sub1",
style: {
"background-color":"#FF00FF",
"border":"solid"
},
width:200,
height:200,
html:"sub1 panel"
});
sub1.addListener("render", function() {
sub1.addManagedListener(sub1.el, {
mousedown:sub1_clickHandler,
touchstart:sub1_clickHandler,
touchend:sub1_clickHandler
});
}, sub1, {single:true});

var extended = new test.ExtendedPanel({
id:"extended",
style: {
"background-color":"#00FF00",
"border":"solid"
},
fullscreen:true,
html:"Extended Panel",
layout: {
type:"vbox"
}
});
extended.addSubPanel(sub1);

// sub1 event handler for any mouse events
function sub1_clickHandler(event) {
console.info(event.type);
}
}
});