Problem with Tabs

  1. #1

    Problem with Tabs

    I have the following code and when i open the window the first tab show ok but the second tab dont. If i resize the window the content of tab are show how must on the window open. Any solution ???

    
    <style type="text/css">
        .label{
            width:200px;
            height:15px;
            text-align:center;
            padding: 5px 0;
            border:1px dotted #99bbe8;
            background:#002f67;
            color: #cada39;
            cursor:default;
            margin:10px;
            margin-left:0px;
            font-family:bold 11px TheSansCorrespondence;
        }
        .telefonica a span{ 
            color: #cada39;
            font-family:bold 11px TheSansCorrespondence;
        }
    </style>    
    
    <ext:Window ID="winUsuario" runat="server" Modal="true" Show&#111;nload="false" Height="540" Width="470" Title="Usuário" Icon= "User"  BodyStyle="padding:10px;background-color:#fff;">
            <Body>
            <ext:ContainerLayout ID="ContainerLayout2" runat="server">
            <ext:Panel ID="Panel6" runat="server" Border="false">
                <Body>
                <ext:FormLayout id="FormLayout9" runat="server" LabelWidth="120">
                    <ext:Anchor Horizontal="100%">
                    <ext:TextField id="txtNome" runat="server" ReadOnly="false" FieldLabel="Nome" AllowBlank="false" BlankText="Campo 'Nome' obrigatório." />
                    </ext:Anchor>
                    <ext:Anchor Horizontal="100%">
                    <ext:TextField id="txtLogin" runat="server" ReadOnly="false" FieldLabel="Login" AllowBlank="false" BlankText="Campo 'Login' obrigatório." />
                    </ext:Anchor>
                    <ext:Anchor Horizontal="100%">
                    <ext:TextField id="txtUsuarioTelefone" runat="server" ReadOnly="false" FieldLabel="Telefone" AllowBlank="true" />
                    </ext:Anchor>
                    <ext:Anchor Horizontal="100%">
                    <ext:TextField id="txtEMail" runat="server" ReadOnly="false" FieldLabel="E-Mail" AllowBlank="false" BlankText="Campo 'e-Mail' obrigatório." />
                    </ext:Anchor>
                    <ext:Anchor Horizontal="100%">
                    <ext:ComboBox id="cmbGrupo" runat="server" FieldLabel="Grupo" Editable="false" TypeAhead="true" Mode="Local" ForceSelection="true" TriggerAction="All" EmptyText="Selecione o Grupo..." Select&#111;nfocus="true" AllowBlank="false">
                        <AjaxEvents>
                        <Select OnEvent ="AtualizaPermissoes" />
                        </AjaxEvents>
                    </ext:ComboBox>
                    </ext:Anchor>
                </ext:FormLayout>
                </Body>
            </ext:Panel>
            <ext:TabPanel ID="TabPanel2" runat="server" ActiveTabIndex="0" Plain="true" AutoHeight="true" AutoWidth="true">
            <Tabs>
                <ext:Tab ID="Tab3" runat="server" Title="Menus" AutoHeight="true" AutoWidth="true" BodyStyle="padding:10px;">
                <Body>
                 <ext:TableLayout ID="TableLayout3" runat="server" Columns="2">
                    <ext:Cell>
                        <ext:Label ID="Label5" runat="server" Html="<div class='label'>Menus
    " />
                    </ext:Cell>
                    <ext:Cell>
                        <ext:Label ID="Label6" runat="server" Html="<div class='label'>Permissões
    " />
                    </ext:Cell>
                    <ext:Cell>
                        <ext:Panel ID="Panel7" runat="server" Border="false" AutoHeight="true" AutoWidth="true">
                            <Body>
                                <ext:MultiSelect ID="lstUsuarioMenus" runat="server" DragGroup="grp1" DropGroup="grp2,grp1" Width="200" Height="200" KeepSelection&#111;nclick="WithCtrlKey" StoreID="strUsuarioMenus" DisplayField="text" ValueField="value" />
                            </Body>
                        </ext:Panel>
                    </ext:Cell>
                    <ext:Cell>
                        <ext:Panel ID="Panel8" runat="server" Border="false" AutoHeight="true" AutoWidth="true">
                            <Body>
                                <ext:MultiSelect ID="lstPermissoesUsuarioMenu" runat="server" DragGroup="grp2" DropGroup="grp1,grp2" Width="200" Height="200" KeepSelection&#111;nclick="WithCtrlKey" StoreID="strPermissaoUsuarioMenu" DisplayField="text" ValueField="value" />
                            </Body>
                        </ext:Panel>
                    </ext:Cell>
                </ext:TableLayout>
                </body>
                </ext:Tab>
                <ext:Tab ID="Tab4" runat="server" Title="Clientes" AutoHeight="true" AutoWidth="true" BodyStyle="padding:10px;">
                <Body>
                 <ext:TableLayout ID="TableLayout4" runat="server" Columns="2">
                    <ext:Cell>
                        <ext:Label ID="Label7" runat="server" Html="<div class='label'>Clientes
    " />
                    </ext:Cell>
                    <ext:Cell>
                        <ext:Label ID="Label8" runat="server" Html="<div class='label'>Permissões
    " />
                    </ext:Cell>
                    <ext:Cell>
                        <ext:Panel ID="Panel9" runat="server" Border="false" AutoHeight="true" AutoWidth="true">
                            <Body>
                                <ext:MultiSelect ID="lstUsuarioClientes" runat="server" DragGroup="grp1" DropGroup="grp2,grp1" Width="200" Height="200" KeepSelection&#111;nclick="WithCtrlKey" StoreID="strUsuarioClientes" DisplayField="text" ValueField="value" />
                            </Body>
                        </ext:Panel>
                    </ext:Cell>
                    <ext:Cell>
                        <ext:Panel ID="Panel10" runat="server" Border="false" AutoHeight="true" AutoWidth="true">
                            <Body>
                                <ext:MultiSelect ID="lstPermissoesUsuarioCliente" runat="server" DragGroup="grp2" DropGroup="grp1,grp2" Width="200" Height="200" KeepSelection&#111;nclick="WithCtrlKey" StoreID="strPermissaoUsuarioCliente" DisplayField="text" ValueField="value" />
                            </Body>
                        </ext:Panel>
                    </ext:Cell>
                </ext:TableLayout>
                </body>
                </ext:Tab>
            </Tabs>
            </ext:TabPanel>
            </ext:ContainerLayout>
            </Body>
            <BottomBar>
                    <ext:StatusBar ID="stbUsuario" runat="server"></ext:StatusBar>            
            </BottomBar>        
            <Buttons>
                <ext:Button id="cmdUsuario" runat="server" Text="Salvar" Icon="Disk">
                   <ajaxevents>
                        <Click onevent="cmdUsuario_Click">
                            <ExtraParams>
                                <ext:Parameter Name="multi6" Value="Ext.encode(#{lstPermissoesUsuarioMenu}.getValues(true))" Mode="Raw" />
                                <ext:Parameter Name="multi8" Value="Ext.encode(#{lstPermissoesUsuarioCliente}.getValues(true))" Mode="Raw" />
                            </ExtraParams>
                        </Click>
                    </ajaxevents>
                </ext:Button>
             </Buttons>
           </ext:Window>
  2. #2

    RE: Problem with Tabs

    I find a solution to this problem:

    <Listeners>
        <Activate Handler="#{Tab4}.doLayout()" />
    </Listeners>
    Put this listener in the second tab and work fine... The controls are showing now.

  3. #3

    RE: Problem with Tabs

    Bur, now i have another problem, and the forst solution dont work....

    This time i am puting a gridpanl in the second tab. If i put the bottom bar in the grid it not appear, but if i remove it appear: Any idea about this ???

    
    <ext:Window id="winPlano" runat="server" Title="Plano de Ação" Icon="Report" Show&#111;nload="false" Modal="true" BodyStyle="padding:5px;background-color:#fff;" Width="600" Height="420" Center&#111;nload="true">
            <Body>
                    <ext:ContainerLayout ID="ContainerLayout3" runat="server">
                        <ext:Panel ID="Panel11" runat="server" Border="false">        
                            <Body>
                                <ext:FormLayout id="FormLayout5" runat="server" LabelWidth="75">
                                    <ext:Anchor Horizontal="100%">
                                    <ext:ComboBox id="cmbCliente" runat="server" FieldLabel="Cliente" TypeAhead="true" Mode="Local" ForceSelection="true" TriggerAction="All" EmptyText="Selecione o Cliente..." Select&#111;nfocus="true" />
                                    </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                    <ext:DateField runat="server" id="dtpInicioPlano"  Vtype="daterange" FieldLabel="Início" AllowBlank="false" BlankText="Campo 'Início' obrigatório." Format="dd/MM/yyyy" />
                                    </ext:Anchor>
                                    <ext:Anchor Horizontal="100%">
                                    <ext:DateField runat="server" id="dtpPrevisaoPlano"  Vtype="daterange" FieldLabel="Previsão" AllowBlank="false" BlankText="Campo 'Previsão' obrigatório." Format="dd/MM/yyyy" />
                                    </ext:Anchor>
                                </ext:FormLayout>
                            </Body>
                        </ext:Panel>
                        <ext:TabPanel runat="server" ActiveTabIndex="0" Plain="true" Height="230" LayoutOnTabChange="true">
                            <Tabs>
                                <ext:Tab ID="Tab5" runat="server" Title="Dados Gerais" Height="200" BodyStyle="padding:10px;">
                                    <Body>
                                        <ext:FormLayout ID="FormLayout11" runat="server" LabelWidth="95">                
                                            <ext:Anchor Horizontal="100%">
                                            <ext:TextField id="txtPlano" runat="server" ReadOnly="false" FieldLabel="Plano de Ação" AllowBlank="false" BlankText="Campo 'Plano de Ação' obrigatório." />
                                            </ext:Anchor>
                                            <ext:Anchor Horizontal="100%">
                                            <ext:TextArea ID="txtObjetivo" runat="server" ReadOnly="false" FieldLabel="Objetivo" AllowBlank="false" BlankText="Campo 'Objetivo' obrigatório."/>
                                            </ext:Anchor>
                                            <ext:Anchor Horizontal="100%">
                                            <ext:ComboBox id="cmbStatusPlano" runat="server" FieldLabel="Status" TypeAhead="true" Mode="Local" ForceSelection="true" TriggerAction="All" EmptyText="Selecione o Status..." Select&#111;nfocus="true"/>
                                            </ext:Anchor>
                                            <ext:Anchor Horizontal="100%">
                                            <ext:ComboBox id="cmbForum" runat="server" FieldLabel="Fórum" TypeAhead="true" Mode="Local" ForceSelection="true" TriggerAction="All" EmptyText="Selecione o Assunto..." Select&#111;nfocus="true"/>
                                            </ext:Anchor>
                                        </ext:FormLayout>
                                    </Body>
                                </ext:Tab>
                                <ext:Tab ID="Tab6" runat="server" Title="Tarefas" Plain="true" Height="200" BodyStyle="padding:0px;">
                                    <Body>
                                            <ext:GridPanel ID="GridPanel2" runat="server" Icon="Script" Title="Tarefas" StripeRows="false" BodyStyle="padding:0px;" Border="false">
                                            <TopBar>
                                              <ext:Toolbar ID="Toolbar2" runat="server">
                                              <Items>
                                              <ext:ToolbarButton Icon="Add" Text="Incluir">
                                               <AjaxEvents>
                                                <Click OnEvent="Incluir"></Click>
                                                </AjaxEvents>
                                              </ext:ToolbarButton>
                                              <ext:ToolbarSeparator></ext:ToolbarSeparator>
                                              <ext:ToolbarButton Icon="Delete" Text="Excluir">
                                               <AjaxEvents>
                                                <Click OnEvent="Excluir"></Click>
                                                </AjaxEvents>
                                              </ext:ToolbarButton>
                                              </Items>
                                              </ext:Toolbar>
                                              </TopBar>
                                              <SelectionModel>
                                                <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
                                              </SelectionModel>
                                               <loadmask showmask="true" />
                                            </ext:GridPanel>
                                    </Body>
                                </ext:Tab>
                            </Tabs>
                        </ext:TabPanel>
                    </ext:ContainerLayout>
                </body>
                <BottomBar>
                    <ext:StatusBar ID="stbPlano" runat="server"></ext:StatusBar>
                </BottomBar>
                <Buttons>
                    <ext:Button id="cmdPlanoTarefa" runat="server" Text="Tarefa" Icon="Script" Enabled="false">
                       <ajaxevents>
                           <Click onevent="cmdPlanoTarefa_Click">
                           <EventMask Msg="Abrindo..." ShowMask="true" />
                           </Click>
                        </ajaxevents>
                    </ext:Button>
                    <ext:Button id="cmdPlano" runat="server" Text="Salvar" Icon="Disk">
                       <ajaxevents>
                           <Click onevent="cmdPlano_Click">
                           <EventMask Msg="Salvando..." ShowMask="true" />
                           </Click>
                        </ajaxevents>
                    </ext:Button>
                 </Buttons>
            </ext:Window>

Similar Threads

  1. [CLOSED] Move tabs Tabs Style Google Chrome
    By majunior in forum 1.x Premium Help
    Replies: 7
    Last Post: Apr 30, 2013, 1:58 PM
  2. Add tabs to the tabpanel
    By Vaishali in forum 1.x Help
    Replies: 1
    Last Post: Oct 04, 2012, 12:23 PM
  3. TabPanel problem, little block in or above tabs
    By beklever in forum 1.x Help
    Replies: 2
    Last Post: Jan 06, 2011, 10:06 AM
  4. Replies: 2
    Last Post: Jul 21, 2010, 1:28 PM
  5. FormPanel problem in tabs with layout colums
    By fquintero in forum 1.x Help
    Replies: 10
    Last Post: Sep 08, 2009, 5:30 PM

Posting Permissions