PDA

View Full Version : [CLOSED] Customized panel header using Razor syntax



JonathanCR
Nov 17, 2014, 7:15 PM
Hi,

I have serious issues trying to figure out how to add controls to the header of a panel and aligning the items correctly using Razor syntax. There is no documentation available for Razor syntax that I know about. The following code adds a label and a button to a panel header.


@{

var X = Html.X();
}

@(
X.Panel()
.Flex(1)
.Layout(LayoutType.VBox)
.LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Stretch })
.HeaderConfig(new PanelHeader
{
Items =
{
X.Label().ID("panelTitleLabel").Cls("ds-title-label"),
X.Button().ID("panelCloseButton").Width(28)
}
})
.Items(
X.Label().ID("myLabel").Text("Test Label")
//more items can be added here
)
)

I need the button to be aligned to the right and the label to the left.

How can I achieve that? How do I setup the Layout and the LayoutConfig for the header panel?

Where can I find Razor syntax documentation or examples?

Regards

Daniil
Nov 18, 2014, 11:00 AM
Hi @JonathanCR,

This might help.
http://forums.ext.net/showthread.php?40171&p=181601&viewfull=1#post181601


Where can I find Razor syntax documentation

Unfortunately, there is no documentation specific to using Razor with Ext.NET. Though, the regular Razor documentation might be very useful. Also there is something about Razor in Ext.NET book.
http://www.onenaught.com/posts/451/book-ext-net-web-application-development


or examples?

MVC Examples Explorer
http://mvc.ext.net/

JonathanCR
Nov 18, 2014, 3:34 PM
Thanks,

this example did the trick:



<HeaderConfig>
<Listeners>
<%-- If you don't need the Title --%>
<BeforeRender Handler="this.titleCmp.destroy();" />
</Listeners>
<Items>
<ext:Button runat="server" Text="Left button" />
<ext:Component runat="server" Flex="1" />
<ext:Button runat="server" Text="Right button" />
</Items>
</HeaderConfig>


One thing that I noticed and I don't know if it's only for my case is that if I don't destroy the title component using the BeforeRender Listener the control that is supposed to be on the right will stay in the middle of the header.

After I added the code to destroy the title my panel looks good.


This is the Razor syntax for that Listener by the way:


Listeners = { BeforeRender = { Handler = "this.titleCmp.destroy();" } }

Thanks a lot.

Daniil
Nov 18, 2014, 5:16 PM
Yes, destroying a title component is an essential part of the solution, because it is a still component even if no title text and it has a Flex="1" setting. So, it doesn't allow to align to very right.

Please use [CODE] tags for code.
Forum Guidelines For Posting New Topics (http://forums.ext.net/showthread.php?3440)