[CLOSED] Issue with ColumLayout and labelAlign Razor Ext 3.1

[idrissb]

I am building a formpanel from my controller. no matter what I try the labels are left aligned.

  // Panel that is returned to be added to the pop up window
            pnlContainer = new Panel();
            pnlContainer.Layout = "FitLayout";
            pnlContainer.Border = false;
            pnlContainer.Frame = true;


            Panel pnlOuter = new Panel();
            pnlOuter.Layout = "FitLayout";
            pnlOuter.Border = false;


            FormPanel formPanel = new FormPanel
            {
                ID = "formPanel",
                Frame = true,
                PollForChanges = false,
                DefaultAnchor = "92%",
                Border = false,
                AutoScroll = true,
                ButtonAlign = Alignment.Right,
                BodyPadding = 2,
                AnchorHorizontal = "-20",
                TrackResetOnLoad = true,
                FieldDefaults = { LabelAlign = LabelAlign.Top, MsgTarget = MessageTarget.Under }
            };


            pnlOuter.Items.Add(formPanel);

            // Scenario 1 - WORKS - uncomment the next 3 lines to test this scenario
     //formPanel.Items.Add(new TextField { ID = "test", LabelAlign = LabelAlign.Top, FieldLabel = "test", AllowBlank = false, MsgTarget = MessageTarget.Under });
             //formPanel.Items.Add(new TextField { ID = "test2", LabelAlign = LabelAlign.Top, FieldLabel = "test2", AllowBlank = false, MsgTarget = MessageTarget.Under });
             //formPanel.Items.Add(new TextField { ID = "test22", LabelAlign = LabelAlign.Top, FieldLabel = "test23", AllowBlank = false, MsgTarget = MessageTarget.Under });

           // Scenario which I need is NOT working - I am building a column layout as I need 3 columns. only including one
           // I have tried Panel and Container with sames results. 
            Ext.Net.FieldContainer col11 = new Ext.Net.FieldContainer
            {
                ID = "pnlCol11",
                Border = false,
                ColumnWidth = .5,
                Layout = "FormLayout",
                Defaults = { new Parameter { Name = "labelAlign", Value = "under" } },
                LabelAlign = LabelAlign.Top,
                MsgTarget = MessageTarget.Under
            };


            col11.Items.Add(new TextField { ID = "test", LabelAlign = LabelAlign.Top, FieldLabel = "test", AllowBlank = false, MsgTarget = MessageTarget.Under });
            col11.Items.Add(new TextField { ID = "test2", LabelAlign = LabelAlign.Top, FieldLabel = "test2", AllowBlank = false, MsgTarget = MessageTarget.Under });
            col11.Items.Add(new TextField { ID = "test22", LabelAlign = LabelAlign.Top, FieldLabel = "test23", AllowBlank = false, MsgTarget = MessageTarget.Under });


            formPanel.Items.Add(col11);

pnlContainer.Items.Add(pnlOuter);

// pnlContainer is returned to controller to use with ComponentConfig.

why is LabelAlign and MsgTarget ignored in the second scenario. Thank you for your help.

[fabricio.murta]

Hello @idrissb!

I seem to have been able to reproduce your issue. The problems were on your lines 43 and 44.

If I understood it correctly, problem was because the fields were not being show below their respective labels when you added via the FieldContainer, right?..

Try to replace your test case with this code:

            // Panel that is returned to be added to the pop up window
            pnlContainer = new Panel();
            pnlContainer.Layout = "FitLayout";
            pnlContainer.Border = false;
            pnlContainer.Frame = true;


            Panel pnlOuter = new Panel();
            pnlOuter.Layout = "FitLayout";
            pnlOuter.Border = false;


            FormPanel formPanel = new FormPanel
            {
                ID = "formPanel",
                Frame = true,
                PollForChanges = false,
                DefaultAnchor = "92%",
                Border = false,
                AutoScroll = true,
                ButtonAlign = Alignment.Right,
                BodyPadding = 2,
                AnchorHorizontal = "-20",
                TrackResetOnLoad = true,
                FieldDefaults = { LabelAlign = LabelAlign.Top, MsgTarget = MessageTarget.Under }
            };


            pnlOuter.Items.Add(formPanel);

            // Scenario 1 - WORKS - uncomment the next 3 lines to test this scenario
            //formPanel.Items.Add(new TextField { ID = "testBar", FieldLabel = "test one", AllowBlank = false });
            //formPanel.Items.Add(new TextField { ID = "test2Bar", FieldLabel = "test2 two", AllowBlank = false });
            //formPanel.Items.Add(new TextField { ID = "test22Bar", FieldLabel = "test23 twenty-three", AllowBlank = false });
            
            // Scenario which I need is NOT working - I am building a column layout as I need 3 columns. only including one
            // I have tried Panel and Container with sames results. 
            Ext.Net.FieldContainer col11 = new Ext.Net.FieldContainer
            {
                ID = "pnlCol11",
                Border = false,
                ColumnWidth = .5,
                FieldDefaults = { LabelAlign = LabelAlign.Top, MsgTarget = MessageTarget.Under }
            };

            col11.Items.Add(new TextField { ID = "test", LabelAlign = Ext.Net.LabelAlign.Top, FieldLabel = "test one'", AllowBlank = false });
            col11.Items.Add(new TextField { ID = "test2", FieldLabel = "test2 two'", AllowBlank = false });
            col11.Items.Add(new TextField { ID = "test22", FieldLabel = "test23 twenty-three'", AllowBlank = false });

            formPanel.Items.Add(col11);

            pnlContainer.Items.Add(pnlOuter);

            // pnlContainer is returned to controller to use with ComponentConfig.

