TabPanel, FileUpload, GridPanel

  1. #1

    TabPanel, FileUpload, GridPanel

    Whats the correct way to make controls work inside a Tabpanel. I have been trying to get this example working, i have searched on the forums but i cannot get it working, maybe theres something im missing. Here goes the code:

    Tabs.aspx
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" Theme="Gray">
        </ext:ScriptManager>
        <ext:Store ID="Store1"  runat="server" />
        <ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Height="600">
            <Tabs>
                <ext:Tab ID="Tab1" runat="server" Title="Tab1" Padding="6">
                </ext:Tab>
                <ext:Tab ID="Tab2" runat="server" Title="Tab2" HideMode="Offsets">
                     <AutoLoad Url="Webform2.aspx" />
                </ext:Tab>
                <ext:Tab ID="Tab3" runat="server" Title="Tab3" AutoHeight="true">
                    <AutoLoad Url="Coolite.aspx" />
                </ext:Tab>
            </Tabs>
        </ext:TabPanel>
    </asp:Content>
    Webform2.aspx
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" RenderScripts="None" RenderStyles="None">
        </ext:ScriptManager>
       <ext:FormPanel 
                ID="BasicForm" 
                runat="server"
                Width="500"
                Frame="true"
                Title="File Upload Form"
                AutoHeight="true"
                MonitorValid="true"
                BodyStyle="padding: 10px 10px 0 10px;">                
                <Defaults>
                    <ext:Parameter Name="anchor" Value="95%" Mode="Value" />
                    <ext:Parameter Name="allowBlank" Value="false" Mode="Raw" />
                    <ext:Parameter Name="msgTarget" Value="side" Mode="Value" />
                </Defaults>
                <Body>
                    <ext:FormLayout ID="FormLayout1" runat="server" LabelWidth="50">
                        <ext:Anchor>
                            <ext:FileUploadField 
                                ID="FileUploadField1" 
                                runat="server" 
                                EmptyText="Select an image"
                                FieldLabel="Photo"
                                ButtonText=""
                                Icon="ImageAdd">
                            </ext:FileUploadField>
                        </ext:Anchor>
                    </ext:FormLayout>
                </Body>
                <Listeners>
                    <ClientValidation Handler="#{SaveButton}.setDisabled(!valid);" />
                </Listeners>
                <Buttons>
                    <ext:Button ID="SaveButton" runat="server" Text="Save">
                        <AjaxEvents>
                            <Click 
                                OnEvent="UploadClick"
                                Before="if(!#{BasicForm}.getForm().isValid()) { return false; } 
                                    Ext.Msg.wait('Uploading your photo...', 'Uploading');"
                                    
                                Failure="Ext.Msg.show({ 
                                    title   : 'Error', 
                                    msg     : 'Error during uploading', 
                                    minWidth: 200, 
                                    modal   : true, 
                                    icon    : Ext.Msg.ERROR, 
                                    buttons : Ext.Msg.OK 
                                });">
                            </Click>
                        </AjaxEvents>
                    </ext:Button>
                    <ext:Button ID="Button1" runat="server" Text="Reset">
                        <Listeners>
                            <Click Handler="#{BasicForm}.getForm().reset();" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:FormPanel>
    </asp:Content>
    Coolite.aspx
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager2" runat="server" RenderScripts="None"  RenderStyles="None">
        </ext:ScriptManager>
        <ext:Store ID="Store1" runat="server" OnRefreshData="Store1_RefreshData" AutoLoad="true">
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="CED" />
                        <ext:RecordField Name="NOM" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <div>
            <ext:GridPanel 
            id="GridPanel1"
                runat="server" 
                StoreID="Store1" 
                Title="List1" 
                Width="600" 
                Height="320">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column Header="CED" Width="160" DataIndex="CED">
                        </ext:Column>
                        <ext:Column Header="NOM" Width="250" DataIndex="NOM">
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                </SelectionModel>
                <LoadMask ShowMask="true" />
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" StoreID="Store1" />
                </BottomBar>
    
            </ext:GridPanel>
        </div>
        </form>
    </body>
    Errors i get:
    - If I switch to tab3 and then tab2 when i try to upload a file i get Failure: Error during uploading... and doesnt enter UploadClick Event on Server.
    - Fileupload Rendering Problem.
    - Switching from tab2/Tab3 got this Error:
    Sys.InvalidOperationException: The PageRequestManager cannot be initialized more than once.


    Is there something im missing?

    Thanks
  2. #2
    Hi,

    Please set Mode="IFrame" for AutoLoad
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    Quote Originally Posted by vladimir View Post
    Hi,

    Please set Mode="IFrame" for AutoLoad
    Thanks for your response. I already found it. If i get any other thing i will try to get some help again.

Similar Threads

  1. Tabpanel and Gridpanel problem
    By Akpenob in forum 2.x Help
    Replies: 2
    Last Post: Aug 20, 2012, 9:30 AM
  2. [CLOSED] GridPanel + FileUpload
    By supera in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 04, 2012, 1:57 PM
  3. [CLOSED] [1.0] GridPanel in a TabPanel
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 12, 2010, 4:55 AM
  4. Finding GridPanel in a TabPanel
    By madhugumma in forum 1.x Help
    Replies: 0
    Last Post: Jul 22, 2009, 9:59 AM
  5. [FIXED] [V0.6] TabPanel and GridPanel
    By Timothy in forum Bugs
    Replies: 2
    Last Post: Sep 07, 2008, 12:42 PM

Posting Permissions