[CLOSED] Is it possible to handle doubleclick event on a tab

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Is it possible to handle doubleclick event on a tab

    Hi,

    I'd like to implement the ability to double click a tab (so that a user can be offered a prompt or something to rename the tab, or even bring up the menu like you have here: https://examples1.ext.net/#/TabPanel/Basic/TabMenu/ )

    But I can't see a double click event for tabs on the TabPanel (unless I missed it).

    I googled a little bit and best I could see was this in ExtJs (from google cache because at time of writing I cannot access the original page)
    http://webcache.googleusercontent.co...ient=firefox-a

    Do you have other suggestions, or is the approach in the link above the way I'd have to get double click to work on a tab?

    Thanks!
    Last edited by Daniil; Feb 02, 2011 at 10:44 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Here is the script which demonstrates how to catch double click for first tab
    Ext.get(TabPanel1.getTabEl(0)).on("dblclick", functio(){Ext.Msg.alert("Click", "Click");});
  3. #3
    Come to think of it, I was going to launch a dialog/prompt or menu to ask for the new tab name, but can it be done like with Excel, where the tab name becomes editable?

    I guess I could access the dom for the tab, find the element containing the text, and temporarily swap it for a text box etc...? Or is there an inbuilt way in ExtJs to do this (I looked for something but couldn't see anything obvious to me...)
  4. #4
    Vladimir, many thanks for such a quick response! I was already typing my second thought before even seeing yours come in!
  5. #5
    Hi,

    Come to think of it, I was going to launch a dialog/prompt or menu to ask for the new tab name, but can it be done like with Excel, where the tab name becomes editable?
    Please see
    https://examples1.ext.net/#/Editor/B...mPanel_Labels/
  6. #6
    Many thanks for that link on inline renaming. Will try that out.

    By the way, tried the script you provided earlier, and unfortunately it did not work. I believe it was because the tab element that was having double click attached to it was an li element. I modified it slightly to find the a element instead and attach the double click event to that:

    var tabPanelRendered = function(tabPanel) {
        var numTabs = tabPanel.items.length, i;
    
        for (i = 0; i < numTabs; i++) {
            Ext.get(tabPanel.getTabEl(i)).select('.x-tab-right').on("dblclick", function() {
                Ext.Msg.alert("Click", "Click");
            });
        }
    }
    (The above can probably be optimized... still learning the ExtJS api!)

    Assuming the above script is invoked on the Render event of the TabPanel, e.g:

    <Listeners>
        <Render Fn="tabPanelRendered" Single="true" />
    </Listeners>
    (When attaching to the li, I think an exception was silently eaten up - this may have been a browser/dom thing, not sure.)
  7. #7
    Quote Originally Posted by anup View Post
    By the way, tried the script you provided earlier, and unfortunately it did not work.
    Hi,

    Here is an example demonstrating that Valdimir's script works:)

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <script type="text/javascript">
            var addDblclickListeners = function() {
                this.items.each(function(item, index) {
                    Ext.get(this.getTabEl(index)).on('dblclick', dblclickHandler); //Vladimir's script
                },
                this);
            }
    
            var dblclickHandler = function() {
                Ext.Msg.alert('dblclick', 'dblclick');
            }
        </script>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TabPanel runat="server">
            <Items>
                <ext:Panel runat="server" Title="Tab1" />
                <ext:Panel runat="server" Title="Tab2" />
                <ext:Panel runat="server" Title="Tab3" />
            </Items>
            <Listeners>
                <AfterRender Fn="addDblclickListeners" />
            </Listeners>
        </ext:TabPanel>
        </form>
    </body>
    </html>
  8. #8
    Hi again,

    Here is a sample code how the example that Vladimir mentioned can be applied to your requirements.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <script type="text/javascript">
            var bodyInit = function() {
                this.items.each(function(item, index) {
                    Ext.get(this.getTabEl(index)).on('dblclick', function(e, t) {
                        Editor1.startEdit(t);
                    },
                    null, {
                        delegate: "span.x-tab-strip-text"
                    });
                },
                this);
    
            };
    
            var beforeComplete = function(editor, value, startValue) {
                editor.setValue(editor.getValue());
                return true;
            };
    
            var complete = function(editor, value, startValue) {
                // Notify user the Editor value has changed.
                Ext.Msg.notify("Editor Changed",
                    String.format("<b>{0}</b><br />changed to<br /><b>{1}</b>", startValue, value));
            };
    
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TabPanel runat="server">
            <Items>
                <ext:Panel runat="server" Title="Tab1" />
                <ext:Panel runat="server" Title="Tab2" />
                <ext:Panel runat="server" Title="Tab3" />
            </Items>
            <Listeners>
                <AfterRender Fn="bodyInit" />
            </Listeners>
        </ext:TabPanel>
        <ext:Editor 
            ID="Editor1" 
            runat="server" 
            Shadow="None" 
            IgnoreNoChange="true">
            <Alignment 
                ElementAnchor="Left" 
                TargetAnchor="Left" />
            <Field>
                <ext:TextField 
                    runat="server" 
                    AllowBlank="false" 
                    Width="110" 
                    SelectOnFocus="true" />
            </Field>
            <Listeners>
                <BeforeComplete Fn="beforeComplete" />
                <Complete Fn="complete" />
            </Listeners>
        </ext:Editor>
        </form>
    </body>
    </html>
  9. #9
    Daniil,

    Many thanks. This time I got rid of my ".select('.x-tab-right')"

    And indeed it worked... Confused :) Maybe there was some other script erroring and I got it wrong.

    Also, thanks for your second example. Last night I actually did the same thing. Though with your example, I found that I could remove the delegate bit and it still seemed to work (at least with initial testing on FFx and IE7/8).

    So, instead of

            var bodyInit = function() {
                this.items.each(function(item, index) {
                    Ext.get(this.getTabEl(index)).on('dblclick', function(e, t) {
                        Editor1.startEdit(t);
                    },
                    null, {
                        delegate: "span.x-tab-strip-text"
                    });
                },
                this);
     
            };
    I seem to be able to get it to work with just this:

            var bodyInit = function() {
                this.items.each(function(item, index) {
                    Ext.get(this.getTabEl(index)).on('dblclick', function(e, t) {
                        Editor1.startEdit(t);
                    });
                },
                this);
            };
    So I think the double click aspect is certainly solved for me. Many thanks to you and Vladimir.
  10. #10
    Glad to help:)

    Quote Originally Posted by anup View Post
    Also, thanks for your second example. Last night I actually did the same thing. Though with your example, I found that I could remove the delegate bit and it still seemed to work (at least with initial testing on FFx and IE7/8).
    Yes, it also works. It's even better than with delegate. Not sure know why I set it:) In case with delegate "dblclickHandler" will be executed only if double click occurs on <span> element. In case without delegate it will be executed when double click occurs on any place of tab element.

    By the way do you know how to determine in code behind server version (for example, IIS6, IIS7, etc.) which page runs under? :)))

    It's related to
    http://forums.ext.net/showthread.php?12133

    If you have never faced to this please forget my question:)
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] CalendarPanel - Edit appoint with doubleclick
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 21, 2012, 2:02 PM
  2. [CLOSED] How to handle the Checkbox Check client event?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 08, 2012, 12:18 PM
  3. Replies: 10
    Last Post: Oct 03, 2010, 5:24 PM
  4. [CLOSED] Tree doubleclick (dblclick) event does not fire
    By jchau in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 01, 2010, 4:56 PM
  5. How to add a doubleclick event in texfield?
    By Barbar in forum 1.x Help
    Replies: 0
    Last Post: Oct 17, 2008, 12:58 PM

Tags for this Thread

Posting Permissions