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.
Attachment 25509
Printable View
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.
Attachment 25509
Hello @Kerry!
At around the line that reads:
title : url,
Replace theurlvariable with the title you want to the tab.
Hope this helps!
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:
Attachment 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.
Hello again, @Kerry!
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).Quote:
Originally Posted by Kerry
For instance, to pass the value from the clicked menu entry, you can change the first lines of the client-side functionaddTab()to this:
And then pass the title along with the other info from the tab, for instance:Code:var addTab = function (tabPanel, id, url, tabTitle, menuItem) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id : id,
title : tabTitle,
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'sCode:<ext:MenuItem runat="server" Text="Ext.NET">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idClt', 'https://ext.net', 'Ext.NET', this);" />
</Listeners>
</ext:MenuItem>
IDto an unique word, and then you'd be able toApp.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!
I try your way before, but didn't work.
It's work.But I don't want URL to Tabtitle.
HTML Code: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.
HTML Code:<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>
Hello @Kerry!
You didn't add thetabTitleargument to the JavaScript function list of parameters.
I have addedCode:var addTab = function (tabPanel, id, url, >>>>>tabTitle,<<<<< menuItem) {
>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.
Hope this helps!
I get it.I am 'New'.I will continue to study hard!
Thank you for your patient reply.
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 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. You may not need, now, most of what it features, but when you do, you'd remember where to look.
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 ?
Attachment 25513
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 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.