PDA

View Full Version : In examples "Add tabs" ,how can I custom title?


Kerry
Mar 05, 2021, 6:33 AM
in this examples : https://examples5.ext.net/#/TabPanel/Basic/Add_Tabs/

How can I custom title for each of tab ? Not only to show the url. Thank you.
25509
fabricio.murta
Mar 06, 2021, 5:46 PM
Hello @Kerry!

At around the line that reads:

title : url,

Replace the url variable with the title you want to the tab.

Hope this helps!
Kerry
Mar 07, 2021, 11:25 PM
I am sorry, I hadn’t made myself fully clear.
title : url,
Only can set the fixed for title, right?
What I want is set each title for each tab by myself.
like:
25510

If tab1 is "google.com", I can set tab title is"GG" or tab2 is "Baidu.com" I can set title is"BaiDu". Can I do that?
Thank you very much.
fabricio.murta
Mar 08, 2021, 3:26 PM
Hello again, @Kerry!


Only can set the fixed for title, right?

It's not fixed, it is a variable. You need, of course, to get the "GG" or "BaiDu" information off somewhere (like, having an object or array mapping a domain name to a frienly name, or passing in the value).

For instance, to pass the value from the clicked menu entry, you can change the first lines of the client-side function addTab() to this:



var addTab = function (tabPanel, id, url, tabTitle, menuItem) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id : id,
title : tabTitle,


And then pass the title along with the other info from the tab, for instance:



<ext:MenuItem runat="server" Text="Ext.NET">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idClt', 'https://ext.net', 'Ext.NET', this);" />
</Listeners>
</ext:MenuItem>


It is also possible to change the tab title after it is added. For that you'd need to add logic to find the tab's ID to an unique word, and then you'd be able to App.ID.setTitle("New Title").

It would get a little more complex but it is, of course, possible to get any tab by something unique pertaining it (like the URL it loads) and then assign a title, it is up to you and the view you need to build.

Hope this helps!
Kerry
Mar 08, 2021, 11:15 PM
I try your way before, but didn't work.

It's work.But I don't want URL to Tabtitle.

title:url
<Click Handler="addTab(#{TabPanel1}, 'idClt', 'BasicS.aspx', this);" />


When I using your code and click the menu, It's nothing show on the tab.Could you help me to check my code, Please?
Thank you so much.


<ext:XScript runat="server">
<script>
var addTab = function (tabPanel, id, url, menuItem) {
var tab = tabPanel.getComponent(id);

if (!tab) {
tab = tabPanel.add({
id: id,
title: tabTitle,
closable: true,
menuItem: menuItem,
loader: {
url: url,
renderer: "frame",
loadMask: {
showMask: true,
msg: "Loading " + url + "..."
}
}
});

tab.on("activate", function (tab) {
#{ MenuPanel1 }.setSelection(tab.menuItem);
});
}

tabPanel.setActiveTab(tab);
}
</script>
</ext:XScript>

</head>
<body>
<form id="form1" runat="server" >
<ext:ResourceManager ID="ResourceManager1" runat="server" />




<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:Panel ID="Panel3"
runat="server"
Title="Payroll System"
Region="West"
Layout="AccordionLayout"
Width="225"
MinWidth="225"
MaxWidth="400"
Split="true"
Collapsible="true">
<Items>

<ext:MenuPanel ID="MenuPanel1" runat="server" Title="Working" SelectedTextCls="bold-highlight" Icon="ArrowSwitch">
<Menu ID="Menu1" runat="server">
<Items>

<ext:MenuItem runat="server" Text="Ext.NET">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idClt', 'BasicS.aspx','BS', this);" />
</Listeners>
</ext:MenuItem>

<ext:MenuSeparator />

<ext:MenuItem runat="server" Text="Ext.NET forums">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idGgl', 'WIP.aspx', 'WIP',this);" />
</Listeners>
</ext:MenuItem>

<ext:MenuSeparator />

<ext:MenuItem runat="server" Text="Sencha">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idExt', 'http://www.sencha.com', 'Test',this);" />
</Listeners>
</ext:MenuItem>
</Items>
</Menu>
</ext:MenuPanel>

<ext:MenuPanel runat="server" Title="system2" SelectedTextCls="bold-highlight" Icon="ArrowSwitch"/>
</Items>
</ext:Panel>

<ext:TabPanel ID="TabPanel1" runat="server" Region="Center" />




</Items>
</ext:Viewport>


</form>
</body>
</html>
fabricio.murta
Mar 09, 2021, 5:47 PM
Hello @Kerry!

You didn't add the tabTitle argument to the JavaScript function list of parameters.



var addTab = function (tabPanel, id, url, >>>>>tabTitle,<<<<< menuItem) {


I have added > and < characters to highlight the missing part of your code. Please don't add these characters to the current code or it's going to stop working.

In case you didn't know you needed to add that text to the file, I believe it may be a good idea to review a JavaScript language development course to get a hang on what you should do with client-side code and what to expect from them. If that's the case a good starting point would be this w3schools article: JavaScript Functions - W3Schools.com (https://www.w3schools.com/js/js_functions.asp).

Hope this helps!
Kerry
Mar 09, 2021, 11:17 PM
I get it.I am 'New'.I will continue to study hard!
Thank you for your patient reply.
fabricio.murta
Mar 10, 2021, 1:20 AM
Glad it helped, good luck learning these technologies!

While we can't really help much with basic JavaScript and C# or VB.NET, this forums as well as our examples explorer (https://examples5.ext.net) are a great source of information and examples to a vast diversity of options and scenarios you could model with Ext.NET to ease a bit the steep learning curve involved in JS and C#/VB.

So most questions you will have are very likely to already be answered via examples or threads here, so a good search in our resources may prove fruitful more often that one would expect.

I strongly suggest you to take your time and browse thoroughly thru our online examples (https://examples5.ext.net). You may not need, now, most of what it features, but when you do, you'd remember where to look.
Kerry
Mar 10, 2021, 4:47 AM
Unfortunately, I can't search on the top search box. I can't use google in China.
And than I try to search forums in single and multiple,but showing this.
Did I miss something ?

25513
fabricio.murta
Mar 10, 2021, 10:02 PM
Hello again @Kerry!

Sorry you can't use google to search. But you are probably going to be able to get good results with forums internal search as you shown. Just fill the keywords field and not the tag one. We seldom use tags in the threads here so that's not going to be very useful.

It may take a few attempts until you find the right keywords for what you're looking for, but that's just the same when google-searching.

The Examples explorers (https://examples5.ext.net) also support search, and that's no google-based, so you should also be able to find nice examples on what you need by searching therein.
Kerry
Mar 10, 2021, 10:46 PM
Thanks for your help.