PDA

View Full Version : Can Anyone Please Solve This Program.. i have Tried for 2 weeks Still i can't sol..



kishore0549
25 Apr 2009, 4:03 AM
actually my requirment is if i click the tab ie: "EventTab" then displayed the progressbar in a tab body.not the container ...i got hte out put which displays in a whole container is when i clicked the tab i got the progressbar in a whole container...
here is my code please Anyone Sol my problem...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>progressbar.html</title>

<link rel="stylesheet" href="ext-all.css" />
<script language="javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
<script language="javascript" src="ext-2.2/ext-all-debug.js"></script>
<script>
Ext.onReady(function(){
var tabs = new Ext.TabPanel({
id:'container',
renderTo: document.body,
activeTab: 0,
width:800,
height:600,
plain:true,
defaults:{autoScroll: true},
items:[{
id : 'n',
title:'normal'
},
{
id: 'EventTab',
title: 'eventTab',
listeners: {activate: progressBar},

}
]

});
function progressBar(tab)
{
var pbr = new Ext.ProgressBar({
id: 'progressbar',
width:500,
text: 'initialising....',
renderTo: Ext.get('tabs'),

layout : 'border',
animate : true,
baseCls : 'x-progress',
handler : 'updatePbar'
});
var Runner = function()
{
var f = function(v, pbr,count, cb)
{
return function()
{
//give this one a different count style for fun
var i = v/count;
pbr.updateProgress(i, Math.round(100*i)+'%......'+'loading...');
if(i==1)
{

pbr.updateText('Done!');
pbr.hide();
}



};
};
return {
run : function(pbr,count, cb)
{

var ms =5000/count;
for(var i = 1; i < (count+2)-1; i++)
{
if(i<=100)
{
setTimeout(f(i, pbr,count, cb), i*ms);

}



}
pbr.updateText('Done!');

}

}
}();
Runner.run(pbr,19, function(){

pbr.updateText('Done!');
});
}
});

</script>
</head>
<body>
<div id="tabs">
<div id="n"></div>
<div id="EventTab"></div>
</div>
<div id="progressBarDiv" style="width:300px;"></div>
<div id="progressTextDiv" class="status"><span id="progressStatusText"></span></div>
<script language="javascript" src="eventTab.js"></script>

<script language="javascript" src="eventData.js"></script>
</body>
</html>

kishore0549
25 Apr 2009, 4:17 AM
fdds
actually my requirment is if i click the tab ie: "EventTab" then displayed the progressbar in a tab body.not the container ...i got hte out put which displays in a whole container is when i clicked the tab i got the progressbar in a whole container...
here is my code please Anyone Sol my problem...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>progressbar.html</title>

<link rel="stylesheet" href="ext-all.css" />
<script language="javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
<script language="javascript" src="ext-2.2/ext-all-debug.js"></script>
<script>
Ext.onReady(function(){
var tabs = new Ext.TabPanel({
id:'container',
renderTo: document.body,
activeTab: 0,
width:800,
height:600,
plain:true,
defaults:{autoScroll: true},
items:[{
id : 'n',
title:'normal'
},
{
id: 'EventTab',
title: 'eventTab',
listeners: {activate: progressBar},

}
]

});
function progressBar(tab)
{
var pbr = new Ext.ProgressBar({
id: 'progressbar',
width:500,
text: 'initialising....',
renderTo: Ext.get('tabs'),

layout : 'border',
animate : true,
baseCls : 'x-progress',
handler : 'updatePbar'
});
var Runner = function()
{
var f = function(v, pbr,count, cb)
{
return function()
{
//give this one a different count style for fun
var i = v/count;
pbr.updateProgress(i, Math.round(100*i)+'%......'+'loading...');
if(i==1)
{

pbr.updateText('Done!');
pbr.hide();
}



};
};
return {
run : function(pbr,count, cb)
{

var ms =5000/count;
for(var i = 1; i < (count+2)-1; i++)
{
if(i<=100)
{
setTimeout(f(i, pbr,count, cb), i*ms);

}



}
pbr.updateText('Done!');

}

}
}();
Runner.run(pbr,19, function(){

pbr.updateText('Done!');
});
}
});

</script>
</head>
<body>
<div id="tabs">
<div id="n"></div>
<div id="EventTab"></div>
</div>
<div id="progressBarDiv" style="width:300px;"></div>
<div id="progressTextDiv" class="status"><span id="progressStatusText"></span></div>
<script language="javascript" src="eventTab.js"></script>

<script language="javascript" src="eventData.js"></script>
</body>
</html>