PDA

View Full Version : Uncaught TypeError: Cannot call method 'apply' of undefined



the_skua
15 Mar 2012, 10:11 AM
I'm generating an error for popping up a window with content, that Designer is okay with. Any ideas where the problem might be?

Here's the button:

{ xtype: 'button',
id: 'helpButton',
margin: '0 0 0 2',
text: 'Help',
listeners: {
click: {
fn: me.onHelpButtonClick,
scope: me
}
}
}

Here's the listener:

onHelpButtonClick: function(button, e, options) { Ext.widget('toolhelp').show();
}

Here's the Window (ToolHelp.js):

Ext.define('RiskMap.view.ToolHelp', { extend: 'Ext.window.Window',
alias: 'widget.toolhelp',


height: 375,
width: 450,
layout: {
align: 'stretch',
type: 'hbox'
},
bodyPadding: 4,
title: 'Help',
modal: true,
y: 40,


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'container',
width: 300,
layout: {
type: 'fit'
},
flex: 1,
items: [
{
xtype: 'label',
style: {
'font-weight': 'bold'
},
text: 'Step 1: Set Location'
},
{
xtype: 'container',
html: '<p>Use the drop down list at the top of the control panel to choose your state of interest, zooming the map to that state.</p>',
padding: '4 0 6 6'
},
{
xtype: 'label',
style: {
'font-weight': 'bold'
},
text: 'Step 2: Select Model'
},
{
xtype: 'container',
html: '<p>Choose either Spring or Winter wheat. If you select Spring, set the susceptibility level that best matches your wheat type and production practices.</p>',
padding: '4 0 4 6'
},
{
xtype: 'container',
height: 24,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'label',
style: {
'font-weight': 'bold'
},
text: 'Step 3: Choose Assessment Date',
margins: '4 6 0 0'
},
{
xtype: 'button',
text: 'More...',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}
]
},
{
xtype: 'container',
html: '<p>Click the calendar icon to open a calendar that allows you choose an assessment date. We suggest using several dates just prior to the flowering date of your fields.</p>',
padding: '2 0 4 6'
},
{
xtype: 'container',
items: [
{
xtype: 'label',
margin: '4 6 0 0',
style: {
'font-weight': 'bold'
},
text: 'Extra: Weather Stations'
},
{
xtype: 'button',
margin: '-6 0 0 6',
text: 'More...',
listeners: {
click: {
fn: me.onButtonClick1,
scope: me
}
}
}
]
},
{
xtype: 'container',
html: '<p>After choosing a state, weather stations will be added to the map. Click a station on the map for station-based risk information. <em>Please note that station-based information represents a different evaluation of risk and may differ from the mapped risk level.</em></p>',
padding: '2 0 6 6'
}
]
},
{
xtype: 'image',
height: 80,
width: 150,
src: 'img/fusarium.jpg',
margins: '0 0 0 5'
}
]
});


me.callParent(arguments);
},


onButtonClick: function(button, e, options) {
Ext.create('Ext.window.Window', {
title: 'Assessment Date',
width: 250,
layout: 'fit',
bodyPadding: 4,
html: '<p>Visit fields to determine the date when anthers are exposed on 50% of the heads. Planting date and variety will affect flowering date. Wheat is most susceptible during the flowering growth stage, and the models will use weather conditions observed during the seven days prior to the flowering date you select.</p><br/><p>Wheat will often begin to flower three to four days after head emergence. The flowering growth stage can be identified by the presence of anthers on the surface of the developing wheat head. The crop is considered to be flowering when 50% or more of the heads in a field have anthers showing.</p>'
}).show();
},


onButtonClick1: function(button, e, options) {
Ext.create('Ext.window.Window', {
title: 'Weather Stations',
width: 250,
layout: 'fit',
bodyPadding: 4,
html: "<p>For AgNet stations with 'bias correction,' the thicker black line represents the risk based on the conditions at the station while the thinner blue line indicates the risk based on a fine grid estimate of atmospheric conditions over the same area. The larger the difference (separation), the more likely that the AgNet site represent a more accurate forecast.</p>"
}).show();
}


});

mitchellsimoens
15 Mar 2012, 11:04 AM
It's saying it can't find the function so is it a scope issue?

the_skua
15 Mar 2012, 12:05 PM
Which function is it saying it can't find?

What would be the appropriate method for showing a view (the Window) from an event coming from another view?

mitchellsimoens
15 Mar 2012, 12:10 PM
It's saying it can't find the method on the button you are clicking on. If it's this one:


{ xtype: 'button',
id: 'helpButton',
margin: '0 0 0 2',
text: 'Help',
listeners: {
click: {
fn: me.onHelpButtonClick,
scope: me
}
}
}

Then it can't find me.onHelpButtonClick

the_skua
15 Mar 2012, 12:16 PM
So I changed it to just use an in-line handler, and it's still giving me the same error:


{ xtype: 'button',
id: 'helpButton',
margin: '0 0 0 2',
text: 'Help',
listeners: {
click: function() {
console.log("button pressed");
//Ext.widget('toolhelp').show();
}
}
}