resizing gridpanel problem

[oseqat]

hi,
I have a problem when i apply full screen in my application, GridPanel grow, but not correctly, I set AutoWidth to true for the gridpanel, toolbar, and to pagingtoolbar, but i have this comportement (joint images).

[Daniil]

Hi,

To get proper resizing please don't use AutoWidth="true", it's just css "width:auto;".

Please use a respective layout managers.

[oseqat]

hi,
i have tested your require, but this is don't work, the result is already the same

[Daniil]

Well, I have to look at the example which reproduces the problem.

[oseqat]

<ext:GridPanel ID="GridPanel1" runat="server" Title="Saisie des besoins de production (dose)" Css="width:auto;"
    Frame="true" TrackMouseOver="true" StripeRows="True" Collapsible="True" Height="300" 
    FormGroup="True" ClicksToEdit="1" ColumnLines="True" AutoExpandColumn="Comment">
    <Store>
        <ext:Store ID="Store1" runat="server" RemoteSort="true" OnRefreshData="Store1_RefreshData">
            <Proxy>
                <ext:PageProxy />
            </Proxy>
            <AutoLoadParams>
                <ext:Parameter Name="start" Value="0" Mode="Raw" />
                <ext:Parameter Name="limit" Value="10" Mode="Raw" />
            </AutoLoadParams>
            <BaseParams>
                <ext:Parameter Name="sort" Value="" />
                <ext:Parameter Name="dir" Value="" />
            </BaseParams>
            <Reader>
            </Reader>
            <SortInfo Field="VarietyGroupName" Direction="ASC" />
            <Listeners>
                <LoadException Handler="var e = e || {message: response.responseText}; alert('Load failed: ' + e.message);" />
                <SaveException Handler="alert('Echec Sauvegarde');" />
                <CommitDone Handler="alert('Sauvegarde réussie');" />
                <CommitFailed Handler="alert('Commit failed\nReason: '+msg)" />
            </Listeners>
        </ext:Store>
    </Store>     
    <SelectionModel>
        <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server">
            <Listeners>
                <RowSelect Handler="#{btnDelete}.enable();" />
                <RowDeselect Handler="if (!#{GridPanel1}.hasSelection()) {#{btnDelete}.disable();}" />
            </Listeners>
        </ext:CheckboxSelectionModel>
    </SelectionModel>
    <TopBar>
        <ext:Toolbar ID="Toolbar1" runat="server" Css="width:auto;">
            <Items>
                <ext:Button ID="btnAffect" runat="server" Text="Affecter au bassin principal">
                    <Listeners>
                    </Listeners>
                </ext:Button>
                <ext:Button ID="btnAdd" runat="server" Text="Ajouter" Icon="BellAdd">
                    <Listeners>
                        <Click Handler="var rowIndex = #{GridPanel1}.addRecord(); #{GridPanel1}.getView().focusRow(rowIndex); #{GridPanel1}.startEditing(rowIndex, 0);" />
                        <%--<Click Handler="var rowIndex = #{GridPanel1}.insertRecord(0, {});#{GridPanel1}.getView().focusRow(0);#{GridPanel1}.startEditing(0, 0);" />--%>
                    </Listeners>
                </ext:Button>
                <ext:Button ID="btnDelete" runat="server" Text="Supprimer" Icon="BellDelete" Disabled="true">
                    <Listeners>
                        <Click Handler="#{GridPanel1}.deleteSelected();if (!#{GridPanel1}.hasSelection()) {#{btnDelete}.disable();}" />
                    </Listeners>
                </ext:Button>
            </Items>
        </ext:Toolbar>
    </TopBar>
    <BottomBar>
        <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" Css="width:auto;"/>
    </BottomBar>
    <LoadMask ShowMask="true" />
    <SaveMask ShowMask="true" />
    <Plugins>
        <ext:GridFilters runat="server" ID="GridFilters1">
            <Filters>
                <ext:StringFilter DataIndex="VarietyGroupName" />
                <ext:NumericFilter DataIndex="ProductionDoseNeeded" />
                <ext:NumericFilter DataIndex="OtherNeeds" />
                <ext:NumericFilter DataIndex="TotalNeeds" />
                <ext:NumericFilter DataIndex="TotalDoseAffected" />
                <ext:NumericFilter DataIndex="Ecart" />
                <ext:StringFilter DataIndex="Comment" />
            </Filters>
        </ext:GridFilters>
    </Plugins>
    <Listeners>
        <AfterEdit Handler="e.record.set('TotalNeeds', parseInt(e.record.data.ProductionDoseNeeded) + parseInt(e.record.data.OtherNeeds)); e.record.set('Ecart', e.record.data.TotalDoseAffected - (e.record.data.OtherNeeds + e.record.data.ProductionDoseNeeded));" />
    </Listeners>
