PDA

View Full Version : [CLOSED] How to use Floating, FloatingConfig for Toolbar



UnifyEducation
May 03, 2012, 2:29 PM
Hi,

Could you give me an example for using Floating, FloatingConfig in Toolbar. Here is my code:

@using Ext.Net.MVC
@model dynamic

@{
Layout = null;
}
<head>
</head>

@Html.X().ResourceManager()
@Html.X().Toolbar().Flat(true).Items(item => item.Add(Html.X().Button().Text("MyButton"))).Floating(true)

How can I put the Toolbar in the top-right conner on the browser?

If I use a ViewPort in my page, How can I put this toolbar always over the ViewPort and in the topright conner?

Daniil
May 03, 2012, 3:29 PM
Hi,

Here you are.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var align = function (tb) {
tb.alignTo(Ext.getBody(), 'tr-tr', [-10, 10]);
};
</script>
</head>
<body>
<ext:ResourceManager runat="server">
<Listeners>
<WindowResize Handler="align(#{Toolbar1});" />
</Listeners>
</ext:ResourceManager>
<ext:Viewport runat="server">

</ext:Viewport>

<ext:Toolbar ID="Toolbar1" runat="server" Floating="true">
<Items>
<ext:Button runat="server" Text="Button1" />
<ext:Button runat="server" Text="Button2" />
</Items>
<Listeners>
<AfterRender Fn="align" Delay="50" />
</Listeners>
</ext:Toolbar>
</body>
</html>


See also
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Component-cfg-floating
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.Floating

UnifyEducation
May 04, 2012, 8:33 AM
Thanks for your help.
But in Razor, I can not find Listeners in ResourceManager. How can I resolve this problem?

Daniil
May 04, 2012, 10:54 AM
Thanks for the report.

The Listeners have been added, please update from SVN.

Example

@Html.X().ResourceManager().Listeners(ls =>
ls.WindowResize.Handler = "alert('Resize');"
)