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

Name:	tall.png 
Views:	110 
Size:	1.9 KB 
ID:	24898