PDA

View Full Version : [CLOSED] Design with complex layout



matrixwebtech
Jun 12, 2014, 12:13 PM
Hi
Trying to design a form inside window (Screen shot attached) like attached image.

for that i write a sample code,but not success.



@X.ResourceManager()

@(X.Window()
.Height(300)
.Width(510)
.Resizable(false)
.ButtonAlign(Alignment.Left)

.BodyStyle("background-color:#FFFFFF")
.Items(
X.Panel()
.Height(50)
.Width(500)
.Region(Region.North)
,
X.Panel()
.BodyPadding(10)
.Width(500)


.Items(

X.FormPanel()
.AutoScroll(true)
.Layout(LayoutType.Fit)
.Border(false)
.Items(
X.Panel()
.Flex(1)
.Border(false)
.Layout(LayoutType.Anchor)

.DefaultAnchor("100%")

.Items(
X.TextField().FieldLabel("Alignment Test"),
X.Checkbox().BoxLabel("Dog").FieldLabel("Favorite Animals"),
X.Checkbox().BoxLabel("Cat"),
X.Checkbox().BoxLabel("Monkey").Checked(true)

),
X.FieldSet()
.Flex(1)
.Title("Individual Checkboxes")

.DefaultAnchor("100%")
.Defaults(X.Parameter().Name("HideEmptyLabel").Value("false").Mode(ParameterMode.Raw))
.Items(
X.TextField()
.FieldLabel("Textbox 1"),
X.TextField()
.FieldLabel("Textbox 1"),
X.TextField()
.FieldLabel("Textbox 1"),
X.TextField()
.FieldLabel("Textbox 1")
),
X.FieldSet()
.Flex(1)
.Title("Individual Checkboxes")

.DefaultAnchor("100%")
.Defaults(X.Parameter().Name("HideEmptyLabel").Value("false").Mode(ParameterMode.Raw))
.Items(
X.TextField()
.FieldLabel("Textbox 1"),
X.TextField()
.FieldLabel("Textbox 1"),
X.TextField()
.FieldLabel("Textbox 1"),
X.TextField()
.FieldLabel("Textbox 1")
),

X.FieldSet()
.Flex(1)
.Title("Individual Checkboxes")

.DefaultAnchor("100%")
.Defaults(X.Parameter().Name("HideEmptyLabel").Value("false").Mode(ParameterMode.Raw))
.Items(
X.TextField()
.FieldLabel("Textbox 1"),
X.TextField()
.FieldLabel("Textbox 1"),
X.TextField()
.FieldLabel("Textbox 1"),
X.TextField()
.FieldLabel("Textbox 1"),
X.TextField()
.FieldLabel("Textbox 1")
)



)
)
)
)

But not getting desired out put.can you please help?
Thanks in advance

Daniil
Jun 12, 2014, 2:45 PM
Hi @matrixwebtech,

Let's go step by step.

At first you need to create a Window with two rows inside. I would recommend a VBoxLayout.
http://examples2.ext.net/#/Layout/VBoxLayout/Rows/

matrixwebtech
Jun 12, 2014, 8:01 PM
Hi @matrixwebtech,

Let's go step by step.

At first you need to create a Window with two rows inside. I would recommend a VBoxLayout.
http://examples2.ext.net/#/Layout/VBoxLayout/Rows/


I write


