PDA

View Full Version : First EXT JS :: NOT WORKING



shatabdi
12 Mar 2011, 5:07 AM
Hi ,

I am new in ext js , i download the ext js 4.0 and copied in my localhost path :
its WAMP , WAMP is working properly in my machine .
Below is my total script , its not showing , please help so that i can learn EXT JS .

My path : file:///G:/wamp/www/ext-4.0-pr3/examples/panel/test.html

--------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ext.Panel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<link rel="stylesheet" type="text/css" href="panel.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript">
var tab1={
title: 'First Tab',
html: 'Content for the frst tab'
};
var tab2={
title: 'Second Tab',
html: 'Content for the second tab'
};
var tab3={
title: 'Third Tab',
html: 'Content for the third tab'
};


var tabPanel = new Ext.TabPanel({
title:'Tab Panel',
width:400,
height:300,
applyTo: 'tab-panel',
items: [tab1,tab2,tab3],
activeItem:0,
defaults:{bodyStyle:'padding:5px'}

});
</script>


</head>
<body>

<div id="my-tabs" style="width:400px; margin:10px;"></div>
<div id="tab1" class="x-hide-display" style="height:200px;">A Simple Tab</div>
<div id="tab2" class="x-hide-display" style="height:200px;">Another Tab</div>

</body>
</html>

jratcliff
12 Mar 2011, 8:09 PM
First, welcome to Ext JS! :)

Now for your issues. You have a few but first, you need to change your code so that it runs AFTER the dom is ready. One way to do this is to put your code in a function and include this function as the first parameter to the Ext.onReady() method.

Next, your tab panel is doing an applyTo to a non-existent id on your page. So I've changed it to 'my-tabs' since you have a div at the bottom of the page with that id. (not sure why you have a tab1 and a tab2 div...did you copy and paste this from somewhere? In anycase, you can just remove those two divs since your code isn't using them anyway.

So here's your code wrapped in a function and called only when the dom is ready:



Ext.onReady(function(){
var tab1={
title: 'First Tab',
html: 'Content for the frst tab'
};
var tab2={
title: 'Second Tab',
html: 'Content for the second tab'
};
var tab3={
title: 'Third Tab',
html: 'Content for the third tab'
};


var tabPanel = new Ext.TabPanel({
title:'Tab Panel',
width:400,
height:300,
applyTo: 'my-tabs',
items: [tab1,tab2,tab3],
activeItem:0,
defaults:{bodyStyle:'padding:5px'}

});
});

shatabdi
13 Mar 2011, 2:47 AM
Thanks for reply , surely i will try ...