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