Refreshing tab's store changes page layout

**EnZo** · Jun 21, 2013, 9:27 AM

Hello,

I have two tabs placed inside a container page. The first tab has a grid where it takes its data from a store, and the second tab is a form that feeds this store. Whenever data is modified in the second tab, the first tab's store is automatically refreshed. However, any attempt to refresh the store or the grid in the first tab changes the page's layout (All buttons and columns disappear. Everything goes except for the rows in the grid).

Any help on how to restore the original page's layout would be much appreciated.

Regards,
EnZo

**Daniil** · Jun 25, 2013, 7:00 AM

Hi @EnZo,

Welcome to the Ext.NET forums!

Please provide a test case to reproduce the problem.

**EnZo** · Jun 25, 2013, 10:20 AM

Hi @Daniil,

Please see the following screenshots:

This is the original grid:

Click image for larger version.

Name: 1.PNG
Views: 17
Size: 16.9 KB
ID: 6446

This is the edit tab where on saving the grid from the previous tab refreshes

Click image for larger version.

Name: 2.PNG
Views: 15
Size: 16.5 KB
ID: 6447

This is the grid after refresh

Click image for larger version.

Name: 3.PNG
Views: 14
Size: 9.3 KB
ID: 6448

I am accessing the tab's refresh function through

parent.mainContent_panelGroupProfile_IFrame.App.direct.RefreshGrid();

**Daniil** · Jun 26, 2013, 4:50 AM

Thank you for the screenshots. I see the Buttons actually disappear.

Setting up HideMode="Offsets" for tabs can help.

**EnZo** · Jun 26, 2013, 6:51 AM

Thank you for your time Daniil.

Unfortunately HideMode="Offsets" has no effect, and neither does DefferredRender.

However I have noticed that the buttons and columns are not exactly 100% hidden, as they are still there except they are reduced to a very small size. There is a very small space between the grid and the tab title, and in this space is the columns. If I find the column and click on this small space to sort the column, everything goes back to normal.

**Daniil** · Jun 28, 2013, 6:17 AM

Then this gets actual.

Originally Posted by Daniil

Please provide a test case to reproduce the problem.

**EnZo** · Jun 28, 2013, 9:44 AM

Thank you for your time. I tried to simplify my code as much as possible. Please find the code below.

container.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="container.aspx.cs"%>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:content id="groupProfileHeadContent" contentplaceholderid="headContent" runat="server">
    <script type="text/javascript">

       var tabPanel;
       var panelToRefresh;

       function fillGlobalVariables()
       {
        tabPanel = <%=tabPanelGroupProfile.ClientID%>;
        panelToRefresh = <%=panelGroupProfile.ClientID%>;
       }
    </script>
</asp:content>
<asp:content id="groupProfileMainContent" contentplaceholderid="mainContent" runat="server">
    <ext:TabPanel ID="tabPanelGroupProfile" Width="960" runat="server" Height="599" Padding="1"
        DeferredRender="false" HideMode="Offsets">
        <Items>
            <ext:Panel ID="panelGroupProfile" runat="server" Height="200">
                <Loader ID="loaderGroupProfile" Mode="Frame" runat="server">
                    <LoadMask ShowMask="true">
                    </LoadMask>
                </Loader>
                <Listeners>
                    <AfterRender Handler="fillGlobalVariables();" />
                </Listeners>
            </ext:Panel>
        </Items>
    </ext:TabPanel>
</asp:content>

container.cs:

    public partial class container : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                panelGroupProfile.Loader.Url = "grid.aspx";
                panelGroupProfile.Loader.LoadMask.Msg = "Loading grid...";
                panelGroupProfile.Title = "Grid";
            }
            catch (Exception ex)
            {

            }
        }
    }

