PDA

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



xXxOlivierxXx
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.
44501

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)
{

elemtab2.Document.GetElementById(elemtab2.Id).InvokeMember("click");
elemtab2.Document.GetElementById(elemtab2.Id).InvokeMember("onClick");
//elemtab2.Document.GetElementById(elemtab2.Id).RaiseEvent("click");
elemtab2.Document.GetElementById(elemtab2.Id).RaiseEvent("onClick");

elemtab.Document.GetElementById(elemtab.Id).InvokeMember("click");
elemtab.Document.GetElementById(elemtab.Id).InvokeMember("onClick");
//elemtab.Document.GetElementById(elemtab.Id).RaiseEvent("click");
elemtab.Document.GetElementById(elemtab.Id).RaiseEvent("onClick");


elemtab2.RaiseEvent("OnClick");
//elemtab2.RaiseEvent("Click");
elemtab2.InvokeMember("Click");
elemtab2.InvokeMember("OnClick");


elemtab.RaiseEvent("OnClick");
//elemtab.RaiseEvent("Click");
elemtab.InvokeMember("Click");
elemtab.InvokeMember("OnClick");


//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

slemmon
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.

xXxOlivierxXx
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.

EDIT:
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:

44518

xXxOlivierxXx
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); }

slemmon
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))?