</ext:GridPanel>

and in my code behind i'd have something like this :

        GridPanel1.Store[0].Reader.Add(jread);
        GridPanel1.ColumnLines = true;
        GridPanel1.BodyCssClass = "width:auto;";
        ....
          ColumnModel colMod = new ColumnModel();
        colMod.ID = "ColumnModel1";

        Column col = new Column();

        col.ColumnID = "GROUP_VAR";
        col.Width = 120;
        col.Header = "Groupe de variétés";
        col.DataIndex = "VarietyGroupName";
        col.Sortable = true;
        col.Editable = true;
        col.Css = "width:auto";

[Daniil]

Well, parent containers are important thing in this case.

Please provide a sample which we can copy/paste and run.

[oseqat]

<%@ 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();
        }

        string handler = @"if (command === 'delete') {
                              this.getStore().remove(record);
                          }";

        this.GridPanel1.Listeners.Command.Handler = handler;

    }
</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></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" Title="Saisie des besoins de production (dose)"
        Css="width:auto;" Frame="true" TrackMouseOver="true" StripeRows="True" Collapsible="True"
        Height="300" FormGroup="True" ClicksToEdit="1" ColumnLines="True">
        <Store>
            <ext:Store ID="Store1" 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 ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:Column Header="Test2" DataIndex="test2" />
                <ext:Column Header="Test3" DataIndex="test3" />
                <ext:CommandColumn Width="25" Header="+" Align="Center">
                    <Commands>
                        <ext:GridCommand CommandName="delete" Icon="Delete" />
                    </Commands>
                </ext:CommandColumn>
            </Columns>
        </ColumnModel>
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server" Css="width:auto;">
                <Items>
                    <ext:Button ID="btnAffect" runat="server" Text="Affecter au bassin principal">
                        <Listeners>
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="btnAdd" runat="server" Text="Ajouter" Icon="BellAdd">
                        <Listeners>
                            <Click Handler="var rowIndex = #{GridPanel1}.addRecord(); #{GridPanel1}.getView().focusRow(rowIndex); #{GridPanel1}.startEditing(rowIndex, 0);" />
                            
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="btnDelete" runat="server" Text="Supprimer" Icon="BellDelete" Disabled="true">
                        <Listeners>
                            <Click Handler="#{GridPanel1}.deleteSelected();if (!#{GridPanel1}.hasSelection()) {#{btnDelete}.disable();}" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <BottomBar>
            <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" Css="width:auto;" />
        </BottomBar>
        <LoadMask ShowMask="true" />
    </ext:GridPanel>
    <div>
    </div>
    </form>
</body>
</html>

[oseqat]

try to open it directly in a minimized window of a browser, then try to enlarge to see the behavior

[Daniil]

Thanks for the example.

Well, css "width: auto;" is not enough to manage resizing.

I told about a respective layout manager. For example, you can use Viewport + VBoxLayout.

<ext:Viewport runat="server" Layout="VBoxLayout">
    <LayoutConfig>
        <ext:VBoxLayoutConfig Align="Stretch" />
    </LayoutConfig>
    <Items>
        <ext:GridPanel ...>
            
        </ext:GridPanel>
    </Items>
</ext:Viewport>

[oseqat]

thanks a lot for your help, it's work ;)