grid.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="grid.aspx.cs"%>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="JScript1.js" type="text/javascript"></script>
</head>
<body>
    <ext:ResourceManager runat="server" ID="rmGroup">
    </ext:ResourceManager>
    <form id="frmGroup" runat="server">
    <ext:Store ID="storeGroup" runat="server" PageSize="15" AutoLoad="true">
        <Model>
            <ext:Model ID="modelGroup" runat="server" IDProperty="getId">
                <Fields>
                    <ext:ModelField Name="getId" Type="Int" />
                    <ext:ModelField Name="getName" Type="String" />
                    <ext:ModelField Name="getCompaniesName" Type="String" />
                </Fields>
            </ext:Model>
        </Model>
    </ext:Store>
    <ext:FormPanel Height="570" ID="frmPanelGlobal" runat="server">
        <Items>
            <ext:GridPanel Icon="ApplicationViewColumns" Height="570" AutoWidth="true" ButtonAlign="Right"
                ID="gridPanelGroup" runat="server" StripeRows="true" TrackMouseOver="true" Title="Groups"
                StoreID="storeGroup">
                <TopBar>
                    <ext:Toolbar runat="server" ID="topBar">
                        <Items>
                            <ext:Button runat="server" ID="btnAdd" Text="Add group" Icon="Add">
                                <Listeners>
                                    <Click Handler="parent.addTab('panelSubGroup', 'form.aspx','Add Group');" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <ColumnModel ID="clnModelGroup" runat="server">
                    <Columns>
                        <ext:Column ID="clnGroupId" runat="server" Hidden="true" DataIndex="getId" Hideable="false" />
                        <ext:Column ID="clName" Header="Group name" DataIndex="getName" runat="server" Width="250">
                        </ext:Column>
                        <ext:Column ID="clCompaniesName" Flex="1" Header="Companies" DataIndex="getCompaniesName"
                            runat="server">
                        </ext:Column>
                        <ext:CommandColumn Resizable="false" Width="30" runat="server" ID="clnEdit">
                            <Commands>
                                <ext:GridCommand ToolTip-Text="Edit" CommandName="cmdEdit" Icon="ApplicationEdit">
                                </ext:GridCommand>
                            </Commands>
                            <Listeners>
                                <Command Fn="commandHandler">
                                </Command>
                            </Listeners>
                            <HeaderItems>
                                <ext:Button ID="clearFilterButton" runat="server" Icon="Cancel">
                                </ext:Button>
                            </HeaderItems>
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="rowSelectionModel" Mode="Single" runat="server" />
                </SelectionModel>
            </ext:GridPanel>
        </Items>
    </ext:FormPanel>
    </form>
</body>
</html>

grid.cs:

public partial class grid : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            List<object> groupList = null;

            try
            {
                //fill groupList with data from database
                this.storeGroup.DataSource = groupList;
                this.storeGroup.DataBind();
            }
            catch (Exception ex)
            {

            }
        }

        [DirectMethod]
        public void RefreshGrid()
        {
            List<object> groupList = null;

            try
            {

                //fill groupList with data from database
                this.storeGroup.DataSource = groupList;
                this.storeGroup.DataBind();
            }
            catch (Exception ex)
            {

            }
        }
    }

form.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="form.aspx.cs"%>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="JScript1.js" type="text/javascript"></script>
</head>
<body>
    <ext:ResourceManager runat="server" ID="rmSubSubGroupProfileForm">
    </ext:ResourceManager>
    <ext:Store ID="storeGroupParent" runat="server">
        <Model>
            <ext:Model ID="modelGroupParent" runat="server">
                <Fields>
                    <ext:ModelField Name="getId" Type="Int" />
                    <ext:ModelField Name="getName" Type="String" />
                </Fields>
            </ext:Model>
        </Model>
    </ext:Store>
    <ext:Store ID="storeCompany" runat="server" PageSize="15">
        <Model>
            <ext:Model ID="modelCompany" runat="server" IDProperty="getId">
                <Fields>
                    <ext:ModelField Name="getId" Type="Int" />
                    <ext:ModelField Name="getName" Type="String" />
                </Fields>
            </ext:Model>
        </Model>
    </ext:Store>
    <form id="frmSubGroupProfileForm" runat="server">
    <ext:FormPanel runat="server" Border="false" ID="frmPanelGlobal">
        <Items>
            <ext:Container runat="server"
                ID="ctnName" ColSpan="2" Layout="ColumnLayout">
                <Items>
                    <ext:ComboBox runat="server" ID="cmbParentGroup" Width="300" FieldLabel="Group to edit"
                        LabelAlign="Right" LabelSeparator=" " AllowBlank="true" DisplayField="getName"
                        ValueField="getId" StoreID="storeGroupParent" Hidden="false">
                    </ext:ComboBox>
                    <ext:TextField runat="server" ID="txtSubGroupName" Width="350" LabelWidth="150" FieldLabel="Group name<font color='red'>*</font>"
                        LabelAlign="right" LabelSeparator=" " MaxLength="50" Hidden="true" AllowBlank="false">
                    </ext:TextField>
                </Items>
            </ext:Container>
            <ext:GridPanel Icon="ApplicationViewColumns" Height="350" ButtonAlign="Right" ID="gridPanelAffiliateCompany"
                runat="server" StripeRows="true" TrackMouseOver="true" Title="Company" StoreID="storeCompany">
                <ColumnModel ID="clnModelAffiliateCompany" runat="server">
                    <Columns>
                        <ext:Column ID="clnId" runat="server" Hidden="true" DataIndex="getId" Hideable="false" />
                        <ext:Column ID="clName" Header="Name" DataIndex="getName" runat="server" Flex="1">
                        </ext:Column>
                        <ext:Column Resizable="false" Width="30" runat="server" Hideable="false" ID="clnCancel">
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="rowSelectionModel" Mode="Simple" runat="server" />
                </SelectionModel>
            </ext:GridPanel>
        </Items>
        <Buttons>
            <ext:Button runat="server" ID="btnSaveChanges" Hidden="true" Text="Save"
                Icon="Accept">
                <Listeners>
                    <Click Handler="EditGroup();">
                    </Click>
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:FormPanel>
    </form>
