PDA

View Full Version : [CLOSED] FieldSet layout



NewLink
Oct 28, 2020, 12:54 PM
Hello support team,
I'm struggling to arrange the two fieldsets correctly. The intention is to create a layout where all components are aligned to the window when resized (are resized along with window):



@using Ext.Net;
@using Ext.Net.MVC;

@{
ViewBag.Title = "FieldSet Layout";
Layout = null;

var X = Html.X();
}

<!DOCTYPE html>

<html>
<head>
<title>Ext.NET MVC Test Case</title>
</head>

<body>
@(X.ResourceManager())

@X.DisplayField().ID("version").ReadOnly(true).Margin(10).Width(200)

@(X.Window().Width(700).Height(400).Layout(LayoutT ype.Fit)
.Items(
X.FormPanel()
.BodyPadding(10)
.LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
.Items(
X.FieldSet().Title("Account").Flex(1).WidthSpec("100%").Margin(0)
.FieldDefaults(f => f.LabelWidth = 130)
.Items(
X.TextField().WidthSpec("100%"),
X.Checkbox()
),
X.FieldSet().Title("Departments").Flex(1).WidthSpec("100%").MarginSpec("0 0 0 20")
.Layout(LayoutType.VBox)
.Items(
X.Checkbox().HideLabel(true).BoxLabel("Book to all departments"),
X.Container().HeightSpec("100%").WidthSpec("100%")
.LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
.Items(
X.GridPanel().Title("Allowed").Flex(1),
X.GridPanel().Title("Available").Flex(1).MarginSpec("0 0 0 10")
)
)
)
)
)

</body>
</html>

<script type="text/javascript">
Ext.onReady(function () {
Ext.getCmp("version").setValue("Ext JS " + Ext.getVersion().version + " / " + "Ext.NET " + Ext.net.Version);
});
</script>


My problem is that I am not able to align the bottom of the grid panels with the fieldset border and part of them goes out of the outline. Please can you help me with that?

Tested on Ext JS 7.1.0.46 / Ext.NET 5.1.0 and Chrome.

Thank you.

Kind regards
Dan

fabricio.murta
Oct 28, 2020, 9:06 PM
Hello, Dan!

Try to drop the .WidthSpec("100%") and favor the Flex setting (https://docs.sencha.com/extjs/7.2.0/classic/Ext.form.FieldSet.html#cfg-flex). If they don't "flex" the dimension you need with the layout you're using, try then the Anchor Layout (https://examples5.ext.net/#/Layout/AnchorLayout/Anchor_With_Form/) to nicely fit everything therein.

You may also want to consider checking the inner containers (panels, grid panels, and so on) for their minHeight (and minWidth) setting (https://docs.sencha.com/extjs/7.2.0/classic/Ext.panel.Panel.html#cfg-minHeight) for if the overall content space is smaller than that, clipping might occur.

Hope this helps! Let us know if these directions didn't help and we'll draw the answer as the reviewed test case you provided.

NewLink
Oct 28, 2020, 9:40 PM
Hello Fabrício,
thank you for your answer. I have already tried a lot of different combinations without success. Also with anchor layout:



@(X.Window().Width(700).Height(400).Layout(LayoutT ype.Fit)
.Items(
X.FormPanel()
.BodyPadding(10)
.LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
.Items(
X.FieldSet().Title("Account").Flex(1).WidthSpec("100%").Margin(0)
.Items(
X.TextField().WidthSpec("100%"),
X.Checkbox()
),
X.FieldSet().Title("Departments").Flex(1).WidthSpec("100%").MarginSpec("0 0 0 20")
.Layout(LayoutType.Anchor)
.Items(
X.Checkbox().HideLabel(true).BoxLabel("Book to all departments"),
X.Container().Anchor("100% 100%")
.LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
.Items(
X.GridPanel().Title("Allowed").Flex(1),
X.GridPanel().Title("Available").Flex(1).MarginSpec("0 0 0 10")
)
)
)
)
)


The problem is caused by the "Book to all departments" checkbox. Without that component, it works as expected. I'm pretty sure the solution will be quite simple, but somehow I'm lost in all the possible settings and I can't figure out the right layout. Your help will be highly appreciated.

Thank you.

Kind regards
Dan

fabricio.murta
Oct 29, 2020, 9:55 PM
Hello Dan!

It was pretty tricky to get how exactly the panel was being clipped out of the fieldset without giving it .Border(true).

As a general rule of thumb, when you nest containers and they don't behave right, you can add a temporary .StyleSpec("border: 1px solid red") (or any other color) to highlight the container's limits.

In your case, the problem was not with the grid panels, but with their surrounding container. .HeightSpec("100%") means 100% of the surrouding body container (fieldset's viewable area in that case). You add something that takes 15% height, then the second at 100% will have its bottom at 115% of the limit.

Again, avoid using .WidthSpec() or .HeightSpec(), they may work if only one component in the container, but are going to break in several situations Ext.NET has mechanisms to "make the math for you" to fit everything on screen.

The nesting of VBox and HBox containers with its Align = Stretch setting plus Flex is the right way to do it. In fact you were right on with the inner container and just missed applying the same technique to the outer fieldset.

Getting rid of any %-based width and heights and relying solely in Ext.NET layout system, this is how your page should look like. I added default theme borders to the grid panels (well, panels actually as there's no grid at all), and a "red thin border" to the wrapping container.

You may want to see how the container border's bottom side is hid in your original test case by just adding the border styling to the container.

Then setting the height to "80%" will reveal the border. That would still not do, as the checkbox height, as fixed, may mean 5% to a tall window, and 35% to a short one.



@(X.Window().Width(700).Height(400).Layout(LayoutT ype.Fit)
.Items(
X.FormPanel()
.BodyPadding(10)
.LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
.Items(
X.FieldSet().Title("Account").Flex(1).Margin(0)
.FieldDefaults(f => f.LabelWidth = 130)
.Items(
X.TextField(),
X.Checkbox()
),
X.FieldSet().Title("Departments").Flex(1).MarginSpec("0 0 0 20")
.LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Stretch })
.Items(
X.Checkbox().HideLabel(true).BoxLabel("Book to all departments"),
X.Container()
.StyleSpec("border:1px solid red").Flex(1)
.LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
.Items(
X.GridPanel().Border(true).Title("Allowed").Flex(1),
X.GridPanel().Border(true).Title("Available").Flex(1).MarginSpec("0 0 0 10")
)
)
)
)
)


I left the MarginSpec() in the second inner grid just because it does not change anything at all, you may want to remove that setting, it only matters for what's inside the grid and won't affect the test case.

Hope this helps!

NewLink
Oct 29, 2020, 11:34 PM
Hi Fabrício,
thank you for the explanation and the fixed test case. I apologize for a "newbie" question, but after a while of trying different variants, I no longer knew where to go.

Thank you for your help, the ticket can be closed.

Kind regards
Dan

fabricio.murta
Oct 29, 2020, 11:40 PM
Thanks for the feedback, and glad it helped!