PDA

View Full Version : Selecting tabs by name or class?



cyberlogi
7 May 2007, 12:17 AM
All,

I have a BasicDialog for editing content elements on a user profile page. The user can dynamically determine what elements are on the page. And consequently what tabs show up in the edit dialog. Each element in the page has its own 'edit' link, which should open the BasicDialog to the appropriate tab. Because content is loaded dynamically, I don't always know what numeric position the tab is in. Looking through TabPanel and TabPanelItem, I only see methods for selecting tabs by their position. I don't see anyway to select tabs by their value or a class or something like that. Am I missing something, does this exist yet?

thanks
-matt

Animal
7 May 2007, 5:21 AM
You're missing how easy it is to write code to do what you want... here, I'll do your job for you:



Ext.override(Ext.TabPanel, {
selectTab: function(selector) {
return this.getTab(Ext.DomQuery.selectNode("#" + tabs.el.id + " " + selector + ".tab-content").id);
}
});

cyberlogi
7 May 2007, 11:12 PM
So if I understand this correctly, this is going to search the DOM of the tabs for something with a class 'selector.tab-content'. Is that what this query does? If so, I think i'm still not getting something.

first, the variable 'tabs' is undefined in the global scope, so I have to define this override where I retrieve the tabs from the BasicDialog. is that what you intended?

second, the BasicDialog TabPanel creates a DOM for the tabs that looks like:


<div id="ext-gen114" class="x-dlg-dlg-body" style="left: 0px; top: 24px; height: 355px; width: 478px;">
<div id="ext-gen108" class="x-dlg-bd x-tabs-top" style="height: 329px; width: 478px;">
<div id="ext-gen155" class="x-tabs-wrap">
<div class="x-tabs-strip-wrap">
<table id="ext-gen157" class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr id="ext-gen156">
<td id="ext-gen164" class="on" style="width: 49px;">
<a id="ext-gen161" class="x-tabs-right" href="#">
<span class="x-tabs-left">
<em id="ext-gen162" class="x-tabs-inner" style="width: 29px;">
<span id="ext-gen163" class="x-tabs-text" title="Basic" unselectable="on" style="width: 29px;">Basic</span>
</em>
</span>
</a>
</td>
<td id="ext-gen171" style="width: 64px;">
</td>
<td id="ext-gen178" style="width: 69px;">
</td>
<td id="ext-gen185" style="width: 73px;">
</td>
<td id="ext-gen192" style="width: 75px;">
</td>
<td id="ext-gen199" style="width: 64px;">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tab-body158" class="x-tabs-body" style="position: relative; height: 303px;">
<div id="ext-gen195" class="x-dlg-tab portrait x-tabs-item-body" title="" style="display: block; visibility: hidden; position: absolute; left: -20000px; top: -20000px;">
<form id="ydlg-form-portrait" name="portrait" method="post" action="profile.action?type=U&action=saveBasic">
<div id="portrait-inner-tab" class="inner-tab">
<h4>Upload Picture</h4>
<small>You can upload a JPG, GIF or PNG file.</small>
<input id="por-edit-file" class="input-file" type="file" value="" size="30" name="pic"/>
<p>
</p>
<h4>Remove Picture</h4>
<small>You can remove this picture, but be sure to upload another or we will display a question mark in its place.</small>
<br/>
<input id="por-edit-remove" class="input-btn" type="button" value="Remove Picture"/>
<table class="editor portrait" cellspacing="0" border="0">
<tbody>
</tbody>
</table>
</div>
</form>
</div>
<div id="ext-gen188" class="x-dlg-tab education x-tabs-item-body" title="" style="display: block; visibility: hidden; position: absolute; left: -20000px; top: -20000px;">
</div>
<div id="ext-gen181" class="x-dlg-tab company x-tabs-item-body" title="" style="display: block; visibility: hidden; position: absolute; left: -20000px; top: -20000px;">
</div>
<div id="ext-gen174" class="x-dlg-tab insitution x-tabs-item-body" title="" style="display: block; visibility: hidden; position: absolute; left: -20000px; top: -20000px;">
</div>
<div id="ext-gen167" class="x-dlg-tab contact x-tabs-item-body" title="" style="display: block; visibility: hidden; position: absolute; left: -20000px; top: -20000px;">
</div>
<div id="ext-gen160" class="x-dlg-tab basic x-tabs-item-body" title="" style="display: block; visibility: visible; position: relative;">
</div>
</div>
</div>
<div id="ext-gen204" class="x-dlg-ft">
<div class="x-dlg-btns x-dlg-btns-right">
<table cellspacing="0">
<tbody>
<tr>
<td id="ext-gen205">
<table id="ext-gen206" class="x-btn-wrap x-btn" cellspacing="0" cellpadding="0" border="0" style="width: 75px;">
<tbody>
<tr>
<td class="x-btn-left">
<i/>
</td>
<td class="x-btn-center">
<em>
<button id="ext-gen208" class="x-btn-text">Save</button>
</em>
</td>
<td class="x-btn-right">
<i/>
</td>
</tr>
</tbody>
</table>
</td>
<td id="ext-gen215">
</td>
</tr>
</tbody>
</table>
<div class="x-clear"/>
</div>
</div>
</div>

nothing in here has the class 'tab-content' or 'anything.tab-content'. can you please clarify?

Otherwise, it might be simpler if there is a way for me to override the ids that tabPanel creates for the tabs, so that they aren't randomly generated. Is this possible?

thanks

Animal
7 May 2007, 11:24 PM
Ah, yes, I was reading the HTML tab in Firebug and got the wrong class to hang my query off. In fact the class name that's applied to TabPanelItam bodies is "x-tabs-item-body". So the function should be



Ext.override(Ext.TabPanel, {
selectTab: function(selector) {
return this.getTab(Ext.DomQuery.selectNode("#" + tabs.el.id + " " + selector + ".x-tabs-item-body").id);
}
});

So, then you'd be abl;e to do



var portraitTab = myTabPanel.selectTab(".portrait");


And the DomQuery would be



Ext.DomQuery.selectNode("#" + myTabPanel.tabs.el.id + " .portrait.x-tabs-item-body")


Which would select the child element of the TabPanel which had the class "portrait" and the class "x-tabs-item-body". So the function gets its id, and uses that in getTab()

I never realised just how useful a DOM querying tool wouild be before I started using Ext seriously.