tarnawska
6 Apr 2007, 12:37 PM
I'm trying to do something apparently very simple; I just want a tabpanel with an ajax tab that contains another tabpanel.
I'm using Rails as my implementation language, so I'm afraid my examples are going to be a bit biased:
I have one view, the domain overview:
<div id="domain-tabs" class="xp"></div>
<script type="text/javascript">
var domaintabs = new Ext.TabPanel('domain-tabs');
var dns = domaintabs.addTab('dtabs-dns', "DNS");
dns.setUrl('<%= @domain.name %>/dns?ajax=true');
var sites = domaintabs.addTab('dtabs-site', "Sites");
sites.setUrl('<%= @domain.name %>/web?ajax=true');
var mail = domaintabs.addTab('dtabs-mail', "Mail");
mail.setUrl('<%= @domain.name %>/mail?ajax=true');
var db = domaintabs.addTab('dtabs-db', "Database");
db.setUrl('<%= @domain.name %>/db?ajax=true');
domaintabs.disableTab('dtabs-db');
domaintabs.activate('dtabs-dns');
</script>
One of those views, the DNS view contains a second tab panel:
<div id="dns-tabs">
<div id="soa-form" class="tab-content"><%= render :partial => 'soa' %></div>
<div id="rr-form" class="tab-content"><%= render :partial => 'rr' %></div>
</div>
<script type="text/javascript">
var dnstabs = new Ext.TabPanel('dns-tabs');
dnstabs.addTab('soa-form', "SOA Record");
dnstabs.addTab('rr-form', "Resource Records");
dnstabs.activate('rr-form');
</scrip>
The result is a page that properly displays the 'domain-tabs' tabpanel, except that the 'dns-tabs' aren't displayed. There aren't any javascript errors, no tabs rendered, just the two tab-content divs rendered.
Can anyone see what I'm doing wrong? Any help would be appreciated.
Thanks!
- Ryan
I'm using Rails as my implementation language, so I'm afraid my examples are going to be a bit biased:
I have one view, the domain overview:
<div id="domain-tabs" class="xp"></div>
<script type="text/javascript">
var domaintabs = new Ext.TabPanel('domain-tabs');
var dns = domaintabs.addTab('dtabs-dns', "DNS");
dns.setUrl('<%= @domain.name %>/dns?ajax=true');
var sites = domaintabs.addTab('dtabs-site', "Sites");
sites.setUrl('<%= @domain.name %>/web?ajax=true');
var mail = domaintabs.addTab('dtabs-mail', "Mail");
mail.setUrl('<%= @domain.name %>/mail?ajax=true');
var db = domaintabs.addTab('dtabs-db', "Database");
db.setUrl('<%= @domain.name %>/db?ajax=true');
domaintabs.disableTab('dtabs-db');
domaintabs.activate('dtabs-dns');
</script>
One of those views, the DNS view contains a second tab panel:
<div id="dns-tabs">
<div id="soa-form" class="tab-content"><%= render :partial => 'soa' %></div>
<div id="rr-form" class="tab-content"><%= render :partial => 'rr' %></div>
</div>
<script type="text/javascript">
var dnstabs = new Ext.TabPanel('dns-tabs');
dnstabs.addTab('soa-form', "SOA Record");
dnstabs.addTab('rr-form', "Resource Records");
dnstabs.activate('rr-form');
</scrip>
The result is a page that properly displays the 'domain-tabs' tabpanel, except that the 'dns-tabs' aren't displayed. There aren't any javascript errors, no tabs rendered, just the two tab-content divs rendered.
Can anyone see what I'm doing wrong? Any help would be appreciated.
Thanks!
- Ryan