The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

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:	5 
Size:	2.4 KB 
ID:	24897Click image for larger version. 

Name:	tall.png 
Views:	5 
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. Responsive extensions & bug fixes (Ext.NET Mobile 4.1.0)
    By unicorn64 in forum User Extensions and Plugins
    Replies: 0
    Last Post: Apr 06, 2017, 6:47 AM
  2. Replies: 9
    Last Post: Jan 14, 2017, 8:35 PM
  3. Responsive Web form with ext net
    By developerpr in forum 2.x Help
    Replies: 3
    Last Post: Dec 10, 2015, 1:12 PM
  4. Replies: 7
    Last Post: Feb 20, 2015, 12:39 PM
  5. [CLOSED] Fluid Layout for Desktop and Mobile
    By edip in forum 2.x Premium Help
    Replies: 6
    Last Post: Oct 23, 2013, 2:30 PM

Tags for this Thread

Posting Permissions