What's New?

Tooltips on panel tools

  1. #1
    Mar 20, 2013, 3:29 PM

    Tooltips on panel tools

    Hey everyone,

    I'm having some issues adding tooltips to ext.net panel tools, specifically a tool that I'm using for collapse and expand. This is a trimmed down version of what I'm working with:

    <ext:Panel runat="server" Layout="BorderLayout" Region="Center">
        <Items>
                  <ext:Panel runat="server" Layout="BorderLayout" Width="600" Height="400" Title="Task Panel"
                        Region="West" Collapsible="false" ID="TaskPanelMain">
                        <Tools>
                              <ext:Tool runat="server" Type="left" ToolTip="Collapse Panel"
                                      Handler="App.TaskPanelMain.collapse();" />
                        </Tools>
                   </ext:Panel>
        </Items>
</ext:Panel>
    In the top right corner of the panel there is a left arrow button which collapses the panel when clicked. When hovered over, this button displays the appropriate tooltip "Collapse Panel".
    When the button is clicked and the panel is collapsed, the button is automatically replaced with a right arrow button that expands the panel when clicked. This button has no tooltip.

    Using my browser developer tools, I've noticed that the ID of the button changes when it switches from collapse to expand, but this seems to be done automatically and I don't have control over the newly created button. Where can I set the tooltip that will be displayed for the expand button?

    Thanks for your time.
  2. #2
    Mar 21, 2013, 10:51 PM
    Hello!

    Welcome to our forum!

    I couldn't reproduce the creating of new tool. Can you say what version of Ext.NET do you use?

    I could change the tool's tooltip using the following:

    <ext:Tool runat="server" Type="left" ToolTip="Collapse Panel" ID="tool1"
	Handler="App.TaskPanelMain.collapse(); this.el.dom.setAttribute('data-qtip', 'Another tooltip');">
</ext:Tool>
    Last edited by Baidaly; Mar 21, 2013 at 11:47 PM.
  3. #3
    Mar 22, 2013, 1:47 PM
    Thanks for your response.

    I'm using Ext.net version 2.1.1 and Ext.net.Utilities version 2.1.0

    It seems to me that, at least in my case, that there are 2 different buttons being used to control the collapse/expand behavior of the panel. I can see this by assigning a unique ID to my tool:

    <ext:Tool runat="server" Type="left" ToolTip="Collapse Panel" ID="collapsePanelTool"
    Handler="App.TaskPanelMain.collapse();">
</ext:Tool>
    Using the browser developer console and examining the tool shows the the control ID is "collapsePanelTool" and the data-qtip attribute is set to "Collapse Panel". However, after the button is pressed, the tool id changes to a default generated id "tool-1036" and has no data-qtip attribute.

    This can also be seen on any examples.ext.net page. See: https://examples2.ext.net/#/Layout/B..._Region_Image/
    The collapse button has a different id than the expand button for the same panel.

    What I'm trying to do is have the tooltip for the button be "Collapse" when clicking it will collapse the panel and "Expand" when clicking it will expand the panel.

    Thanks for your help.
  4. #4
    Mar 22, 2013, 9:50 PM
    Hello!

    Try to use the following approach:

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

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

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET Examples</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" SourceFormatting="True" />
        
        <ext:Viewport runat="server" Layout="BorderLayout" Region="Center">
            <Items>
                <ext:Panel runat="server" Layout="BorderLayout" Width="600" Height="400" Title="Task Panel"
                    Region="West" Collapsible="True" ID="TaskPanelMain">
                    <Listeners>
                        <Collapse Handler="
                            this.placeholder.items.items[0].el.dom.setAttribute('data-qtip', 'Expand tooltip')
                        " Single="True"></Collapse>
                        <AfterRender Handler="this.header.el.dom.setAttribute('data-qtip', 'Collapse tooltip')"></AfterRender>
                    </Listeners>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

Similar Threads

  1. DirectEvents property on Panel tools
    By thedarklord in forum 1.x Help
    Replies: 0
    Last Post: Apr 18, 2012, 8:59 AM
  2. [CLOSED] [2.0] Razor and Panel Tools
    By Timothy in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 21, 2012, 12:42 PM
  3. [CLOSED] [1.0] Dynamically add and remove tools on panel
    By MP in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 10, 2011, 7:38 PM
  4. [CLOSED] [1.0] Panel tools causing JS error
    By state in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 19, 2009, 2:42 PM
  5. Panel.Tools property
    By agha in forum 1.x Help
    Replies: 3
    Last Post: Mar 03, 2009, 5:48 PM

Tags for this Thread

Posting Permissions