View Full Version : how to get button div Element of EXT.TAB of activated tab

14 Jan 2012, 5:35 AM
i am getting hard time to know how can i get outer button or div element of tab which enclosed tab title and close button as i need to apply frame effect on selected tab to the div containing title text and close button

this is div that extjs generate for tab title i need to apply effect around this div i dont how to get this div id

<div id="tab-1084" class="x-tab x-box-item x-tab-default x-top x-tab-top x-tab-default-top x-closable x-tab-closable x-tab-default-closable x-closable-top x-tab-closable-top x-tab-default-closable-top x-icon-text-left x-tab-icon-text-left x-tab-default-icon-text-left x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active" style="margin: 0pt; left: 179px; top: 0px;"><em class="" id="tab-1084-btnWrap"><button autocomplete="off" role="button" hidefocus="true" type="button" id="tab-1084-btnEl" class="x-tab-center"><span style="" class="x-tab-inner" id="tab-1084-btnInnerEl">
Tab1 test
</span><span class="x-tab-icon tabs" id="tab-1084-btnIconEl">&nbsp;</span></button></em><a title="Close Tab" href="#" class="x-tab-close-btn" id="ext-gen1131"></a></div>

i can get instance of activated tab using
var tab = tabs.child('panel[id='+key+ ']');
but how can i only get outer tab button as i need to apply frame effect on it i am able to apply on full div of tab element by
but i need it to apply to only top button anybody help is much appreciated


15 Jan 2012, 2:39 PM
If you can get the tab instance and the element under it, just do a down('button') on the element

16 Jan 2012, 4:39 AM
thank you so much mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens)
for your reply
i am using extjs 4.07
i get the instance of tab by var tab = tabs.child('tab[id=tablkey]');
but when i applied tab.down('button') or tab.getEL().down('button') on it it return null saying no such function exists. can you tell me how to get instance of tab to get its dom elements html and then manipulate them? as when i apply tab.innerHtml its return nothing and by tab.text it returns its text

but after trying so many things i made this work by tabs.child('tab[id=tablkey]').tab its returns button instance of tab i seen this tab property in example but where i can see all properties which child function returns for tab as i am interested to see innerhtml of tab . can you guide me exactly how can i do this


16 Jan 2012, 5:50 AM
did you do getEL or getEl?

16 Jan 2012, 7:28 AM
i am able to find button instance by tabs.child('tab[id=keyname ]').tab.getEl().down('button') but how can i get tab inner html i can get div html element by tabs.child('tab[id=keyname ]').tab.getEl().dom but how can i access and see html of this dom i tried .innerHtml or .html on .dom property and .down method but its returning undefined could you specifically guide me how can i see innerHtml of element if i get element by geEL method