</body>
</html>

form.cs:

 public partial class form : System.Web.UI.Page
    {

        protected void Page_Load(object sender, EventArgs e)
        {
            List<object> companyList = null;
            List<object> groupList = null;

            try
            {
                //fill comapnyList from database
                //fill groupList from databse

                this.storeGroupParent.DataSource = groupList;
                this.storeGroupParent.DataBind();

                this.storeCompany.DataSource = companyList;
                this.storeCompany.DataBind();
            }
            catch (Exception ex)
            {

            }
        }

        [DirectMethod]
        public void EditSubGroup()
        {
            //edit sub group and save to database
        }
    }

JScript1.js:

var addTab = function (tabId, url, title, id1, id2, id3) {
    var panel;

    panel = tabPanel.add({
        id: tabId,
        title: title,
        closable: true,

        loader: {
            url: url,
            renderer: "frame",
            loadMask: {
                showMask: true,
                msg: "Loading " + title
            },
            scripts: true,
            params: {
                "id1": id1,
                "id2": id2,
                "id3": id3
            }
        }
    });
    tabPanel.setActiveTab(panel);
};

function commandHandler(grid, cmdName, record) {
    switch (cmdName) {
        case 'cmdEdit':
            parent.addTab('panelSubGroup', 'form.aspx', 'Edit Group', null, null, record.data.getId);
            break;
    }

}


function EditGroup() {
    if (App.frmPanelGlobal.isValid()) {
        if (App.gridPanelAffiliateCompany.getSelectionModel().hasSelection()) {
            App.direct.EditSubGroup({ success: function (result) {
                App.frmPanelGlobal.getForm().reset();
                parent.mainContent_panelGroupProfile_IFrame.App.direct.RefreshGrid();
            }
            });
        }
    }
}

**Daniil** · Jun 28, 2013, 12:49 PM

Thank you.

Is a master page required? If no, please eliminate the dependence. If yes, please provide a master page.

Please simplify a sample as much as you can.
How to prepare a sample

For example, this looks as a candidate to remove at all.

protected void Page_Load(object sender, EventArgs e)
{
    List<object> groupList = null;

    try
    {
        //fill groupList with data from database
        this.storeGroup.DataSource = groupList;
        this.storeGroup.DataBind();
    }
    catch (Exception ex)
    {

    }
}

[DirectMethod]
public void RefreshGrid()
{
    List<object> groupList = null;

    try
    {

        //fill groupList with data from database
        this.storeGroup.DataSource = groupList;
        this.storeGroup.DataBind();
    }
    catch (Exception ex)
    {

    }
}

Also putting scripts direct to an ASPX page could allow to get a standalone page, which we can copy, paste and run without any changes. Please see Example (Very helpful) here:
Forum Guidelines For Posting New Topics

Thread: Refreshing tab's store changes page layout

Thread Tools

Search Thread

Display

Refreshing tab's store changes page layout

Similar Threads

[CLOSED] Refreshing A Particular Div With TaskManager - It Currently loads the whole page.

[CLOSED] How to update SelectBox with new data without refreshing page ?

[V0.8.2] Prevent page refreshing in tab panel

how to redirect to a current page after refreshing grid pannel?

how to redirect to a current page after refreshing grid pannel?

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: Refreshing tab's store changes page layout

Refreshing tab's store changes page layout

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us