Apr 13, 2011, 1:48 PM
[CLOSED] Hidden toolbar JS issue
I have toolbar:
this:
<TopBar>
<ext:Toolbar ID="mainToolbar" runat="server" Margins="5" Hidden="false">
<Items>
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="250" />
<ext:ButtonGroup ID="ButtonGroup1" runat="server">
<Items>
<ext:TableLayout ID="TableLayout2" runat="server" Columns="5">
<Cells>
<ext:Cell>
<ext:ImageButton ID="btnFirst" runat="server" ImageUrl="~/resources/images/go_first_icon.png"
DisabledImageUrl="~/resources/images/go_first_disable_icon.png" StandOut="true">
<Listeners>
<Click Handler="showLoadingMask();BPOLX.Viewer.First();" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="btnFirstToolTip" runat="server" Html="First Page" />
</ToolTips>
</ext:ImageButton>
</ext:Cell>
<ext:Cell>
<ext:ImageButton ID="btnBack" runat="server" ImageUrl="~/resources/images/previous_icon.png"
DisabledImageUrl="~/resources/images/previous_disable_icon.png" StandOut="true">
<Listeners>
<Click Handler="showLoadingMask();BPOLX.Viewer.Previous();" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="btnBackToolTip" runat="server" Html="Previous Page" />
</ToolTips>
</ext:ImageButton>
</ext:Cell>
<ext:Cell>
<ext:ComboBox ID="cmbPages" runat="server" Editable="false" TypeAhead="true" Mode="Local"
DisplayField="Text" ValueField="Value" ForceSelection="true" Resizable="true"
SelectOnFocus="true" Width="50">
<Store>
<ext:Store runat="server" ID="pagesStore">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="Text" />
<ext:RecordField Name="Value" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<Listeners>
<Select Handler="showLoadingMask();BPOLX.Viewer.PageChanged(#{cmbPages}.value);" />
</Listeners>
</ext:ComboBox>
</ext:Cell>
<ext:Cell>
<ext:ImageButton ID="btnNext" runat="server" ImageUrl="~/resources/images/next_icon.png"
DisabledImageUrl="~/resources/images/next_disable_icon.png" StandOut="true">
<Listeners>
<Click Handler="showLoadingMask();BPOLX.Viewer.Next();" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="btnNextToolTip" runat="server" Html="Next Page" />
</ToolTips>
</ext:ImageButton>
</ext:Cell>
<ext:Cell>
<ext:ImageButton ID="btnLast" runat="server" ImageUrl="~/resources/images/last_icon.png"
DisabledImageUrl="~/resources/images/last_disable_icon.png" StandOut="true">
<Listeners>
<Click Handler="showLoadingMask();BPOLX.Viewer.Last();" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="btnLastToolTip" runat="server" Html="Last Page" />
</ToolTips>
</ext:ImageButton>
</ext:Cell>
</Cells>
</ext:TableLayout>
</Items>
</ext:ButtonGroup>
<ext:ToolbarSpacer ID="ToolbarSeparator2" runat="server" Width="20" />
<ext:ButtonGroup ID="ButtonGroup3" runat="server">
<Items>
<ext:TableLayout ID="TableLayout4" runat="server" Columns="3">
<Cells>
<ext:Cell>
<ext:ImageButton ID="btnZoomOut" runat="server" ImageUrl="~/resources/images/zoom_out_icon.png">
<Listeners>
<Click Fn="function(){resizeImage(0.8);}" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="btnZoomOutToolTip" runat="server" Html="Zoom Out Page" />
</ToolTips>
</ext:ImageButton>
</ext:Cell>
<ext:Cell>
<ext:Slider runat="server" ID="ZoomSlider" Width="150" Increment="10">
<Listeners>
<Change Fn="function(){resizeImage(1);}" />
</Listeners>
<Plugins>
<ext:SliderTip ID="SliderTip1" runat="server">
<GetText Fn="function (slider) {return String.format('<b>{0}%</b>', slider.value);}" />
</ext:SliderTip>
</Plugins>
</ext:Slider>
</ext:Cell>
<ext:Cell>
<ext:ImageButton ID="btnZoomIn" runat="server" ImageUrl="~/resources/images/zoom_in_icon.png"
StandOut="true">
<Listeners>
<Click Fn="function(){resizeImage(1.2);}" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="btnZoomInToolTip" runat="server" Html="Zoom In Page" />
</ToolTips>
</ext:ImageButton>
</ext:Cell>
</Cells>
</ext:TableLayout>
</Items>
</ext:ButtonGroup>
<ext:ToolbarSpacer ID="ToolbarSpacer2" runat="server" Width="20" />
<ext:ButtonGroup ID="ButtonGroup4" runat="server">
<Items>
<ext:TableLayout ID="TableLayout5" runat="server" Columns="7">
<Cells>
<ext:Cell CellCls="ToolBarSpacer">
<ext:ImageButton ID="btnRotateLeft" runat="server" ImageUrl="~/resources/images/anticlockwise_icon.png"
StandOut="true">
<Listeners>
<Click Handler="rotateImage(-90);" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="btnRotateLeftToolTip" runat="server" Html="Rotate Left" />
</ToolTips>
</ext:ImageButton>
</ext:Cell>
<ext:Cell CellCls="ToolBarSpacer">
<ext:ImageButton ID="btnRotateRight" runat="server" ImageUrl="~/resources/images/clockwise_icon.png"
StandOut="true">
<Listeners>
<Click Handler="rotateImage(90);" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="btnRotateRightToolTip" runat="server" Html="Rotate Right" />
</ToolTips>
</ext:ImageButton>
</ext:Cell>
<ext:Cell CellCls="ToolBarSpacer">
<ext:ImageButton ID="btnFit" runat="server" ImageUrl="~/resources/images/fit_to_page_icon.png"
StandOut="true">
<Listeners>
<Click Fn="showFitPage" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="btnFitToolTip1" runat="server" Html="Fit Page" />
</ToolTips>
</ext:ImageButton>
</ext:Cell>
<ext:Cell CellCls="ToolBarSpacer">
<ext:ImageButton ID="btnFull" runat="server" ImageUrl="~/resources/images/full_page_in_screen_icon.png">
<Listeners>
<Click Fn="showFullPage" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="btnFullToolTip" runat="server" Html="Full Page" />
</ToolTips>
</ext:ImageButton>
</ext:Cell>
<ext:Cell CellCls="ToolBarSpacer">
<ext:ImageButton ID="btnFixSize" runat="server" ImageUrl="~/resources/images/lock_icon.png">
<Listeners>
<Click Handler="BPOLX.Viewer.Lock(#{pnlImageViwer}.body.getScroll().left,#{pnlImageViwer}.body.getScroll().top,#{hdnAngle}.value, #{ZoomSlider}.getValue());" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="btnFixSizeToolTip" runat="server" Html="Fixed Size" />
</ToolTips>
</ext:ImageButton>
</ext:Cell>
<ext:Cell CellCls="ToolBarSpacer">
<ext:ImageButton ID="btnRefresh" runat="server" ImageUrl="~/resources/images/refresh_icon.png">
<Listeners>
<Click Handler="BPOLX.Viewer.Refresh(#{pnlImageViwer}.getHeight());" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="btnRefreshToolTip" runat="server" Html="Refresh" />
</ToolTips>
</ext:ImageButton>
</ext:Cell>
</Cells>
</ext:TableLayout>
</Items>
</ext:ButtonGroup>
</Items>
</ext:Toolbar>
</TopBar>
If I set Hidden="false" and after change visibility(Hidden) to true or false everything works fine, but if on first load Hidden="true", after I change it with JS or code behind it fire JavaScript Error: Microsoft JScript runtime error: 'this.imgEl.dom' is null or not an object.this:
actionMode: "el"
ajaxListeners: {...}
allowDomMove: true
arrowAlign: "right"
autoEl: "div"
autoFocusDelay: 10
autoShow: false
boxReady: false
bubbleEvents: {...}
buttonSelector: "img"
clickEvent: "click"
cls: "x-btn-over"
ctype: "Ext.Component"
deferHeight: false
disabled: false
disabledClass: "x-item-disabled"
disabledImageUrl: "/resources/images/go_first_disable_icon.png"
enableToggle: false
events: {...}
filterOptRe: /^(?:scope|delay|buffer|single)$/
handleMouseEvents: true
hidden: false
hideMode: "display"
hideParent: true
iconAlign: "left"
id: "ProjectDocuments1_ViewerWindow1_btnFirst"
imageUrl: "/resources/images/go_first_icon.png"
initialConfig: {...}
isAjaxInit: true
menuAlign: "tl-bl?"
menuArrow: true
menuClassTarget: "tr:nth(2)"
ownerCt: {...}
pressed: false
removeMode: "container"
rendered: false
scale: "small"
selectable: true
tooltipType: "qtip"
tplWriteMode: "overwrite"
type: "button"
xtype: "netimagebutton"
Last edited by Daniil; Apr 15, 2011 at 12:13 PM.
Reason: [CLOSED]