PDA

View Full Version : [CLOSED] Window .Buttons spacing



registrator
Jun 04, 2015, 7:58 AM
Is there a way to place a group of buttons in the .Buttons() collection aligned to the left and another group to the right?
Or maybe putting a spacer between them so the right ones are pushed to the right?


.Buttons(
X.Button()
.Text("Set Property")
.DirectEvents(de => {
de.Click.Url = Url.Action("SetIFrameLoadProperty");
de.Click.Method = HttpMethod.GET;
de.Click.ExtraParams.Add(new Parameter("containerId", "Panel3"));
}),
**** SPACER pushing to the right?
X.Button()
.Text("Load")
.DirectEvents(de => {
de.Click.Url = Url.Action("LoadIFrameContent");
de.Click.ExtraParams.Add(new Parameter("containerId", "Panel3"));
})
)

Thank you

Daniil
Jun 04, 2015, 4:57 PM
Hi @registrator,

A Window's Buttons is a shorthand for a bottom docked item.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-buttons

You cannot add a Button on the left with a Butttons config, but you can define a bottom docked item from scratch.


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

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

@(X.Window()
.Html("Content")
.DockedItems(
X.Toolbar()
.Dock(Dock.Bottom)
.UIName("footer")
.Items(
X.Button().Text("Left"),
X.Component().Flex(1),
X.Button().Text("Right")
)
)
)
</body>
</html>

registrator
Jun 04, 2015, 7:24 PM
Thank you Daniil

The only thing about this is that the buttons are "flat" until you hover over them.
Is there a way to change their style to look like when mouse over?

Thank you

Daniil
Jun 05, 2015, 10:35 AM
Hmm, it doesn't look flat to me, but to apply any CSS rules please use a Button's Cls property.