PDA

View Full Version : Ext.EventObject is undefined + Ext.BoxComponent is undefined



rgamero
10 May 2010, 11:22 AM
Hi there,

This a very weird problem (to me anyway). I have a standalone page that uses some ext components, particularly spinnerfields, some panels, etc (this part works). When I try to integrate this into an application, I get the errors above; I checked the net tab in Firebug and the 6 js files the app uses are being called, they all have a 200(ok) status. So I don't know where the problem is; Any ideas on what's going on? the 2 errors in the title are coming from the spinner.js and spinnerField.js files.

thanks so much in advance.

Ricardo

13 May 2010, 3:58 AM
no way of knowing how to help. are you sure all file are correct? Are you bootstrapping your ext js code with Ext.onReady()?

rgamero
17 May 2010, 2:51 PM
Hi J,

I have an html file with a couple of divs for rendering the spinners and from this page I call ext and the 2 files spinner.js and spinnerField.js; aditionally, I have one simple js file with some code for showing 2 spinners.

This works with no problem and this is the simple js file I wrote:


Ext.onReady(function(){
//some vars
var WIDTH = 200;
var HEIGHT = 70;
//This is the ROWS spinner
var spinRow = new Ext.ux.form.SpinnerField({
fieldLabel: 'Rows',
name: 'rows',
value: 1,
minValue: 1,
maxValue: 100,
width: 50,
incrementValue: 1,
listeners: {
spindown: delRow,
spinup: addRow
}
});
//This is the COLUMN spinner
var spinCol = new Ext.ux.form.SpinnerField({
fieldLabel: 'Columns',
name: 'columns',
value: 2,
minValue: 2,
maxValue: 20,
width: 50,
incrementValue: 1,
listeners: {
spindown: delCol,
spinup: addCol
}
});
//The PANEL holding the spinners
var simple = new Ext.FormPanel({
labelWidth: 50,
frame: false,
title: 'Enter the number of Rows and Colulmns',
bodyStyle: 'padding:5px 5px 0',
width: 250,
defaults: {width: 100},
defaultType: 'textfield',
items: [
spinRow,
spinCol
]
});
simple.render('div_rowCol');
//Functions for the spinners
function delRow(){
}
function addRow(){
}
function delCol(){
}
function addCol(){
}
});

Now, when I try to integrate this simple js to a larger application I get different errors:

The spinnerField.js throws the following errors:
1- Ext.EventObject is undefined
http://localhost:8080/redcap/webtools2/library/ext/ux/SpinnerField.js
Line 20
When line 20: adjustSize: Ext.BoxComponent.prototype.adjustSize,

2- Ext.BoxComponent is undefined
http://localhost:8080/redcap/webtools2/library/ext-2.3.0/ux/SpinnerField.js
Line 20

This result is by only calling the spinner library from a page in the larger application, when I actually implement my code in the larger app, the code doesn't run; I assume is because of these errors above.

Any help is greatly appreciated!

RG

17 May 2010, 4:21 PM
Are you including those files after extjs? Are you using ext-all.js or did you roll your own?

rgamero
17 May 2010, 4:33 PM
Hi J,

This is copy of the header:


<link rel='shortcut icon' href='/rc/rc_v3.1.1/resources/images/favicon.ico' type='image/x-icon'>
<link rel='stylesheet' type='text/css' href='/rc/webtools2/library/ext-2.3.0/resources/css/ext-all.css' media='screen,print'>
<link rel='stylesheet' type='text/css' href='/rc/webtools2/library/ext-2.3.0/resources/css/xtheme-gray.css' media='screen,print'>
<link rel='stylesheet' type='text/css' href='/rc/webtools2/library/ext-2.3.0/ux/Spinner.css' media='screen,print'>
<link rel='stylesheet' type='text/css' href='/rc/rc_v3.1.1/resources/css/smoothness/jquery-ui.css' media='screen,print'>
<link rel='stylesheet' type='text/css' href='/rc/rc_v3.1.1/resources/css/style.css' media='screen,print'>
<script type='text/javascript' src='/rc/rc_v3.1.1/resources/js/FormChek.js'></script>
<script type='text/javascript' src='/rc/webtools2/library/ext-2.3.0/adapter/ext/ext-base.js'></script>
<script type='text/javascript' src='/rc/webtools2/library/ext-2.3.0/ux/Spinner.js'></script> <script type='text/javascript' src='/rc/webtools2/library/ext-2.3.0/ux/SpinnerField.js'></script> <script type='text/javascript' src='/rc/webtools2/library/ext-2.3.0/ext-all.js'></script>
<script type='text/javascript' src='/rc/rc_v3.1.1/resources/js/base.js'></script>

They are in separate files and they are being called in the header.

Thanks so much for going through this with me!
RG

17 May 2010, 6:22 PM
ext-all.js should be before all user extensions and your code.


<script type='text/javascript' src='/rc/webtools2/library/ext-2.3.0/ext-all.js'></script>
<script type='text/javascript' src='/rc/webtools2/library/ext-2.3.0/ux/Spinner.js'></script>
<script type='text/javascript' src='/rc/webtools2/library/ext-2.3.0/ux/SpinnerField.js'></script>

rgamero
18 May 2010, 12:33 PM
Wow! you rock! I can't believe it was so simple and basic! I'm really new to all this :">

Thanks so much J!

Does your book cover stuff like this?

Thanks again!

Ricardo

18 May 2010, 12:44 PM
I cover how to setup a project, but not necessarily that point.

It's a given that If you use an "extension" to a framework, you should have the framework parsed by the browser before the extension :)


Some things I do cover though;

chapter 1 (hello world):
http://tdg-i.com/img/screencasts/2010-05-18_1637.png


in ch 16 and 17, we work on how to build applications:
http://tdg-i.com/img/screencasts/2010-05-18_1642.png

ch17:
http://tdg-i.com/img/screencasts/2010-05-18_1643.png

steffenk
18 May 2010, 1:33 PM
you should buy this book, it's excellent, and Jay explains it in a very clear and understandable way. It's a new standard, and every real ExtJS coder should have it on his desk ;)

And, btw, don't miss his excellent videos on his website or on http://extjs.tv/

Sry Jay for this promo, but it has to be said clearly, you do so much excellent stuff for the community!!! Thanks so much.