PDA

View Full Version : [CLOSED] TabPanel.Add Re-form Failed



cleve
Jul 26, 2012, 6:14 AM
Hi guys,
I got a problem when adjusting tabpanel config using JS.



<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body id="theBody">
<form id="form1" runat="server">
<ext:ResourceManager ID="theManager" runat="server"
IDMode="Static"
Theme="Default"
ShowWarningOnAjaxFailure="false"
ScriptMode="Debug" />
<ext:Panel runat="server" ID="p1" Title="Tab1" Hidden="true">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="B1" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
<ext:Panel runat="server" ID="p2" Title="Tab1" Hidden="true">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="B2" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:TabPanel runat="server" ID="tp" Width="300" Height="400">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="AAAA">
<Listeners>
<Click Handler="testFunc();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:FormPanel runat="server" ID="p0" Title="Tab0">
<Items>
<ext:TextField runat="server" FieldLabel="T" />
</Items>
</ext:FormPanel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
<script type="text/javascript" language="javascript">


var testFunc = function () {


var tp = <%= tp.ClientID %>;
var p1 = <%= p1.ClientID %>;
var p2 = <%= p2.ClientID %>;


p1.show();
p2.show();


// adjust tab panel
tp.add(p1);
tp.add(p2);
tp.doLayout();


}

</script>
</form>
</body>
</html>


p1 and p2 are initially hidden and will fit into tabpanel (tp).
Clicking "AAAA" triggers "TestFunc" to add panels as some tabs in tp. Everything's fine. Tab1 and Tab2 show.
BUT, when putting focus on TextField and press "Tab" to shift focus to next control, view leaks (see the attached image for detail).

Daniil
Jul 26, 2012, 10:56 AM
Hi,

I think to get it working well a new added tab should be activated.

The following appears to be working well.

Example

var testFunc = function () {
var tp = <%= tp.ClientID %>,
p1 = <%= p1.ClientID %>,
p2 = <%= p2.ClientID %>;

p1.show();
p2.show();

tp.add(p1);
tp.setActiveTab(p1);
tp.add(p2);
tp.setActiveTab(p2);

tp.setActiveTab(0);
};

Vladimir
Jul 26, 2012, 11:36 AM
I suggest the following solution

- place panels to Bin of TabPanel
- remove Hidden properties



<%@ Page Language="C#" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body id="theBody">
<form id="form1" runat="server">
<ext:ResourceManager ID="theManager" runat="server" IDMode="Static" Theme="Default"
ShowWarningOnAjaxFailure="false" ScriptMode="Debug" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:TabPanel runat="server" ID="tp" Width="300" Height="400">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="AAAA">
<Listeners>
<Click Handler="testFunc();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Bin>
<ext:Panel runat="server" ID="p1" Title="Tab1">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="B1" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
<ext:Panel runat="server" ID="p2" Title="Tab2">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="B2" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</Bin>
<Items>
<ext:FormPanel runat="server" ID="p0" Title="Tab0">
<Items>
<ext:TextField runat="server" FieldLabel="T" />
</Items>
</ext:FormPanel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
<script type="text/javascript" language="javascript">


var testFunc = function () {
var tp = <%= tp.ClientID %>;
var p1 = <%= p1.ClientID %>;
var p2 = <%= p2.ClientID %>;

tp.add([p1, p2]);
}

</script>
</form>
</body>
</html>