Hope this helps!..

Next time, you can help us reproduce your case if you provide, additionally to the bare code, the example View and Controller (and Model if used) files' contents.

As for this case I ended up with the following View and Controller to reproduce your issue:
View:

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

@{
    ViewBag.Title = "index";
}

@(Html.X().ResourceManager())

@(Html.X().Viewport()
        .LayoutConfig(new VBoxLayoutConfig() { Align = VBoxAlign.Center, Pack = BoxPack.Center })
        .BorderSpec("black 2px")
        .Loader(
            Html.X().ComponentLoader()
                .AutoLoad(true)
                .Url(Url.Action("GetContainer"))
                .Mode(LoadMode.Component)
        )
)

Controller:

using Ext.Net;
using Ext.Net.MVC;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace v310mvc.Controllers
{
    public class F59687Controller : Controller
    {
        // GET: F59687
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetContainer()
        {
            // Panel that is returned to be added to the pop up window
            var pnlContainer = new Panel();
            pnlContainer.Layout = "FitLayout";
            pnlContainer.Border = false;
            pnlContainer.Frame = true;

            Panel pnlOuter = new Panel();
            pnlOuter.Layout = "FitLayout";
            pnlOuter.Border = false;

            FormPanel formPanel = new FormPanel
            {
                ID = "formPanel",
                Frame = true,
                PollForChanges = false,
                DefaultAnchor = "92%",
                Border = false,
                AutoScroll = true,
                ButtonAlign = Alignment.Right,
                BodyPadding = 2,
                AnchorHorizontal = "-20",
                TrackResetOnLoad = true,
                FieldDefaults = { LabelAlign = LabelAlign.Top, MsgTarget = MessageTarget.Under }
            };

            pnlOuter.Items.Add(formPanel);

            // Scenario 1 - WORKS - uncomment the next 3 lines to test this scenario
            //formPanel.Items.Add(new TextField { ID = "testBar", FieldLabel = "test one", AllowBlank = false });
            //formPanel.Items.Add(new TextField { ID = "test2Bar", FieldLabel = "test2 two", AllowBlank = false });
            //formPanel.Items.Add(new TextField { ID = "test22Bar", FieldLabel = "test23 twenty-three", AllowBlank = false });
            
            // Scenario which I need is NOT working - I am building a column layout as I need 3 columns. only including one
            // I have tried Panel and Container with sames results. 
            Ext.Net.FieldContainer col11 = new Ext.Net.FieldContainer
            {
                ID = "pnlCol11",
                Border = false,
                ColumnWidth = .5,
                FieldDefaults = { LabelAlign = LabelAlign.Top, MsgTarget = MessageTarget.Under }
            };

            col11.Items.Add(new TextField { ID = "test", LabelAlign = Ext.Net.LabelAlign.Top, FieldLabel = "test one'", AllowBlank = false });
            col11.Items.Add(new TextField { ID = "test2", FieldLabel = "test2 two'", AllowBlank = false });
            col11.Items.Add(new TextField { ID = "test22", FieldLabel = "test23 twenty-three'", AllowBlank = false });

            formPanel.Items.Add(col11);

            pnlContainer.Items.Add(pnlOuter);

            // pnlContainer is returned to controller to use with ComponentConfig.
            return this.ComponentConfig(pnlContainer);
        }
    }
}

This not only allows us to reply you in a shorter time, but most importantly ensures we are running your test case accurately how you are running.

If the first code does not fix your issue, please check if the full View+Controller implementation does and, if still not working, you could provide us your version as above.

p.s.: the 'using' part on both view and controller sample is completely optional, to save lines you don't really have to paste them in when sharing the test case -- unless you're using a specific third-party library which, in turn, most likely would be turning the test case harder to reproduce by us.

[idrissb]

Thank you very much, that was the problem and I will post more complete test case. One question, when removing layout, field width is now not taking width of column. I tried to set DefaultAnchor but does not seem to do anything. I would prefer not to have to set width for each width. is it possible.

thank you

[fabricio.murta]

Hello @idrissb!

Great to hear that it really helped you. I believe I can mark this thread as closed now, for our records?

Now, let's get to the next question.

I can think on some ways to make the fields fit the column width, but I don't really get what you mean with 'removing layout'. Would that be an option for you to create a new thread? It would be great to keep different questions on different threads.

Also, if you agree on the new thread, can you elaborate on the test case, a simple example showing what you really mean with having to specify width to every field?

I've noticed on the first sample you sent that you really repeated the parameters you wanted to enforce everywhere (and that's understandable, as it didn't seem to obey you at all), so in the replied examples I tried to clean that as much as possible to serve as both reference and simpler to understand.

Hope you understand, waiting for your feedback.

[idrissb]

Thank you. You can mark as closed I have opened a new thread. Thank you.
http://forums.ext.net/showthread.php...199#post273199