PDA

View Full Version : Calling setActiveItem() from Ext.panel html property



wherry
26 Nov 2011, 2:20 PM
I'm wondering if this is possible. I have a Ext.Panel with a html property to display my content.

I'm wanting a link (a href) within this html to call setActiveItem() to change the card.

Here is some pseudo code:




function menuHandler(pButton) {
var index=0;
switch(pButton.text){
case "Home":
index=0;
break;
}

MyApp.views.viewport.setActiveItem(index,{type: 'slide', direction: 'left'});

MyApp.views.dashboardContainer = new Ext.Panel({
id: 'myContainer',
layout: 'fit',
html:'<div class="container"><a href="#" onclick="javascript: menuHandler("goHome");>Go Home</a></div>' });



This current approach is definitely a scoping issue. However, I wondering if (1) this is possible and (2) what is the best practice for calling back to the Sencha Touch app js from html.

mitchellsimoens
27 Nov 2011, 7:19 AM
var panel = new Ext.Panel({
fullscreen : true,

html : '<a href="http://www.sencha.com/">Sencha</a>'
});

Once that is rendered you can place a listener on that panel:


panel.mon(panel.body, {
scope : panel,
delegate : 'a',
tap : function() {......}
});

The important part is the delegate config... it has to map to the element you want that listener to fire on which accepts a DOM selector, in this case 'a'.

wherry
27 Nov 2011, 10:35 AM
How would you pass arguments to that function?

The use case is that there are multiple a hrefs on that html propery that change to different cards depending on which is clicked.

won.rhee
28 Nov 2011, 10:36 AM
panel.mon(panel.body, {
scope : panel,
delegate : 'a',
tap : function() {......}
});

Where can I find mon() in Secha Docs API?

mitchellsimoens
28 Nov 2011, 10:40 AM
Where can I find mon() in Secha Docs API?

It hasn't been in ST1 docs the whole time but since ST1 really came from Ext JS 3 my experience told me to try it when ST1 came out and it was there. To learn more about it you can look at the Ext JS 3 docs for it: http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Component-method-mon

wherry
28 Nov 2011, 4:08 PM
Seems decently complicated and extremely undocumented. Is there an alternate approach to this?

AndreaCammarata
29 Nov 2011, 1:09 AM
Exactly like @mitchell explain you, you should use Event Delegation to achieve that.
If you don't want to use the "mon" function, you can write your code like follows:



var panel = new Ext.Panel({
fullscreen : true,
html : '<a href="http://www.sencha.com/">Sencha</a>',
listeners: {
body: {
tap : function() {......},
delegate: 'a'
}
}
})