View Full Version : Adding a click event to a div element and loading a new Panel

24 Jan 2012, 7:06 AM
app.views.dashboard = new Ext.Panel({
id: 'dashboard',
layout: 'fit',
renderTpl: [
'<div class="divTable">',
'<div class="divColumn">',
'<div class="divRow">',
'<div id="btnAMapping" class="activeMapping" />',
'<div class="divRow">',
'<div id="btnHMapping" class="historicMapping" />',
'<div class="divRow">',
'<div id="btnReports" class="reports" />',
'<div class="divRow">',
'<div class="batch" />',
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

24 Jan 2012, 10:10 AM
Ext.query should return an array.

25 Jan 2012, 1:43 AM
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'}); });

21 Feb 2012, 6:40 AM
Anyone have thoughts on how to do this? I am running into the exact same issue...

21 Feb 2012, 9:41 PM
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:


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

// conditional logic here, if any