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