[CLOSED] Problem with Gridpanel and Viewport on browser resize

  1. #1

    [CLOSED] Problem with Gridpanel and Viewport on browser resize

    Hi,
    I have a problem with this code:
     <ext:Viewport ID="Viewport1" runat="server" Layout="Fit">
            <Items>
                <ext:GridPanel ID="gpCitizens" runat="server" Width="600" AutoExpandColumn="FullName" >
                
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ColumnID="FullName" Header="FullName" Align="Left" DataIndex="FullName"
                                Sortable="false" Hideable="false">
                            </ext:Column>
                            <ext:Column ColumnID="HealthCardNumber" Header="HealthCardNumber" Align="Left" DataIndex="HealthCardNumber"
                                Hideable="false" Width="100">
                            </ext:Column>                       
                        </Columns>
                    </ColumnModel>
                    <Store>
                        <ext:Store ID="stCitizens" runat="server" AutoLoad="true">                      
                            <Reader>
                                <ext:JsonReader>
                                    <Fields>
                                        <ext:RecordField Name="IDCitizen" Type="Int" />
                                        <ext:RecordField Name="FullName" Type="String" />                                   
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
    Infact when I expand my browser, the grid expand it self to max, but when I reduce my browser the grid maintain it self size .
    Where I wrong?

    Thanks for support.
    Last edited by Daniil; May 10, 2011 at 11:56 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Not sure why you set Width="600" for grid, because Viewport's FitLayot ignores it.

    But it doesn't cause the issue.

    Here is my test case which works fine, in according to your requirement. So, please provide your test case.

    Please note that Viewport must be single top level container.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test11", "test12", "test13" },
                    new object[] { "test12", "test22", "test23" },
                    new object[] { "test13", "test32", "test33" }
                };
                store.DataBind();
            }
        }
    </script>
    
    <!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 runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="Fit">
            <Items>
                <ext:GridPanel 
                    ID="GridPanel1" 
                    runat="server" 
                    AutoExpandColumn="Column1">
                    <Store>
                        <ext:Store runat="server">
                            <Reader>
                                <ext:ArrayReader>
                                    <Fields>
                                        <ext:RecordField Name="test1" />
                                        <ext:RecordField Name="test2" />
                                        <ext:RecordField Name="test3" />
                                    </Fields>
                                </ext:ArrayReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column ColumnID="Column1" Header="Test1" DataIndex="test1" />
                            <ext:Column Header="Test2" DataIndex="test2" />
                            <ext:Column Header="Test3" DataIndex="test3" />
                        </Columns>
                    </ColumnModel>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  3. #3
    Hi,
    I used viewport control in a contentpage that has a masterpage above.

    I try to resolve with new masterpage that contains a viewport.
  4. #4
    Please see the example with MasterPage.

    MasterPage
    <%@ Master Language="C#" %>
     
    <%@ 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 runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server">
            <Content>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />            
            </Content>
        </ext:Viewport>
        </form>
    </body>
    </html>
    ContentPage
    <%@ Page Language="C#" MasterPageFile="~/Master.Master" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test11", "test12", "test13" },
                    new object[] { "test12", "test22", "test23" },
                    new object[] { "test13", "test32", "test33" }
                };
                store.DataBind();
            }
        }
    </script>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <ext:FitLayout runat="server">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" AutoExpandColumn="Column1">
                    <Store>
                        <ext:Store runat="server">
                            <Reader>
                                <ext:ArrayReader>
                                    <Fields>
                                        <ext:RecordField Name="test1" />
                                        <ext:RecordField Name="test2" />
                                        <ext:RecordField Name="test3" />
                                    </Fields>
                                </ext:ArrayReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column ColumnID="Column1" Header="Test1" DataIndex="test1" />
                            <ext:Column Header="Test2" DataIndex="test2" />
                            <ext:Column Header="Test3" DataIndex="test3" />
                        </Columns>
                    </ColumnModel>
                </ext:GridPanel>
            </Items>
        </ext:FitLayout>
    </asp:Content>
  5. #5
    Thanks you a lot. With yours example works fine.

Similar Threads

  1. GridPanel doesn't resize with browser
    By jimlahey in forum 1.x Help
    Replies: 1
    Last Post: Aug 18, 2011, 3:58 AM
  2. GridPanel resize problem
    By tiago in forum 1.x Help
    Replies: 2
    Last Post: Jul 20, 2011, 6:49 PM
  3. GridPanel resize problem
    By ozlemp in forum 1.x Help
    Replies: 3
    Last Post: May 26, 2011, 8:35 PM
  4. Gridpanel resize with browser window
    By DasPhansom in forum 1.x Help
    Replies: 3
    Last Post: Dec 22, 2008, 1:05 PM
  5. [CLOSED] wanting to get panel to resize with browser
    By pkellner in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Oct 15, 2008, 2:05 AM

Posting Permissions