[CLOSED] [WebForm] Render html in ToolBar

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] [WebForm] Render html in ToolBar

    Hi guys,

    i would like to fill toolbar html properties with an static function (same htmlhelper in mvc)

    <ext:Toolbar runat="server" Height="30" Layout="FitLayout" Border="false" Html='<%= TIOWTS.Helper.HeadBandHelper.HeadBandHelperString("Administration") %>'>
    i tried this, but html isn't interpret.

    I test to use a panel with content. It's work but my window doesn't show with this method.

    <ext:Toolbar runat="server" Height="30" Layout="FitLayout" Border="false">
                            <Items>
                                <ext:Panel runat="server" BodyCls="HeadBand" Cls="HeadBand" >
                                    <Content>
                                        <%= TIOWTS.Helper.HeadBandHelper.HeadBandHelperString("Administration") %>
                                    </Content>
                                </ext:Panel>
                            </Items>
                        </ext:Toolbar>
    my headband is full html and work perfectly in mvc application

    Click image for larger version. 

Name:	HeadBand.png 
Views:	17 
Size:	51.3 KB 
ID:	7548

    Regards
    Last edited by Daniil; Feb 05, 2014 at 1:39 PM. Reason: [CLOSED]
  2. #2
    Hi @Tactem,

    Please try to set up AutoDataBind="true" for the Toolbar.
  3. #3
    the result is the same with autodatabind = true
  4. #4
    I remembered that a Toolbar is supposed to be used with Items only. It should not be used with Html or Content.

    Are you using a Toolbar inside BottomBar or TopBar? If so, please use a Container as a docked item.

    Example
    <ext:Panel runat="server">
        <DockedItems>
            <ext:Container runat="server" Dock="top" />
        </DockedItems>
    </ext:Panel>
    Then you can render the things into that Container.
  5. #5
    i'm using a Toolbar inside TopBar

    i have the same result with this

    <TopBar>
                        <ext:Toolbar runat="server" Height="30" Layout="FitLayout" Border="false" AutoDataBind="true">
                            <Items>
                                <ext:Panel runat="server">
                                    <DockedItems>
                                        <ext:Container runat="server" Dock="top">
                                            <Content>
                                                <%= TIOWTS.Helper.HeadBandHelper.HeadBandHelperString("Administration") %>
                                            </Content>
                                        </ext:Container>
                                    </DockedItems>
                                </ext:Panel>
                                <%--<ext:Panel runat="server" BodyCls="HeadBand" Cls="HeadBand" >
                                    <Content>
                                        <%= TIOWTS.Helper.HeadBandHelper.HeadBandHelperString("Administration") %>
                                    </Content>
                                </ext:Panel>--%>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
    clarification : i see my top bar, but i don't see my window at the right because it's out of my toolbar zone

    i join an another image
    Click image for larger version. 

Name:	HeadBand2.png 
Views:	8 
Size:	40.1 KB 
ID:	7550
  6. #6
    Well, I meant using a docked Container instead of a Toolbar, not inside. Never mind.

    clarification : i see my top bar, but i don't see my window at the right because it's out of my toolbar zone
    I don't quite understand what you mean. Are you rendering a Window to a Toolbar?

    A full sample to reproduce the problem is appreciated.
  7. #7
    Full simple sample

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="TIOWTS.Administration.WebForm1" %>
        <link rel="stylesheet" type="text/css" href="../../resources/css/main.css" />
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
            <ext:ResourceManager ID="ResourceManager1" runat="server" ShowWarningOnAjaxFailure="false">
        </ext:ResourceManager>
        <form id="form1" runat="server">
            <div>
                <ext:Panel runat="server" Layout="FitLayout" ID="PanelMain">
                    <TopBar>
                        <ext:Toolbar runat="server" Height="30" Layout="FitLayout" Border="false" AutoDataBind="true">
                            <Items>
                                <ext:Panel runat="server">
                                    <DockedItems>
                                        <ext:Container runat="server" Dock="top">
                                            <Content>
                                                <div>
                                                    <script>
                                                        function showDiv()
                                                        {
                                                            var divTemp = document.getElementById('divTemp');
                                                            divTemp.style.display = "block";
                                                        }
                                                    </script>
                                                    <input type="button" onclick="showDiv()" />
                                                    <div id="divTemp" style="margin-left:500px; margin-top:200px; z-index:2000111; height:100px; width:200px; display:none;">
                                                        <h2> test</h2>
                                                    </div> 
                                                </div>
                                            </Content>
                                        </ext:Container>
                                    </DockedItems>
                                </ext:Panel>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Items>
                        <ext:Panel runat="server">
                                </ext:Panel>
                    </Items>
                </ext:Panel>
            </div>
        </form>
    </body>
    </html>
    objective : show my divTemp
    Last edited by Daniil; Feb 03, 2014 at 1:33 PM. Reason: Removed LicenseKey
  8. #8
    Just an observation but you'll want to put that <script> section inside an <HtmlBin> of the Container. HtmlBin is designated for non-layout html (which the input and divs are).
  9. #9
    Well, that <div> is not visible, because its container doesn't have enough height to get visible.

    I am not sure that I understand the requirement, but it looks like you might need to use a floating Container.

    Example
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Panel runat="server">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <HtmlBin>
                            <script>
                                function showDiv() {
                                    App.Container1.show();
                                    App.Container1.setPosition(100, 100);
                                }
                            </script>
                        </HtmlBin>
                        <Items>
                            <ext:Button runat="server" Text="Show" Handler="showDiv" />
                            <ext:Container ID="Container1" runat="server" Floating="true">
                                <Content>
                                    <div style="height: 100px; width: 200px;">
                                        <h2>test</h2>
                                    </div>
                                </Content>
                            </ext:Container>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:Panel>
        </form>
    </body>
    </html>
    See also
    http://docs.sencha.com/extjs/4.2.1/#...t-cfg-floating
  10. #10
    Well, that <div> is not visible, because its container doesn't have enough height to get visible.
    but in ext.mvc it's work.

    it's probably possible to use a container to show my div even if i prefer show my div direct while my helper is using in webform appli and in mvc appli
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] ext:label's text can not render contain html tag?
    By hdsoso in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 15, 2013, 2:42 PM
  2. [CLOSED] DisplayField.Html does not render .Html value
    By geoffrey.mcgill in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 15, 2013, 1:26 PM
  3. Render html in gridpanel cell?
    By Tbaseflug in forum 2.x Help
    Replies: 1
    Last Post: May 17, 2012, 2:52 PM
  4. [CLOSED] [1.0] FileUploadField in toolbar does not render
    By jchau in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Dec 12, 2011, 5:43 PM
  5. Make Panel Render HTML
    By jarremw in forum 1.x Help
    Replies: 2
    Last Post: Feb 16, 2009, 6:55 PM

Posting Permissions