[CLOSED] Design with complex layout

  1. #1

    [CLOSED] Design with complex layout

    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
    Attached Thumbnails Click image for larger version. 

Name:	from.png 
Views:	40 
Size:	54.1 KB 
ID:	12621  
    Last edited by Daniil; Jun 17, 2014 at 11:43 AM. Reason: [CLOSED]
  2. #2
    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.
    https://examples2.ext.net/#/Layout/VBoxLayout/Rows/
  3. #3
    Quote Originally Posted by Daniil View Post
    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.
    https://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.
  4. #4
    The Button can go in the Buttons Collection of the Window.

    Do you only have an image of that form?
    Geoffrey McGill
    Founder
  5. #5
    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(strPanelheader).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.
    Attached Thumbnails Click image for larger version. 

Name:	sample.png 
Views:	35 
Size:	10.6 KB 
ID:	12641  
    Last edited by geoffrey.mcgill; Jun 13, 2014 at 3:10 PM.
  6. #6
    Then I suggested this
    Quote Originally Posted by Daniil View Post
    Let's go step by step.

    At first you need to create a Window with two rows inside. I would recommend a VBoxLayout.
    https://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.
    Last edited by Daniil; Jun 13, 2014 at 8:26 AM.
  7. #7
    Thanks very much,it helps beginner like me a lot.

Similar Threads

  1. [CLOSED] Issues with a complex layout of many partials
    By ATLAS in forum 2.x Legacy Premium Help
    Replies: 14
    Last Post: Jul 25, 2013, 5:12 AM
  2. MDI form and Complex Layout
    By themack in forum 1.x Help
    Replies: 0
    Last Post: Sep 25, 2011, 6:20 PM
  3. [CLOSED] Complex Layout
    By jchau in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 08, 2011, 8:10 PM
  4. Design layout
    By warriorvn in forum 1.x Help
    Replies: 1
    Last Post: Jun 05, 2010, 10:07 AM
  5. Replies: 2
    Last Post: Mar 04, 2010, 3:57 PM

Tags for this Thread

Posting Permissions