Ok, our master page looks like that (simplified):
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Test.Web.Site" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title><%: Resources.Site.SiteTitle %> - <%: Page.Title %></title>
<link href="~/Styles/Site.css" rel="stylesheet" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ExtResourceManager" runat="server" HideInDesign="true">
<Listeners>
<BeforeAjaxRequest Handler="#{maskDiv}.removeCls('x-hide-display');" />
<AjaxRequestComplete Handler="#{maskDiv}.addCls('x-hide-display');" />
<AjaxRequestException Handler="#{maskDiv}.addCls('x-hide-display');" />
</Listeners>
</ext:ResourceManager>
<asp:ScriptManager ID="aspScriptManager" runat="server" EnableScriptLocalization="true">
<Scripts>
<asp:ScriptReference Path="~/Scripts/StringResources.js" />
<asp:ScriptReference Path="~/Scripts/Site.js" />
<asp:ScriptReference Path="~/Scripts/Ext.override.js" />
</Scripts>
</asp:ScriptManager>
<ext:Viewport ID="SiteLayout" runat="server" Layout="BorderLayout">
<Items>
<ext:Panel ID="NorthPanel" runat="server" Region="North" BaseCls="header">
<Content>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<asp:HyperLink runat="server" CssClass="site-title" NavigateUrl="~/" Text="<%$ Resources:Site, SiteTitle %>" />
<asp:Label runat="server" ID="lblEnvironment" CssClass="environment" Visible="false" />
</td>
<td>
<asp:LoginView runat="server">
<LoggedInTemplate>
<uc:UserFunctions ID="UserFunctions" runat="server" />
</LoggedInTemplate>
</asp:LoginView>
</td>
</tr>
</table>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Our Ext.override.js looks like that:
/**
Fix for HtmlEditor in IE. Inserts <br /> tag instead of <p></p> tags on pressing 'Enter' key.
http://forums.ext.net/showthread.php?17095-CLOSED-Problem-with-%E2%80%9CHtmlEditor%E2%80%9D-component-in-IE
*/
Ext.form.HtmlEditor.override({
fixKeys: function () {
if (Ext.isIE) {
return function (e) {
var me = this,
key = e.getKey(),
doc = me.getDoc();
if (key == e.ENTER) {
var range = doc.selection.createRange();
if (range) {
var target = range.parentElement();
if (!target || target.tagName.toLowerCase() != 'li') {
e.stopEvent();
range.pasteHTML('<br />');
range.collapse(false);
range.select();
}
}
}
};
}
}()
});
Ext.ux.BoxReorderer.override({
getNewIndex: function(pointerPos) {
var me = this,
dragEl = me.getDragEl(),
dragBox = Ext.fly(dragEl).getPageBox(),
targetEl,
targetBox,
targetMidpoint,
i = 0,
it = me.container.items.items,
ln = it.length,
lastPos = me.lastPos;
me.lastPos = dragBox[me.startAttr];
for (; i < ln; i++) {
targetEl = it[i].getEl();
// Only look for a drop point if this found item is an item according to our selector
if (targetEl.is(me.reorderer.itemSelector) || targetEl.down(me.reorderer.itemSelector)) { // overridden
targetBox = targetEl.getPageBox();
targetMidpoint = targetBox[me.startAttr] + (targetBox[me.dim] >> 1);
if (i < me.curIndex) {
if ((dragBox[me.startAttr] < lastPos) && (dragBox[me.startAttr] < (targetMidpoint - 5))) {
return i;
}
} else if (i > me.curIndex) {
if ((dragBox[me.startAttr] > lastPos) && (dragBox[me.endAttr] > (targetMidpoint + 5))) {
return i;
}
}
}
}
}
});
If I include the override in this Javascript file it seems that Ext.ux.BoxReorderer is not loaded at this time..
Our page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Overview.aspx.cs" Inherits="Test.Web.BV.Overview" Title="<%$ Resources:Pages, VOverview %>" %>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
var showVContextMenu = function (record, contextMenu, pos) {
var vType = "<%= typeof(v).FullName %>";
if (record.raw.Type == vType) {
contextMenu.showAt(pos);
return true;
} else {
return false;
}
};
</script>
<ext:Container runat="server">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Container runat="server" Width="400" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:FormPanel ID="FilterFormPanel" runat="server" Cls="filter-panel" BodyCls="filter-body">
<Items>
<ext:FieldContainer runat="server" AnchorHorizontal="100%" Layout="HBoxLayout">
<FieldDefaults LabelAlign="Top" />
<Items>
..................
</Items>
</ext:FieldContainer>
..................
</ext:FieldContainer>
</Items>
</ext:FormPanel>
<ext:TreePanel ID="VTreePanel" ClientIDMode="Static" runat="server" RootVisible="False" Animate="False" AutoScroll="True" Flex="1" Cls="tree-panel">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Label runat="server" Cls="toolbar-title" Text="<%$ Resources:V, VUebersicht %>" />
</Items>
</ext:Toolbar>
</TopBar>
<Fields>
..................
</Fields>
<ColumnModel>
<Columns>
..................
</Columns>
</ColumnModel>
<View>
<ext:TreeView runat="server" ToggleOnDblClick="false" />
</View>
<SelectionModel>
<ext:TreeSelectionModel runat="server" ID="VTreePanelSelectionModel" SingleSelect="true" />
</SelectionModel>
</ext:TreePanel>
</Items>
</ext:Container>
<ext:BoxSplitter runat="server" Collapsible="False" Cls="details-splitter" />
<ext:Container runat="server" ID="DetailsContainer" Flex="1" Layout="Fit">
<Content>
<ext:Container runat="server" AutoScroll="true">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Content>
<uc:VContainer ID="VContainerUserControl" runat="server" OnVSaved="VContainerUserControl_VSaved" />
</Content>
</ext:Container>
</Content>
</ext:Container>
</Items>
</ext:Container>
</asp:Content>
And then in the VContainerUserControl we load another user control which has a container and uses the BoxReorderer plugin.
If I put the override javascript code in the page head there is an error in the init function of the plugin, following code encounters the error:
me.animatePolicy[container.getLayout().names.x]=true
names is undefined..
Originally Posted by Willimaendu
