[CLOSED] Change title of tab by double clicking on it. In our case we will change region name.

[alscg]

Hello, we are receiving an error when double clicking on tab panel. This is similiar to the post below, however we are using V2 and reeing the following error:0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'on': object is null or undefined.

Post:http://forums.ext.net/showthread.php...ck-in-tabpanel

This is also very important, please advise a fix for Version 2.

[Vladimir]

You can use the followig method

var onRender = function () {            
            this.tab.el.on(
                'dblclick',
                function () {
                    this.ownerCt.remove(this, true);
                },
                this
            );
        }

[alscg]

The code given in reply of forum post is working properly. But we need a way to change the title of a tab per this requirement:

Requirement : User double clicks on tab title. The title text should get highlighted in textfield and user will put new text. The textfield should occur at the title field. After enter or click in other area new text would be set as title.


We have it working with this code but it is static. We need the value to be persisted when the user moves focus off of tab.

var onRender = function () {
                this.tab.el.on(
                    'dblclick',
                    function () {
                        
                        this.tab.text = "New Title";
                    },
                    this
                );
            }

[Daniil]

Hi,

Please look at this example.
https://examples2.ext.net/#/Editor/Basic/Overview/

I think it is possible to use an Editor in your case.

[alscg]

Hi,

Please look at this example.
https://examples2.ext.net/#/Editor/Basic/Overview/

I think it is possible to use an Editor in your case.

I am using Label Editor as shown in above example with following javascript function :

var complete = function (editor, newTitle, oldTitle) {
                Ext.Msg.notify("Title Changed",
                    Ext.String.format("<b>{0}</b><br />changed to<br /><b>{1}</b>", oldTitle, newTitle));
                #{orgLevelsTabPanel}.getActiveTab().title=newTitle;                
                #{orgLevelsTabPanel}.getActiveTab().reload(true);
            };

This code works properly, new title text gets set to current title in debugging but when i reload current tab the new title text does not get set.

All the tabs are generated dynamically in page_load event.

Can you suggest where am i going wrong or any need of code?

[Daniil]

Please wrap the code in [CODE] tags.
Forum Guidelines For Posting New Topics
More Information Required

[alscg]

I am using Label Editor as shown in above example with following javascript function :

var complete = function (editor, newTitle, oldTitle) {
                Ext.Msg.notify("Title Changed",
                    Ext.String.format("<b>{0}</b><br />changed to<br /><b>{1}</b>", oldTitle, newTitle));
                #{orgLevelsTabPanel}.getActiveTab().title=newTitle;               
                #{orgLevelsTabPanel}.getActiveTab().reload(true);
            };

This code works properly, new title text gets set to current title in debugging but when i reload current tab the new title text does not get set.

All the tabs are generated dynamically in page_load event.

Can you suggest where am i going wrong or any need of code?

[Baidaly]

Hello!

I didn't quite understand what do you mean under reload. Do you mean that after page refresh your tabs' titles haven't been saved?

P.S. Please note that there is no need to create a new post if you just need to wrap the code in [CODE] tags. In the future please use the Edit Post button and just edit an existing post. This statement is described here in #3.
More Information Required

Please do read these guidelines I mentioned.

[alscg]

This is the demo code :

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

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

<!DOCTYPE html>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        for (int counter = 0; counter < 2; counter++)
        {
            string tabName = "tab" + counter;
            Ext.Net.Panel panelTab1 = new Ext.Net.Panel();
            panelTab1.ID = "panel" + counter;
            panelTab1.Title = tabName;
            panelTab1.Closable = true;

            Ext.Net.Label titleLabel = new Ext.Net.Label();
            titleLabel.Text = tabName;
            titleLabel.Cls = "editable";
            titleLabel.OverCls = "editable-over";
            titleLabel.Icon = Icon.NoteEdit;

            Ext.Net.Editor titleLabelEditor = new Ext.Net.Editor();
            titleLabelEditor.HideEl = false;
            titleLabelEditor.Shadow = false;
            titleLabelEditor.IgnoreNoChange = true;
            titleLabelEditor.Listeners.Complete.Fn = "complete";
            titleLabelEditor.AutoSizeConfig = new Ext.Net.EditorAutoSize();
            titleLabelEditor.AutoSizeConfig.Width = EditorAutoSizeDimension.BoundEl;
            titleLabelEditor.AlignmentConfig = new Ext.Net.EditorAlignmentConfig();
            titleLabelEditor.AlignmentConfig.ElementAnchor = AnchorPoint.TopLeft;
            titleLabelEditor.AlignmentConfig.TargetAnchor = AnchorPoint.BottomLeft;

            titleLabel.Editor.Add(titleLabelEditor);

            panelTab1.Loader = new ComponentLoader();
            panelTab1.Loader.Controls.Add(titleLabel);
            panelTab1.Loader.ID = "loader" + counter;
            panelTab1.Loader.Url = "http://www.ext.net/";
            panelTab1.Loader.Mode = LoadMode.Frame;
            panelTab1.AddTo(this.orgLevelsTabPanel);
            panelTab1.LoadContent();
            panelTab1.Render(true);
            this.orgLevelsTabPanel.SetActiveTab(panelTab1.ID);
        }
    }
</script>

<html>
<head id="Head1" runat="server">
    <title>Dynamic Tab Control</title>
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <style>
        .editable {
            font: 14px Tahoma;
            padding: 3px 5px;
            cursor: pointer;
            margin-bottom: 20px;
        }

        .editable-over {
            background-color: #ffc;
        }
    </style>
    <ext:XScript ID="XScript1" runat="server">
        <script>
            var complete = function (editor, newTitle, oldTitle) {
                debugger;
                Ext.Msg.notify("Title Changed",
                    Ext.String.format("<b>{0}</b><br />changed to<br /><b>{1}</b>", oldTitle, newTitle));
                #{orgLevelsTabPanel}.getActiveTab().title = newTitle;                
                #{orgLevelsTabPanel}.getActiveTab().reload(true);
            };
        </script>
    </ext:XScript>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:TabPanel ID="orgLevelsTabPanel" DeferredRender="false" runat="server" Height="600" Region="Center">
        </ext:TabPanel>
    </form>
</body>
</html>

I need to change tab title by changing Label Editor's text. Tab & Label Editor are generated dynamically. I have seen that new text can be assigned to active tab title but after current tab reload new text doesn't appear at tab title.

Please refer attached image.

[Daniil]

Please replace

#{orgLevelsTabPanel}.getActiveTab().title = newTitle;

with

#{orgLevelsTabPanel}.getActiveTab().setTitle(newTitle);