formpanel looses layout!!!

  1. #1

    formpanel looses layout!!!

    Hi,
    Happy New Year!
    I have the following code on my form. My form is multilangual page, it means that you can change the language from one language to another and read news in your selected language. But when I select 'English', the form loses its layout, displays a black page and when I select everything, it seems the page hasn't been rendered!

    
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceMain" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:ObjectDataSource ID="dsdatenews" runat="server" 
                OldValuesParameterFormatString="original_{0}" SelectMethod="DisplayNewsDateOnly" 
                TypeName="NewsBLL.NewsFeeder" 
                onselecting="dsdatenews_Selecting">
                <SelectParameters>
                    <asp:Parameter Name="categoryid" Type="Int32" />
                    <asp:Parameter Name="languageid" Type="Int32" />
                </SelectParameters>
            </asp:ObjectDataSource>
                <ext:Store ID="storedatenews" runat="server" DataSourceID="dsdatenews">
                    <Reader>
                        <ext:JsonReader ReaderID="Newsdate">
                            <Fields>
                                <ext:RecordField Name="Newsdate" Type="Date" ></ext:RecordField>
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel runat="server" ID="updeditnews1">
            <ContentTemplate>
                <asp:ObjectDataSource ID="dsnews" runat="server" 
                    OldValuesParameterFormatString="original_{0}" SelectMethod="DisplayNews" 
                    TypeName="NewsBLL.NewsFeeder" OnSelecting="dsnews_Selecting">
                    <SelectParameters>
                        <asp:Parameter Name="categoryid" Type="Int32" />
                        <asp:Parameter Name="languageid" Type="Int32" />
                        <asp:Parameter Name="newsdate" Type="DateTime" />
                    </SelectParameters>
                </asp:ObjectDataSource>
                <ext:Store ID="storenews" runat="server" DataSourceID="dsnews">
                    <Reader>
                        <ext:JsonReader ReaderID="newsid">
                            <Fields>
                                <ext:RecordField Name="newsid"></ext:RecordField>
                                <ext:RecordField Name="Title"></ext:RecordField>
                                <ext:RecordField Name="News"></ext:RecordField>
                                <ext:RecordField Name="Newsdate"></ext:RecordField>
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                    <Listeners>
                    <DataChanged Handler="var record = this.getAt(0) || {};#{frmnews}.getForm().loadRecord(record);" />
                    
                </Listeners>
                </ext:Store>             
            </ContentTemplate>
        </asp:UpdatePanel>
        <ext:ViewPort ID="ViewPort1" runat="server">
            <Body>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <East Collapsible="true" Split="true">
                        <ext:Panel ID="Panel2" runat="server" Title="East" Width="175">
                            <Body>
                                <ext:FitLayout ID="FitLayout1" runat="server">
                                    <ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Border="false" TabPosition="Bottom"
                                        Title="Title">
                                        <Tabs>
                                            <ext:Tab ID="Tab1" runat="server" Title="Tab 1">
                                                <Body>
                                                </Body>
                                            </ext:Tab>
                                            <ext:Tab ID="Tab2" runat="server" Title="Tab 2">
                                                <Body>
                                                </Body>
                                            </ext:Tab>
                                        </Tabs>
                                    </ext:TabPanel>
                                </ext:FitLayout>
                            </Body>
                        </ext:Panel>
                    </East>
                    <West Collapsible="false" Split="true" MinWidth="220" MaxWidth="220">
                        <ext:Panel ID="Panel4" runat="server" Title="Archive" Width="220" BodyBorder="false">
                            <Body>
                                <ext:FitLayout ID="FitLayout3" runat="server">
                                        <ext:GridPanel ID="griddate" runat="server" StoreID="storedatenews">
                                            <ColumnModel runat="server" ID="clmndate">
                                                <Columns>
                                                    <ext:RowNumbererColumn></ext:RowNumbererColumn>
                                                    <ext:Column ColumnID="newsdate" DataIndex="Newsdate" Header="Date" Width="170">
                                                    <Renderer Fn="Ext.util.Format.dateRenderer('d/m/Y')"  />
                                                    </ext:Column>
                                                </Columns>
                                            </ColumnModel>
                                            <View>
                                        <ext:GridView runat="server" ID="grdnote1"></ext:GridView>
                                    </View>
                                    <SelectionModel>
                                        <ext:RowSelectionModel ID="rowdatenews" runat="server" SingleSelect="true">
                                        <AjaxEvents>
                                        <RowSelect OnEvent="RowSelect" Buffer="250">
                                            <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="#{pnleditnews}" />
                                                    <ExtraParams>
                                                        <ext:Parameter Name="Newsdate" Value="this.getSelected().id" Mode="Raw" />
                                                    </ExtraParams>
                                                </RowSelect>
                                            </AjaxEvents>
                                            
                                        </ext:RowSelectionModel>
                                    </SelectionModel>
                                    <BottomBar>
                                        <ext:PagingToolbar runat="server" ID="pgegridtitle" StoreID="storedatenews" PageSize="21" PageIndex="1" DisplayInfo="false"></ext:PagingToolbar>
                                    </BottomBar>
                                    </ext:GridPanel> 
                            </ext:FitLayout>
                            
                            </Body>
                        </ext:Panel>
                    </West>
                    <Center>
                        <ext:Panel ID="pnleditnews" runat="server" Height="300" Title="Edit News">
                            <Body>
                                <ext:FitLayout ID="FitLayout2" runat="server">
                                    <ext:FormPanel ID="frmnews" runat="server" BodyStyle="padding:5px;" BodyBorder="false" ButtonAlign="Right"
                                        Frame="false">
                                        <Body>
                                            <ext:FormLayout ID="FormLayout1" runat="server">
                                                <ext:Anchor Horizontal="100%">
                                                    <ext:TextField ID="txttitle" runat="server" FieldLabel="Title" DataIndex="Title">
                                                    </ext:TextField>
                                                </ext:Anchor>
                                                <ext:Anchor Horizontal="40%">
                                                    <ext:TextField ID="txtdate" runat="server" FieldLabel="News Date" DataIndex="Newsdate"></ext:TextField>
                                                </ext:Anchor>
                                                <ext:Anchor Horizontal="100%" Vertical="70%">
                                                    <ext:HtmlEditor ID="txtnews" runat="server" DataIndex="News" FieldLabel="News">
                                                    </ext:HtmlEditor>
                                                </ext:Anchor>
                                                <ext:Anchor Horizontal="50%">
                                                    <ext:Checkbox ID="chkvisible" runat="server" BoxLabel="Visible" DataIndex="Visible" HideLabel="true"></ext:Checkbox>
                                                </ext:Anchor>
                                            </ext:FormLayout>
                                        </Body>
                                        <BottomBar>
                                            <ext:PagingToolBar ID="pagingnews" runat="server" PageSize="1" StoreID="storenews" />
                                        </BottomBar>
    
                                    </ext:FormPanel>
                                </ext:FitLayout>
                            </Body>
                        </ext:Panel>
                    </Center>
                </ext:BorderLayout>
            </Body>
        </ext:ViewPort>  
    </asp:Content>
    and the page which has black bacgound color is this:

    n
    
    \"news content displays here (I deleted the content).......</p>\r\n (I deleted the news content) \r\n(I deleted the news content) \r\n(I deleted the news content) \r\n(I deleted the news content) \r\n(I deleted the news content) \r\n<p class="cnnInline">(I deleted the news content) 
    Source:CNN</p>","Newsdate":"2010-01-05T00:00:00"},{"newsid":903,"Title":"(I deleted the news content) .\r\n(I deleted the news content) \r\n
    
    \"(I deleted the news content) .</p>\r\n(I deleted the news content)  \r\n<div style="" none\="" id="videoContainerexpand1" class="parentMediaContainer"> 
    \r\n<div style="" none\="" class="cnn_strylceclbtn"> 
    \r\n\r\n\r\n\r\n<div id="expand3" class="\&quot;cnn_strylftcntnt" cnn_strylftcexpbx\="">\r\n<div style="" none\="" class="cnn_strylceclbtn"> 
    \r\n<div style="" none\="" id="videoContainerexpand3" class="parentMediaContainer">\r\n<div id="videoContainerexpand3Media" class="mediaContainer">
    
    (I deleted the news content) \r\n
    
    (I deleted the news content) \r\n(I deleted the news content) \r\n
    
    ","Newsdate":"2010-01-05T00:00:00"},{"newsid":901,"Title":"(I deleted the news content) 
    
    (I deleted the news content) 
    
    ","Newsdate":"2010-01-05T00:00:00"}];this.ctl00_ContentPlaceMain_storenews=newCoolite.Ext.Store({id:"ctl00_ContentPlaceMain_storenews",ajaxEventConfig:{formProxyArg:"aspnetForm"},reader:newExt.data.JsonReader({fields:[{name:"newsid"},{name:"Title"},{name:"News"},{name:"Newsdate"}],id:"newsid"}),autoLoad:true,listeners:{datachanged:{fn:function(store){varrecord = this.getAt(0) ||{};ctl00_ContentPlaceMain_frmnews.getForm().loadRecord(record);}}}});ctl00_ContentPlaceMain_storenews.proxy=newExt.data.PagingMemoryProxy(ctl00_ContentPlaceMain_storenews_Data,false);this.ctl00_ContentPlaceMain_grdnote1=newExt.grid.GridView({proxyId:"ctl00_ContentPlaceMain_grdnote1"});this.ctl00_ContentPlaceMain_rowdatenews=newExt.grid.RowSelectionModel({ajaxEvents:{rowselect:{fn:function(el,rowIndex,record){varparams=arguments;Coolite.AjaxEvent.confirmRequest({buffer:250,eventMask:{showMask:true,customTarget:"ctl00_ContentPlaceMain_pnleditnews",target:"customtarget"},formProxyArg:"aspnetForm",extraParams:{"Newsdate":this.getSelected().id},control:this,action:'RowSelect'});},buffer:250}},proxyId:"ctl00_ContentPlaceMain_rowdatenews",singleSelect:true});this.ctl00_ContentPlaceMain_clmndate=newExt.grid.ColumnModel({proxyId:"ctl00_ContentPlaceMain_clmndate",columns:[newExt.grid.RowNumberer(),{width:170,sortable:true,renderer:Ext.util.Format.dateRenderer('d/m/Y'),header:"Date",dataIndex:"Newsdate",id:"newsdate"}]});newCoolite.Ext.Viewport({id:"ctl00_ContentPlaceMain_ViewPort1",renderTo:"aspnetForm",layout:"border",items:[{id:"ctl00_ContentPlaceMain_Panel2",split:true,region:"east",collapsible:true,width:175,layout:"coolitefit",items:{id:"ctl00_ContentPlaceMain_TabPanel1",xtype:"tabpanel",border:false,tabPosition:"bottom",items:[{id:"ctl00_ContentPlaceMain_Tab1",title:"Tab1",contentEl:"ctl00_ContentPlaceMain_Tab1_Body"},{id:"ctl00_ContentPlaceMain_Tab2",title:"Tab2",contentEl:"ctl00_ContentPlaceMain_Tab2_Body"}],activeTab:0},title:"East"},{id:"ctl00_ContentPlaceMain_Panel4",split:true,minWidth:220,maxWidth:220,region:"west",width:220,layout:"coolitefit",items:{id:"ctl00_ContentPlaceMain_griddate",xtype:"coolitegrid",bbar:newExt.PagingToolbar({id:"ctl00_ContentPlaceMain_pgegridtitle",xtype:"paging",store:ctl00_ContentPlaceMain_storedatenews,pageSize:21}),selectionMemory:false,view:this.ctl00_ContentPlaceMain_grdnote1,pbarID:"ctl00_ContentPlaceMain_pgegridtitle",store:ctl00_ContentPlaceMain_storedatenews,sm:this.ctl00_ContentPlaceMain_rowdatenews,cm:this.ctl00_ContentPlaceMain_clmndate},title:"Archive",border:false,bodyBorder:false},{id:"ctl00_ContentPlaceMain_pnleditnews",region:"center",height:300,layout:"coolitefit",items:{id:"ctl00_ContentPlaceMain_frmnews",xtype:"form",layout:"form",anchorSize:{isFormField:false},itemCls:"",items:[{id:"ctl00_ContentPlaceMain_txttitle",xtype:"textfield",fieldLabel:"Title",anchor:"100%",dataIndex:"Title"},{id:"ctl00_ContentPlaceMain_txtdate",xtype:"textfield",fieldLabel:"NewsDate",anchor:"40%",dataIndex:"Newsdate"},{id:"ctl00_ContentPlaceMain_txtnews",xtype:"htmleditor",fieldLabel:"News",anchor:"100%70%",dataIndex:"News"},{id:"ctl00_ContentPlaceMain_chkvisible",xtype:"checkbox",hideLabel:true,anchor:"50%",dataIndex:"Visible",inputValue:"ctl00_ContentPlaceMain_chkvisible",boxLabel:"Visible"}],border:false,bodyStyle:"padding:5px;",bodyBorder:false,bbar:newExt.PagingToolbar({id:"ctl00_ContentPlaceMain_pagingnews",xtype:"paging",store:ctl00_ContentPlaceMain_storenews,pageSize:1,displayInfo:true}),url:"/Admin/News/newsed.aspx?cat=1&amp;lid=2057",isInForm:true,buttonAlign:"right"},title:"EditNews"}]});Coolite.Ext.setValues([[ctl00_ContentPlaceMain_txttitle,""],[ctl00_ContentPlaceMain_txtdate,""]]);Coolite.Ext.initRefreshPagingToolbar(ctl00_ContentPlaceMain_griddate);ctl00_ContentPlaceMain_ViewPort1.doLayout();ctl00_ContentPlaceMain_TabPanel1.on("beforetabchange",function(el,newTab){this.getActiveTabField().setValue(el.items.indexOf(newTab));});ctl00_ContentPlaceMain_TabPanel1.doLayout();ctl00_ContentPlaceMain_pgegridtitle.on("change",function(el,data){this.getActivePageField().setValue(data.activePage);});ctl00_ContentPlaceMain_pagingnews.on("change",function(el,data){this.getActivePageField().setValue(data.activePage);});});Ext.QuickTips.init();Coolite.ScriptManager="ctl00$ScriptManager1";Ext.BLANK_IMAGE_URL="/extjs/resources/images/slate/s-gif/coolite.axd";//]]>
    Why this happens? It's very strange that it works if I select a different language. The datasource is the same.

    Can you help please?

    Kamal
  2. #2

    RE: formpanel looses layout!!!

    Does anyone know why my page loses its design? It's very annoying :-(
  3. #3

    RE: formpanel looses layout!!!

    Hi,

    Why did you place stores inside UpdatePanel? Store can be easly reloaded via javascript (just add OnRefreshData handler for the store)
    Store1.reload();

Similar Threads

  1. FormPanel + GridPanel Layout Incorrect
    By jonasscalar in forum 2.x Help
    Replies: 5
    Last Post: Mar 27, 2012, 3:04 PM
  2. Replies: 1
    Last Post: Mar 14, 2012, 6:39 PM
  3. FormPanel column layout Error in IE!
    By qq899817 in forum 1.x Help
    Replies: 2
    Last Post: Apr 13, 2011, 4:24 PM
  4. [CLOSED] What is wrong with Column Layout and FormPanel
    By turione in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 08, 2010, 3:46 PM
  5. FormPanel problem in tabs with layout colums
    By fquintero in forum 1.x Help
    Replies: 10
    Last Post: Sep 08, 2009, 4:30 PM

Posting Permissions