Mobile 4.1.0: responsive layout change

  1. #1

    Mobile 4.1.0: responsive layout change

    Hi all,
    I'm not sure if there is a way to change layout according to responsive rules,
    i wrote some extension methods and override Ext.Container, i just want to share.
    if there is another way, please let me know,

      Ext.Container.override({
         config: {
             orient: null,
         },
         updateOrient: function (orient, oldOrient) {
             var me = this,
                 layout = me.getLayout();
             if (layout)
                 layout.updateOrient(orient, oldOrient);
         },
     });
     public static void BoxLayout(this ContainerBase container)
    {
        container.Layout = "box";
        container.LayoutConfig.Clear();
    }
    
    public static void BoxLayout(this ContainerBase container, BoxLayoutConfig config)
    {
        container.Layout = "box";
        if (config != null)
        {
            container.LayoutConfig.Clear();
            container.LayoutConfig.Add(config);
        }
    }
    
    public static void SetOrientation(this ContainerBase container, string orientation)
    {
        var c = container.CustomConfig.FirstOrDefault(cc => cc.Name == "orient");
        if (c == null)
        {
            c = new ConfigItem("orient", orientation);
            container.CustomConfig.Add(c);
        }
        else
        {
            c.Value = orientation;
        }
    }
    
    public static void Vertical(this ContainerBase container)
    {
        container.SetOrientation("vertical");
    }
    
    public static void Horizontal(this ContainerBase container)
    {
        container.SetOrientation("horizontal");
    }
    public static TBuilder BoxLayout<TAbstractContainer, TBuilder>(this ContainerBase.Builder<TAbstractContainer, TBuilder> builder)
         where TAbstractContainer : ContainerBase
         where TBuilder : ContainerBase.Builder<TAbstractContainer, TBuilder>
    {
        builder.ToComponent().BoxLayout();
         return builder as TBuilder;
    }
    
    public static TBuilder BoxLayout<TAbstractContainer, TBuilder>(this ContainerBase.Builder<TAbstractContainer, TBuilder> builder, BoxLayoutConfig config)
         where TAbstractContainer : ContainerBase
         where TBuilder : ContainerBase.Builder<TAbstractContainer, TBuilder>
    {
        builder.ToComponent().BoxLayout(config);
        return builder as TBuilder;
    }
    
    public static TBuilder SetOrientation<TAbstractContainer, TBuilder>(this ContainerBase.Builder<TAbstractContainer, TBuilder> builder, string orientation)
         where TAbstractContainer : ContainerBase
         where TBuilder : ContainerBase.Builder<TAbstractContainer, TBuilder>
    {
        builder.ToComponent().SetOrientation(orientation);
        return builder as TBuilder;
    }
    
    public static TBuilder Vertical<TAbstractContainer, TBuilder>(this ContainerBase.Builder<TAbstractContainer, TBuilder> builder)
         where TAbstractContainer : ContainerBase
         where TBuilder : ContainerBase.Builder<TAbstractContainer, TBuilder>
    {
        builder.ToComponent().Vertical();
        return builder as TBuilder;
    }
    
    public static TBuilder Horizontal<TAbstractContainer, TBuilder>(this ContainerBase.Builder<TAbstractContainer, TBuilder> builder)
         where TAbstractContainer : ContainerBase
         where TBuilder : ContainerBase.Builder<TAbstractContainer, TBuilder>
    {
        builder.ToComponent().Horizontal();
        return builder as TBuilder;
    }
    @(
      Html.X().Viewport()
      .Items(
              Html.X().Panel().ID("pnlXX").BoxLayout()
                .ResponsiveConfig(rules =>
                {
                    var r = new ResponsiveRule();
                    r.Rule = "tall";
                    r.Config.Add(
                        Html.X().Panel().Title("tall").Vertical()
                    );
                    rules.Add(r);
                    var r2 = new ResponsiveRule();
                    r2.Rule = "wide";
                    r2.Config.Add(
                        Html.X().Panel().Title("wide").Horizontal()
                    );
                    rules.Add(r2);
    
                })
              .Items(
                  Html.X().Panel().Html("1. part"),
                  Html.X().Panel().Html("2. part")
              )
       .FixResponsivePlugin()
      )
    )
    Click image for larger version. 

Name:	wide.png 
Views:	242 
Size:	2.4 KB 
ID:	24897Click image for larger version. 

Name:	tall.png 
Views:	111 
Size:	1.9 KB 
ID:	24898
  2. #2
    Hello @unicorn64!

    Interesting contribution! Thank you very much!

    You may consider publishing your solutions to the forums that would give them better visibility:
    - Examples and Extras
    - User Extensions and Plug Ins

    Of course, on those forums mentioning the version the example/extension was written for would help contextualize. Anyways your contribution is very welcome!

    (well, maybe important to note, any code posted here is effectively released under open domain license, although mentioning the forum thread and author would be just nice from who uses it)
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi @fabricio.murta,
    thanks for your reply, I actually post in here to ask if there is some other solution, and also share my solition.
    Could you move this topic to User Extensions and Plug Ins, maybe with editing to specify that it is related to mobile
  4. #4
    Hello, moved it to examples and extras and mentioned Mobile 4.1.0 in thread title.

    Simply changing layouts on responsiveConfig is not supported, so your solution seems to be the best for containers. For toolbars, there's the "dock" setting that can be changed when the aspect ratio changes, for contents, other approaches would be necessary. Yours
    just enables it to be done server-side without any javascript, which is very nice!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 9
    Last Post: Jan 14, 2017, 8:35 PM
  2. Responsive Web form with ext net
    By developerpr in forum 2.x Help
    Replies: 3
    Last Post: Dec 10, 2015, 1:12 PM
  3. [CLOSED] Change layout on responsive rule breaks layout
    By RCN in forum 3.x Legacy Premium Help
    Replies: 7
    Last Post: Feb 20, 2015, 12:39 PM
  4. [CLOSED] Fluid Layout for Desktop and Mobile
    By edip in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 23, 2013, 2:30 PM

Tags for this Thread

Posting Permissions