View Full Version : How to close ExtJS tab with Webbrowser C#

21 Jun 2013, 6:24 PM
Hello all!
I have been struggling for more than 3 weeks trying to find a way to close an ExtJS tab using the WebBrowser from C#, but no matter how much I try, the tab is not closing.

Here's the HTML code of the tab:

<div id="cwcCenterPanel" class=" x-tab-panel cwc-centerPanel x-border-panel" style="left: 228px; top: 35px; width: 1692px;">
<div class="x-tab-panel-header x-unselectable x-tab-panel-header-plain" id="ext-gen51" style="width: 1692px;">
<div class="x-tab-strip-wrap" id="ext-gen54" style="width: 1692px;">
<ul class="x-tab-strip x-tab-strip-top" id="ext-gen56">
<li class="" id="cwcCenterPanel__ext-comp-257809">
<li class="x-tab-strip-active x-tab-strip-closable" id="cwcCenterPanel__ext-comp-257775">
<a class="x-tab-strip-close" id="ext-gen59"/>
<a class="x-tab-right" href="#" id="ext-gen60">

The ID of the little "X" button to close the tab is ext-gen59, however, I cant seem to trigger a "click" event using that ID or cwcCenterPanel__ext-comp-257775.

This is the C# code im trying:

HtmlElementCollection tabs = webBrowser1.Document.GetElementById("cwcCenterPanel").GetElementsByTagName("li");//Gets all tabs open

foreach (HtmlElement elemtab in tabs)
if (elemtab.Document.GetElementById(elemtab.Id).GetAttribute("InnerText").Contains("Interaction:"))//Gets tabs containing an SD interaction

HtmlElementCollection tabs2 = elemtab.Document.GetElementById(elemtab.Id).GetElementsByTagName("a");//Gets the internal data of the tab, like the close button ID

foreach (HtmlElement elemtab2 in tabs2)





//Tabs are not getting closed with any of this codes. Here's where I need some code to close the tabs,


I would really appreciate if someone could point me in the right direction. This is the only thing I'm missing to complete this project.

Thanks a lot in advanced

23 Jun 2013, 9:49 PM
Can you grab a reference to the component using a componentQuery of some sort and issue a close() command on the component you're wanting to close?

tabPanel.down('[title="Interaction: SD17995983"]').close();

Or something like that.

23 Jun 2013, 10:38 PM
First of all, thanks for your response.

Im really new to ExtJS (actually, this is the first time I interact with it) so im not quite sure of how to implement your sugestion.

About "tabpanel.down", is "tabpanel" the way how it is always called? if not, is there a way to find out what the right name is?

I tried running this with no sucess:

webBrowser1.Document.InvokeScript("tabPanel.down('[title=\"Interaction: SD17995893\"]').close();")
webBrowser1.Document.InvokeMember("tabPanel.down('[title=\"Interaction: SD17995893\"]').close();")

Thanks a lot for taking the time to offer solutions, I do appreciate it.

Maybe this could give you an idea of what the right "tabpanel" name is (this code doesnt really makes sense to me), I found it on the webste HTML source:


24 Jun 2013, 11:34 AM
I already solved my problem, the script to close the ExtJS open tabs is:

top.cwc.getFrameworkWindow().startHeartBeat(); var t = top.cwc.getActiveTab(); if (t && t!=null) { top.cwc.closeTab(t); }

24 Jun 2013, 2:38 PM
Sorry, no 'tabpanel' in my example was just a shorthand of sort as if you'd already done something to get a reference to the tabpanel component you wished to interact with.

There will be a number of ways to get a reference to a component - often using some form of Ext.ComponentQuery (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ComponentQuery).query().

Is the tabpanel you're working with displayed standalone on the page or is it incorporated into an Ext.application and placed inside of another component/container (like a Viewport (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.container.Viewport))?