PDA

View Full Version : problem with links opening window and tabs



johnsmith
30 Jun 2008, 4:06 AM
Hi,
i've got the following problem:

i want to have a result page for search results of a search.
when i click on the links i want to load 4 ajax pages into the 4 tabs to show the results.
as a parameter for the ajax i add the id (=result1-result20) to the link and (one,two,three,four) as a tab number to show the correct result.
this works fine the first time i click a link and the window and tabs open.
but when i close the window and click another link i get the same id (i clicked the first time) even when i click another link.

how can i fix this?

thanks in advance

john

here's my program code:

My HTML-Code:


<!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>Hello World Window Example</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<script type="text/javascript" src="adapter/ext/ext-base.js"></script>

<!-- ENDLIBS -->

<script type="text/javascript" src="ext-all.js"></script>

<script language="javascript" src="hello.js"></script>

<!-- Common Styles for the examples -->

<style type="text/css">
.x-panel-body p {
margin:10px;
font-size:15px;
}
</style>
<link rel="stylesheet" type="text/css" href="lib.css" />
</head>
<body>

<a href="#" onclick="return(false);" id="result1">I am match #1</a><BR>
<a href="#" onclick="return(false);" id="result2">I am match #2</a><BR>
<a href="#" onclick="return(false);" id="result3">I am match #3</a><BR>
<a href="#" onclick="return(false);" id="result4">I am match #4</a><BR>
<a href="#" onclick="return(false);" id="result5">I am match #5</a><BR>
<a href="#" onclick="return(false);" id="result6">I am match #6</a><BR>
<a href="#" onclick="return(false);" id="result7">I am match #7</a><BR>
<a href="#" onclick="return(false);" id="result8">I am match #8</a><BR>
<a href="#" onclick="return(false);" id="result9">I am match #9</a><BR>
<a href="#" onclick="return(false);" id="result10">I am match #10</a><BR>
<a href="#" onclick="return(false);" id="result11">I am match #11</a><BR>
<a href="#" onclick="return(false);" id="result12">I am match #12</a><BR>
<a href="#" onclick="return(false);" id="result13">I am match #13</a><BR>
<a href="#" onclick="return(false);" id="result14">I am match #14</a><BR>
<a href="#" onclick="return(false);" id="result15">I am match #15</a><BR>
<a href="#" onclick="return(false);" id="result16">I am match #16</a><BR>
<a href="#" onclick="return(false);" id="result17">I am match #17</a><BR>
<a href="#" onclick="return(false);" id="result18">I am match #18</a><BR>
<a href="#" onclick="return(false);" id="result19">I am match #19</a><BR>
<a href="#" onclick="return(false);" id="result20">I am match #20</a><BR>

<div id="hello-win" class="x-hidden">

</div>
</body>
</html>


heres my js code:



Ext.onReady(function(){
var win;
var panel;

var links=Ext.select("a[id^=result]");
links.each (function(element) {
element.on('click', function(ev, el) {

if(!win){
panel = new Ext.TabPanel({

activeTab: 0,
items: [{
id:'one',
title: 'Tab 1',
listeners:{
activate: function(tabs){
// if(newTab.autoLoad){
// newTab.doAutoLoad();
//}
// tabs.load('ajax1.php?tab=four&parameter='+el.id);
tabs.doAutoLoad();

}
},
autoLoad: 'ajax1.php?tab=one&parameter='+el.id
// params: 'hello=world',
},{
id:'two',
title: 'Tab 2',
listeners:{
activate: function(tabs){
// if(newTab.autoLoad){
// newTab.doAutoLoad();
//}
// tabs.load('ajax1.php?tab=four&parameter='+el.id);
tabs.doAutoLoad();

}
},
autoLoad: 'ajax1.php?tab=two&parameter='+el.id
},
{
id:'three',
title: 'Tab 3',
listeners:{
activate: function(tabs){
// if(newTab.autoLoad){
// newTab.doAutoLoad();
//}
// tabs.load('ajax1.php?tab=four&parameter='+el.id);
tabs.doAutoLoad();

}
},
autoLoad: 'ajax1.php?tab=three&parameter='+el.id
}
,
{
//id:'four',
title: 'Tab 4',

autoLoad: 'ajax1.php?tab=four&parameter='+el.id,
listeners:{
activate: function(tabs){

// if(newTab.autoLoad){
// newTab.doAutoLoad();
//}
// tabs.load('ajax1.php?tab=four&parameter='+el.id);
tabs.autoLoad='ajax1.php?nachladen=ja&tab=four&parameter='+el.id
tabs.doAutoLoad();

}
}
}
]

});

//alert(el.id);
win = new Ext.Window({
el:'hello-win',
layout:'fit',
width:800,
height:500,
closeAction:'hide',
plain: true,
// autoHeight:'false',

items: panel,

buttons: [{
text: 'Schlie&szlig;en',
handler: function(){
win.hide();
// delete win;
}
}]
});
} else
{


}
win.show(this);
});
})

});