PDA

View Full Version : Mobile 4.1.0: responsive layout change



unicorn64
Apr 04, 2017, 8:08 AM
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()
)
)




2489724898

fabricio.murta
Apr 06, 2017, 6:14 AM
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 (https://forums.ext.net/forumdisplay.php?12-Examples-and-Extras)
- User Extensions and Plug Ins (https://forums.ext.net/forumdisplay.php?11-User-Extensions-and-Plugins)

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)

unicorn64
Apr 06, 2017, 6:35 AM
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

fabricio.murta
Apr 06, 2017, 7:13 PM
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!