PDA

View Full Version : Uncayght reference error:ext is not defined



bunty
21 Sep 2012, 8:03 PM
Hi all,

I am getting the above error for this code:


Ext.require(['*']); Ext.onReady(function(){
var totalScreenWidth = screen.availWidth;
var totalScreenHeight = screen.availHeight;
Ext.QuickTips.init();

var viewport = Ext.create('Ext.ViewPort',{
id: 'border-example',
layout: 'border',
items: [
Ext.create('Ext.Component',{
region: 'north',
height: totalScreenHeight * 0.05,
autoEl: {
tag: 'div',
html: '<p><center>UI Demo</center></p>'
}
}),{
reion: 'west',
stateId: 'navigation-panel',
id: 'west-panel',
title: 'Tree View',
split: true,
width: totalScreenWidth * 0.2,
collapsible: true,
animCollapse: true,
xtype: 'tabpanel',
dockedItems: [{
dock: 'top',
xtype: 'toolbar'
}],
minSize: 175,
maxSize: 400,
margin: '0 5 0 0',
activeTab: 1,
tabPosition: 'bottom',
items: [{
title: 'Tree View',
autoScroll: true
},{
title: 'Graphical View',
autoScroll: true
}]

},Ext.widget('tabpanel',{
id: 'tabWidgetPanel',
renderTo: 'tabs',
width: totalScreenWidth * 0.782,
height: totalScreenHeight * 0.878,
items: [{
contentEl: 'Tabs1',
title: 'Tab1',
},{
contentEl: 'Tabs2',
title: 'Tab2',
}]
})]
});

ext.get("hideit").on('click',function(){
var w = Ext.getCmp('west-panel');
w:collapsed?w.expand():w.collapse();
});

The exception is thrown from ext-all.js (line 21) telling "e is null". I is thrown in this section:


{

contentEl: 'Tabs2',
title: 'Tab2',
}



Please help

vietits
21 Sep 2012, 10:49 PM
Do the HTML elements with id 'Tabs1' & 'Tabs2' exist on the document?

bunty
21 Sep 2012, 11:35 PM
yes, in the <div id = ""> they are present. Any suggestiong on this?

vietits
22 Sep 2012, 12:30 AM
1. There are some errors in your code. See fixes in red color.
2. Do not use renderTo for a component if it is a child item of a container. See more here http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-renderTo.


Ext.require(['*']);
Ext.onReady(function(){
var totalScreenWidth = screen.availWidth;
var totalScreenHeight = screen.availHeight;
Ext.QuickTips.init();

// var viewport = Ext.create('Ext.ViewPort',{
var viewport = Ext.create('Ext.Viewport',{
id: 'border-example',
layout: 'border',
items: [
Ext.create('Ext.Component',{
region: 'north',
height: totalScreenHeight * 0.05,
autoEl: {
tag: 'div',
html: '<p><center>UI Demo</center></p>'
}
}),{
reion: 'west',
stateId: 'navigation-panel',
id: 'west-panel',
title: 'Tree View',
split: true,
width: totalScreenWidth * 0.2,
collapsible: true,
animCollapse: true,
xtype: 'tabpanel',
dockedItems: [{
dock: 'top',
xtype: 'toolbar'
}],
minSize: 175,
maxSize: 400,
margin: '0 5 0 0',
activeTab: 1,
tabPosition: 'bottom',
items: [{
title: 'Tree View',
autoScroll: true
},{
title: 'Graphical View',
autoScroll: true
}]

},Ext.widget('tabpanel',{
id: 'tabWidgetPanel',
// renderTo: 'tabs',
width: totalScreenWidth * 0.782,
height: totalScreenHeight * 0.878,
items: [{
contentEl: 'Tabs1',
title: 'Tab1',
},{
contentEl: 'Tabs2',
title: 'Tab2',
}]
})]
});

//ext.get("hideit").on('click',function(){
Ext.get("hideit").on('click',function(){
var w = Ext.getCmp('west-panel');
w:collapsed?w.expand():w.collapse();
});

bunty
22 Sep 2012, 12:40 AM
This is the code after making the changes:


<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Panel Example</title>

<link rel="stylesheet" type="text/css" href="/CEPSDemo/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/CEPSDemo/css/example.css" />

<script type="text/javascript" src="/CEPSDemo/js/ext-all.js"></script>
<script type="text/javascript" src="/CEPSDemo/js/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.require(['*']);
Ext.onReady(function(){
var totalScreenWidth = screen.availWidth;
var totalScreenHeight = screen.availHeight;
Ext.QuickTips.init();

var viewport = Ext.create('Ext.Viewport',{
id: 'border-example',
layout: 'border',
items: [
Ext.create('Ext.Component',{
region: 'north',
height: totalScreenHeight * 0.05,
autoEl: {
tag: 'div',
html: '<p><center>UI Demo</center></p>'
}
}),{
region: 'west',
stateId: 'navigation-panel',
id: 'west-panel',
title: 'Tree View',
split: true,
width: totalScreenWidth * 0.2,
collapsible: true,
animCollapse: true,
xtype: 'tabpanel',
dockedItems: [{
dock: 'top',
xtype: 'toolbar'
}],
minSize: 175,
maxSize: 400,
margin: '0 5 0 0',
activeTab: 1,
tabPosition: 'bottom',
items: [{
title: 'Tree View',
autoScroll: true
},{
title: 'Graphical View',
autoScroll: true
}]

},Ext.widget('tabpanel',{
id: 'tabWidgetPanel',
region: 'center',
width: totalScreenWidth * 0.782,
height: totalScreenHeight * 0.878,
items: [{
contentEl: 'Tabs1',
title: 'Tab1',
},{
contentEl: 'Tabs2',
title: 'Tab2',
}]
})]
});

Ext.get("hideit").on('click',function(){
var w = Ext.getCmp('west-panel');
w:collapsed?w.expand():w.collapse();
});
});
</script>
</head>
<body>
</body>
</html>

Neither I am getting any error messages nor anything getting displayed in the screen :(

Please suggest

bunty
22 Sep 2012, 12:46 AM
I removed all the div section from <body> of HTML since i removed the renderTo from the edited code.

vietits
22 Sep 2012, 1:11 AM
1. You should use ext-all.js or ext-debug-all.js but not both.
2. Where are Tabs1 & Tabs2 DIV elements on your page? Try to add these elements and you will see your code run fine.

bunty
22 Sep 2012, 1:23 AM
ok now its running fine. Like the mistake i did while typing each and every word, is nt there some IDE which provides drop down list of the components or auto-completion help? May I know which tool/IDE you are using for ExtJs auto-completion feature?

vietits
22 Sep 2012, 1:38 AM
I just use normal text editor. It is Editplus.