Adding a click event to a div element and loading a new Panel

[whiplash]

app.views.dashboard = new Ext.Panel({
id: 'dashboard',
layout: 'fit',
renderTpl: [
'<tpl>',
'<div class="divTable">',
'<div class="divColumn">',
'<div class="divRow">',
'<div id="btnAMapping" class="activeMapping" />',
'</div>',
'<div class="divRow">',
'<div id="btnHMapping" class="historicMapping" />',
'</div>',
'<div class="divRow">',
'<div id="btnReports" class="reports" />',
'</div>',
'<div class="divRow">',
'<div class="batch" />',
'</div>',
'</div>',
'</div>',
'</tpl>'
],
listeners: {
afterrender: function(c) {
Ext.selectNode(Ext.query('btnAMapping'), 'dashboard').on('click', fred());

// c.el.on('click', function(){
// if(Ext.query("btnAMapping")) {
// console.log(this);
// //viewport.setActiveItem('groupsListContainer', {type: 'slide', direction: 'right'});
//
// }
// });
}
}
});


function fred() just returns an alert, so I can test if my code even reaches that far.

What I want to do is to make the viewport Panel set the groupsListContainer as the active screen, but it says that the viewport is undefined. Hence, I have that code block commented out to try a few other approaches of accessing my new image (acting as a button)

I have tried ....



Ext.selectNode(Ext.query('btnAMapping'), 'dashboard').on('click', fred());

// Also tried this

Ext.query('btnAMapping').addListener('click', function(){alert('Fred');});


Would anyone have any ideas on how I can apply a click event to a div and load a Panel??


Appreciate any help :)

Thanks guys

[mitchellsimoens]

Ext.query should return an array.

[whiplash]

Hi Guys,

I really should get my head around the MVC approach, however time doesnt allow for that just now.

Could someone please help me apply a click even to an image in a div (acting as a button)



console.log(Ext.query('#btnAMapping')); // Returns the div id values below

console.log(Ext.get('btnMapping')); // Returns the Ext.Element.Ext.extend.constructor values
[<div id=​"btnAMapping" class=​"aMapping">​</div>​]Ext.Element.Ext.extend.constructordom: HTMLDivElementid: "btnAMapping"__proto__: F



I have tried to slide the desired screen into view in my viewport Panel with no luck as it says the viewport is 'undefined'



Ext.get('btnAMapping').addListener('click', function(){viewport.setActiveItem('groupsListContainer', {type: 'slide', direction: 'right'}); });

[gjsmith66]

Anyone have thoughts on how to do this? I am running into the exact same issue...

[eyepoker]

We would need to see more of your code but seems to me that the "viewport" panel doesn't exist (or you have a typo).

Instead of "viewport", use the name of the Panel whose items "groupListContainer" is a member of. So, if you have this:




var myPanel = new Ext.Panel({
...
items:[somePanel, groupListContainer, somePanel],
...
});



then you would use this to change to the desired panel:




myPanel.setActiveItem(groupListContainer);



As far as to the click, i do the following on the panel that the html div is inside of:




listeners:{
el:{
tap:function(e,el){
// conditional logic here, if any
myPanel.setActiveItem(groupListContainer);
},
delegate:['.aMapping']
}
}