the following is the code snippet that i have implemented in the application.

on the web pages categories will be displayed along with the content. but for some pages there are many categories. in such cases user has to scroll the lengthy web page from top to bottom. to avoid this i provide the following solution which will avoid page scrolling.

index.html <script> function initializePage() { myurl = window.location.pathname.split('/').join("/"); if (myurl.lastIndexOf(".shtml")==-1){ myurl = myurl+"index.shtml"; } Ext.Ajax.request({ url: '/pcgi-bin/get_documents.cgi?action=tabs&qs='+myurl, method:'GET', headers: {'Content-Type': 'application/json'}, success: function(response){ var tabsJson = Ext.util.JSON.decode(response.responseText); buildtabs(tabsJson); }, failure: function(response){ alert('fail to load Tabs'); } });

function buildtabs(tabsJson){ singleTabs = new Ext.TabPanel({ renderTo:'tabs-default-example', plugins: new CISCO.intranet.ux.TabState(), id: 'rememberMe', resizeTabs:true, minTabWidth: 133, enableTabScroll:false, defaults: {cls:'tab-panel-item',autoScroll:false}, activeTab:0, autoHeight:true, defaults:{ autoHeight:true, cls:'tab-panel-item' }, items:tabsJson }); } } </script> get_documents.cgi

my $action = $q->param('action'); if ($action eq 'tabs'){&get_tabs();} sub get_tabs{ my $qs = $q->param('qs'); my $result=[]; my $sql="select distinct s.id sid,s.section,s.ordernum from tbl1 u,tbl2 s,tbl3 ss where u.URL like '".$qs."' and s.url_id=u.id and ss.section_id=s.id order by s.ordernum"; my $sth = $dbh->prepare($sql); $sth->execute(); while ( ($id,$name) = $sth->fetchrow_array() ) { if($name ne "none"){ $ja.= "{autoLoad: {url: '/pcgi-bin/get_tabcontent.cgi', params: 'qs=$qs&tid='+$id,scripts:true},listeners: {activate: handleActivate}},"; } } print $ja = "[".substr($ja,0,-1)."]"; } get_tabcontent.cgi in the get_tabcontent.cgi result content of tab will be displayed using tab id.