Items in TabPanel not resizing when browser is resized

  1. #1

    Items in TabPanel not resizing when browser is resized

    I have a GridPanel loaded via component loader inside a tab panel. When the screen is resized, the gridPanel does not size itself to fit within the new dimensions of the screen. I've tried numerous variations on using Layout.Fit on some of the items, with no success.

    Main Viewport
    @(X.Viewport ( )
                .ID("MikeViewport")
                .Layout ( Ext.Net.LayoutType.Border )
                .Items (
                    
                    X.Panel ( )
                        .Region(Region.North)
                        .ID ( "Header" )
                        .Border(false)
                        .ContentFromPage ( this , "~/Views/Mike/Header.cshtml" )
                    ,
                                        
                    X.Panel ( )
                        .Region(Region.North)
                        .ID ( "WebAccessBar" )
                        .Margins("10 10 0 10")
                        .Border(false)
                        .ItemsFromAction ( "WebAccessBar" , "Mike" )
                    ,
                    
                    X.Panel()
                        .Collapsible(true)
                        .Collapsed(false)
                        .HideCollapseTool(true)
                        .Header(false)
                        .CollapseMode(CollapseMode.Mini)
                        .ID ( "MainContentContainer" )
                        .Region(Region.North)
                        .Margins("0 10 0 10")
                        .Border(false)
                        .Items(
                            X.Panel ( )
                               .Region(Region.North)
                               .ID ( "MainContentHtml" )
                               .Border(false)
                               .ContentFromPage ( this , "~/Views/Mike/MainContent.cshtml" )
                        )
                    ,
                    
                    X.Panel()
                        .Region(Region.North)
                        .ID ("MainButtons")
                        .Margins("10 10 10 10")
                        .Border(false)
                        .Items(
                            X.Button ( )
                            .Text("Add Service Order"),
                            X.Button ( )
                            .Text ( "Add Call" ),
                            X.Button ( )
                            .Text ( "Add Employee Schedule" ) 
                        )
                    ,
                        
                    X.Panel ( )
                        .ID ("MainFilterResults")
                        .Layout ( Ext.Net.LayoutType.Fit )
                        .Region(Region.Center)
                        .Margins("10 10 10 10")
                        .Border(false)
                        .Items( 
                        
                        
                        X.TabPanel ( )
                           
                           .ID("HomePageFilterResults")
                           .Items (panelitems =>
                           {
                               panelitems.Add (
                                   X.Panel ( )
                                       .ID ( "TabServiceOrder" )
                                       .Title ( "Service Order" )                            
                                       .Loader ( X.ComponentLoader ( )
                                           .Url ( Url.Action ( "newBrowserResults" ) )
                                           .Mode ( LoadMode.Frame )
                                           .Params ( new {  browserName = "Work_Order_Tech"  } )
                                           .LoadMask ( lm => lm.ShowMask = true )
                                       )
                               );
                               panelitems.Add (
                                    X.Panel ( )
                                       .Layout ( LayoutType.Fit )
                                       .ID ( "TabCallCenter" )
                                       .Title ( "Call Center" )
                                       .Loader ( X.ComponentLoader ( )
                                           .Url ( Url.Action ( "BrowserResult" ) )
                                           .Mode ( LoadMode.Frame )
                                           .TriggerEvent ( "show" )
                                           .Params ( new {  browserName = "Work_Order_Tech"  } )
                                           .LoadMask ( lm => lm.ShowMask = true )
                                       )
                               );
                           }                                  
                           )  
                      )                  
                )
           )
    loaded gridpanel ("BrowserResult")
    X.GridPanel ( )
        .Layout(LayoutType.Fit)
        .ID ( "gridpanelBrowserResults" )  
        .Store (
            X.Store ( )
            .RemotePaging ( false )
            .AutoLoad ( true )
            .PageSize ( 10 )
            .DataSource ( Model.BrowserResults )
            .Reader ( reader =>
                        reader.Add ( X.ODataReader ( ) )
                    )
            .Model (
                X.Model ( )
                .Fields ( fields =>
                    {
                        foreach ( DataColumn col in Model.BrowserResults.Columns )
                        {
                            fields.Add ( col.ColumnName , this.GetExtNetFieldType ( col.DataType ) );
                        }
                    }
                )
            )
        )            
        .ColumnModel ( cm =>
            {
                foreach ( nsNexBusDatSto.LinqToSql.FnSelectBrowserColumnsResult Col in Model.BrowserColumns )
                {
                    cm.Columns.Add ( X.Column ( ).Text ( Col.ColumnHeading ).DataIndex ( Col.Expression ).Flex ( 1 ) );
                }
    
            }
        )
        .SelectionModel (
            X.RowSelectionModel ( ).Mode ( SelectionMode.Multi )
        )
        .View ( X.GridView ( ).StripeRows ( true ) )
        .BottomBar (
            X.PagingToolbar ( )
                .Items (
                    X.Label ( "Page size:" ) ,
                    X.ToolbarSpacer ( 10 ) ,
                    X.ComboBox ( )
                        .ID("gridpanelComboBoxPaging")
                        .Width ( 80 )
                        .Items ( "1" , "2" , "10" , "20" )
                        .SelectedItems ( "10" )
                        .DirectEvents ( de =>
                            {
                                de.Select.Url = Url.Action ( "newGetBrowserResults" );
                                de.Select.Success = "onSuccess(App.gridpanelBrowserResults, result.data.BrowserResults);";
                                de.Select.Failure = "onFailure();";
                            }
                        )
                )
                .HideRefresh(true)
                .Plugins ( X.ProgressBarPager ( ) )
        )
    )
    Images
    Click image for larger version. 

Name:	Before.jpg 
Views:	15 
Size:	101.0 KB 
ID:	7076 Click image for larger version. 

Name:	after.jpg 
Views:	13 
Size:	98.5 KB 
ID:	7077
  2. #2
    First, why do you use Frame mode. It is very hard mode (high memory consumption, low performance). See the following sample
    http://mvc.ext.net/#/Dynamic_Partial_Rendering/Add_Tab/

    Second, if you use Frame mode then use Viewport inside loaded page
  3. #3
    Quote Originally Posted by Vladimir View Post
    First, why do you use Frame mode. It is very hard mode (high memory consumption, low performance). See the following sample
    http://mvc.ext.net/#/Dynamic_Partial_Rendering/Add_Tab/

    Second, if you use Frame mode then use Viewport inside loaded page
    Thanks Vladimir, I'll try both methods and see which works best and get back to this thread

Similar Threads

  1. Replies: 12
    Last Post: Apr 26, 2016, 10:39 PM
  2. [CLOSED] Resizing dynamic loaded items
    By thesvr in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Jul 24, 2013, 3:40 PM
  3. Replies: 8
    Last Post: Apr 03, 2013, 4:17 PM
  4. [CLOSED] ScrollBar TabPanel Resizing
    By critt in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 04, 2012, 11:59 AM
  5. Replies: 6
    Last Post: Jun 19, 2008, 5:17 PM

Posting Permissions