[CLOSED] Hidden toolbar JS issue

  1. #1

    [CLOSED] Hidden toolbar JS issue

    I have toolbar:
    <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]
  2. #2
    Hi,

    Unfortunately, TopBar doesn't support hidden initial state.

    I can suggest you to render it dynamically in the container.
  3. #3
    I just thought that the simplest way is rendering the TopBar with Hidden="false", then hide it.

Similar Threads

  1. [CLOSED] GridPanel: Paging toolbar is not rendered in a hidden div
    By OSYS_FMS in forum 1.x Legacy Premium Help
    Replies: 27
    Last Post: Apr 27, 2012, 10:25 AM
  2. Replies: 8
    Last Post: Apr 14, 2011, 4:20 PM
  3. [CLOSED] HBoxLayout hidden controls issue
    By bakardi in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 22, 2010, 7:40 PM
  4. [CLOSED] TabPanel: hidden Tab issue
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 17, 2010, 5:36 PM
  5. [CLOSED] IE 7 issue with hidden toolbar
    By mjessup in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 30, 2009, 11:43 AM

Posting Permissions