@( X.Window()
.ID("Window1")
.Title("Add")
.Icon(Icon.Add)
.Height(290)
.Width(500)
.Layout(LayoutType.VBox)
.LayoutConfig(new VBoxLayoutConfig {Align=VBoxAlign.Stretch})
.BodyPadding(0)
.Modal(true)
.Resizable(false)


.Items
(
X.Panel()
.Height(80).Region(Region.South)
.Header(false).Border(false)

,

X.Panel()
.AutoScroll(true)
.Header(false).Border(false)

.Items
(
X.FormPanel()
.ID("f")

.BodyPadding(5)
.Border(false)

.AutoScroll(true)

.Items(


X.TextFieldFor(obj => obj.UOMName)
.ID("txtUOMName")
.FieldLabel("UOMName")
.AnchorHorizontal("100%")
.EmptyText("UOMName")
.AllowBlank(false)
,
X.TextFieldFor(obj => obj.UOMType)
.ID("txtUOMType")
.FieldLabel("UOMType")
.AnchorHorizontal("100%")
.EmptyText("UOMType")
.AllowBlank(false)
,
X.TextAreaFor(obj => obj.Description)
.ID("txtDescription")
.FieldLabel("Description")
.AnchorHorizontal("100%")
.EmptyText("Description")
.AllowBlank(false)
,

X.Hidden().ID("UOMCode").Value(0),

X.Button()
.Text("Save")
.ID("btnSave")
.DirectEvents(de =>
{
de.Click.Before = "return validation()";
de.Click.Action = "save";
de.Click.EventMask.ShowMask = true;
de.Click.EventMask.Msg = "Saving...";
de.Click.EventMask.MinDelay = 100;
de.Click.After = "App.GridPanel1.getStore().reload();";
})


)
)

these code but cant make design like the image i attach.in my code scroll and background color of form panel is not working,and button is not aligned right.

geoffrey.mcgill
Jun 12, 2014, 8:19 PM
The Button can go in the Buttons Collection of the Window.

Do you only have an image of that form?

matrixwebtech
Jun 12, 2014, 8:44 PM
yes,my client mail me this image and told me to make this and I don't have much knowledge about EXT.NET.Can you please help me this time?



@( X.FormPanel()
.ID("f")

.BodyPadding(5)
.Border(false)

.Items
(
X.Window()
.ID("Window1")
.Title("Add")
.Icon(Icon.Add)
.Height(290)
.Width(500)
.Layout(LayoutType.VBox)
.LayoutConfig(new VBoxLayoutConfig {Align=VBoxAlign.StretchMax})
.BodyPadding(0)
.Modal(true)
.Resizable(false)
.ButtonAlign(Alignment.Right)
.Buttons(
X.Button()
.Text("Save")
.ID("btnSave")
.DirectEvents(de =>
{
de.Click.Before = "return validation()";
de.Click.Action = "save";
de.Click.EventMask.ShowMask = true;
de.Click.EventMask.Msg = "Saving...";
de.Click.EventMask.MinDelay = 100;
de.Click.After = "App.GridPanel1.getStore().reload();";

})


)

.Items
(
X.Panel().Flex(1).Border(false).Height(30).Html(st rPanelheader).BodyStyle("width:100%")
,

X.Panel().Flex(1).Border(false).BodyStyle("width:100%")

.AutoScroll(true)

.Items(
// X.TextFieldFor(obj => obj.UOMName)
//.ID("txtUOMName12")
//.FieldLabel("UOMName")
//.AnchorHorizontal("100%")
//.EmptyText("UOMName")
//.AllowBlank(false)
//,
//X.TextFieldFor(obj => obj.UOMType)
//.ID("txtUOMType112")
//.FieldLabel("UOMType")
//.AnchorHorizontal("100%")
//.EmptyText("UOMType")
//.AllowBlank(false)
//,
//X.TextFieldFor(obj => obj.UOMName)
//.ID("txtUOMName1")
//.FieldLabel("UOMName")
//.AnchorHorizontal("100%")
//.EmptyText("UOMName")
//.AllowBlank(false)
//,
//X.TextFieldFor(obj => obj.UOMType)
//.ID("txtUOMType11")
//.FieldLabel("UOMType")
//.AnchorHorizontal("100%")
//.EmptyText("UOMType")
//.AllowBlank(false)
//,

X.TextFieldFor(obj => obj.UOMName)
.ID("txtUOMName")
.FieldLabel("UOMName")
.AnchorHorizontal("100%")
.EmptyText("UOMName")
.AllowBlank(false)
,
X.TextFieldFor(obj => obj.UOMType)
.ID("txtUOMType")
.FieldLabel("UOMType")
.AnchorHorizontal("100%")
.EmptyText("UOMType")
.AllowBlank(false)
,
X.TextAreaFor(obj => obj.Description)
.ID("txtDescription")
.FieldLabel("Description")
.AnchorHorizontal("100%")
.EmptyText("Description")
.AllowBlank(false)
,

X.Hidden().ID("hdfUOMCode").Value(0)




)
)

)
)

Above is my sample code and its produce design like attached screen shot.please correct me ,its very help full.

Daniil
Jun 13, 2014, 9:20 AM
Then I suggested this


Let's go step by step.

At first you need to create a Window with two rows inside. I would recommend a VBoxLayout.
http://examples2.ext.net/#/Layout/VBoxLayout/Rows/
I expected you do something like that:

Example

@{
var X = Html.X();
}

<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@X.ResourceManager()

@(X.Window()
.Width(500)
.Height(500)
.Title("Title")
.LayoutConfig(new VBoxLayoutConfig() { Align = VBoxAlign.Stretch })
.Items(
X.Container()
.Height(70)
.StyleSpec("background-color: white;")
.Html("Row 1"),

X.Container()
.Flex(1)
.StyleSpec("background-color: grey;")
.Html("Row 2")
)
.Buttons(
X.Button().Text("Button 1"),
X.Button().Text("Button 2")
)
)
</body>
</html>


Now you can take that example and expand step by step. Now you could try to layout the top part (white one). I would organize the icon, the first and the second text blocks as columns using an HBoxLayout. The examples of HBoxLayout you can find in our Examples Explorer.

If you post a new example, please ensure it is runnable. We should be able to copy, paste and run your test cases without any changes from our side. For example, do not use TextFieldFor at this point. It is absolutely not required for laying out the components.

matrixwebtech
Jun 13, 2014, 4:09 PM
Thanks very much,it helps beginner like me a lot.