PDA

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



alscg
Jan 22, 2013, 7:31 PM
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?14483-How-to-close-tab-on-dblclick-in-tabpanel

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

Vladimir
Jan 22, 2013, 9:36 PM
You can use the followig method


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

alscg
Jan 23, 2013, 12:43 PM
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
Jan 23, 2013, 1:30 PM
Hi,

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

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

alscg
Jan 24, 2013, 12:52 PM
Hi,

Please look at this example.
http://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
Jan 24, 2013, 2:07 PM
Please wrap the code in [CODE] tags.
Forum Guidelines For Posting New Topics (http://forums.ext.net/showthread.php?3440)
More Information Required (http://forums.ext.net/showthread.php?10205)

alscg
Jan 24, 2013, 3:28 PM
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
Jan 25, 2013, 1:42 AM
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 (http://forums.ext.net/showthread.php?10205)

Please do read these guidelines I mentioned.

alscg
Jan 25, 2013, 2:14 PM
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.5478

Daniil
Jan 25, 2013, 3:00 PM
Please replace

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

#{orgLevelsTabPanel}.getActiveTab().setTitle(newTi tle);

alscg
Jan 28, 2013, 8:00 AM
Thank you Daniil.

.setTitle(newTitle) function solved my problem. And i dont need to reload the tab.

In post #9 I have called another url using loader of panel.

Also I am putting Label Editor for each tab.

But the Label Editors are set at the bottom of TabPanel and all the Label Editors are visible for all tabs.

I want only one Label Editor inside the particular tab.

Is there any way to put Label at top left corner of tab? It should be within tab.

Daniil
Jan 28, 2013, 10:10 AM
Do you want to put an editor near a tab? I think it might be too complicated.

I would organize editing on tab click (or double click).

The Editors example that I mentioned should help.

By the way, there is an interesting example for Ext.NET v1.
http://forums.ext.net/showthread.php?14420

I think it won't work with Ext.NET v2 because of breaking changes, but can give some ideas.

alscg
Jan 28, 2013, 1:27 PM
Do you want to put an editor near a tab? I think it might be too complicated.


Not near a tab but i want Label Editor inside a tab.

For ex. I am rendering User Control in each tab then i want Label Editor to be placed above the User Control. In this way each tab would have its own Label Editor & a User Control.

Please refer attached image. 5487

First i will go for Label Editors way inside tab but if you are saying it might be difficult to place it then i should have to think about previous way i.e. on double click of tab title.

Daniil
Jan 28, 2013, 2:19 PM
Maybe, you could organize the thing something like this.


<ext:Container runat="server"> <%-- with a respective layout manager --%>
<Items>
<ext:Container runat="server">
<%-- Labels with editors --%>
</ext:Container>
<ext:Container runat="server">
<%-- User Control Content --%>
</ext:Container>
</Items>
</ext:Container>

As another approach you could set up Floating to true for the Labels and position them manually as needed.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-floating

alscg
Jan 29, 2013, 1:48 PM
Thanks for the clue of Container.

Using Container i can set Label Editor inside the tab using following code :



<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
for (int counter = 0; counter < 4; 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);

Container labelEditorContainer = new Container();
labelEditorContainer.Items.Add(titleLabel);

Container dragDropContainer = new Container();
dragDropContainer.Loader = new ComponentLoader();
dragDropContainer.Loader.Controls.Add(titleLabel);
dragDropContainer.Loader.ID = "loader1" + counter;
dragDropContainer.Loader.Url = "http://www.ext.net/";
dragDropContainer.Loader.Mode = LoadMode.Frame;
dragDropContainer.Loader.DisableCaching = true;
dragDropContainer.ID = "dragDropContainer" + counter;
dragDropContainer.Height = 710;
dragDropContainer.Width = 1370;

Container tabContainer = new Container();
tabContainer.Items.Add(labelEditorContainer);
tabContainer.Items.Add(dragDropContainer);
tabContainer.ID = "tabContainer" + counter;

panelTab1.ContentContainer.Controls.Add(tabContain er);
panelTab1.AddTo(this.orgLevelsTabPanel);

if (counter == 0)
{
dragDropContainer.LoadContent();
panelTab1.Render(true);
this.orgLevelsTabPanel.SetActiveTab(panelTab1.ID);
}
}
}
</script>


But now the problem is all tabs are get loaded simultaneously as i am using dragDropContainer.Loader in above code which is a Loader inside panelTab1.

And when i use following code :


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);

then my each tab get loaded only when i click on it as Loader is of panelTab1.

Can you please suggest?

Daniil
Jan 29, 2013, 2:44 PM
These methods should not be called during initial Page_Load (not an AJAX request).

panelTab1.AddTo(this.orgLevelsTabPanel);

Please replace with:

this.orgLevelsTabPanel.Items.Add(panelTab1);


dragDropContainer.LoadContent();

Defautl AutoLoad="true" of the Loader should be enough.


panelTab1.Render(true);

I think it should be removed ad all.


this.orgLevelsTabPanel.SetActiveTab(panelTab1.ID);



It will be an active tab if it is the first one in the TabPanel. If no, please set up its ActiveTabIndex.

The above methods should be called during AJAX requests only.

P.S. I would recommend you to read the Ext.NET Web Application Development book. You will learn Ext.NET with ease.
http://www.ext.net/2012/12/04/new-book-ext-net-web-application-development/