I have a Ext.Tab,Panel where I have multiple tabs created dynamically.
Each of this tabs contains a Ext.panel.panel. What I need to do is to add a tooltip the the tab. I was trying to do something like this:
Ext.define('XXX.XXX.XXX.MyCustomPanel', {
extend: 'Ext.panel.Panel',
setTabTitle: function() {
title = 'some title';
try {
this.setTitle(title);
this.getHeader().getEl().set({
'data-qtip': title
});
} catch (e) {
}
}
Nevertheless, the tab is not the header so it is not applying the tooltip to the tab
Any idea
Edit:
Also found another way to do this:
this.tab.setTooltip('tool tip');
Thanks,
Each tab button is instance of Ext.tab.Tab class. When you creating new panel in tab panel, you can specify configuration for tab button by tabConfig option.
So in tabConfig option you easily specify tab tooltip by:
tabConfig: {
tooltip: 'Tooltip text'
}
This code create new Ext.Tab.Panel with two tabs which have defined tooltip and dynamicly create third one which also have tooltip:
var tabPanel = Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: Ext.getBody(),
items: [{
title: 'Foo',
tabConfig: {
tooltip: 'A Foo tab tooltip'
}
}, {
title: 'Bar',
tabConfig: {
tooltip: 'A Bar tab tooltip'
}
}]
});
var dynamiclyCreatedTab = Ext.create('Ext.panel.Panel',{
tabConfig: {
title: 'Dynamicly created tab',
tooltip: 'A Dynamicly created tab tooltip'
}
});
tabPanel.add(dynamiclyCreatedTab);
See fiddle: https://fiddle.sencha.com/#fiddle/1q8
Related
How do I add a text beside the icon in Extjs Panel tool type?
Example:
Below code displays print icon at top right corner of the Panel.
tools : [
{
type: 'print',
// text : 'Print document',
handler : function(){
Ext.Msg.alert('print', 'you clicked print icon');
}
}
]
I like it to render it as ["print icon" space "Print document"]
I don't think you can write a text to a tool (well you could "hack" it using CSS). But you can create custom header for your panel and put a button there.
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
height: 250,
width: 400,
header: {
title: 'My Panel',
items: [{
xtype: 'button',
text: 'Print Document',
iconCls: 'x-fa fa-print'
}]
}
});
Working fiddle https://fiddle.sencha.com/#view/editor&fiddle/1qit
We have a config iconAlign : String possible inputs are'top'
'right'
'bottom'
'left'`
I have a tabpanel as main container and attaching panels to it it as items dynamically when clicked. But my tabs only have title assigned to child items. How do I add a close button next to title and close tab when being clicked
You need to put one config closabe : true in your item whichever you want to close.
Here is example code.
Ext.tip.QuickTipManager.init();
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo',
closable : true
}, {
title: 'Bar',
closable : true,
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
When i click on a button i need to hide the edit toolbar from the tabpanel.
This is my tabpanel :
Ext.onReady(function(){
mainimgwidth = $("#imgMain").prop("width");
tabpanel = new Ext.TabPanel({
activeTab: 0,
deferredRender:false,
items: [
{
title : '${tr.File}',
items : [
fileTlb
]
},
{
id: 'editToolbar',
title: '${tr.Edit}',
items : [
editTlb
]
},
{
title: '${tr.Review}'
}
]
});
I tried this but i didnt work:
function remove(){
var edit = tabpanel.getComponent('editToolbar');
edit.setVisible(false);
}
I also tried to use : edit.hide();
This is the edit toolbar:
var editTlb = new Ext.Toolbar({
id:'edit_tlb',
items:[
new Ext.Toolbar.Button({
id:'btn_rotate_right',
iconCls: 'icon_rotate_right'
}),
new Ext.Toolbar.Button({
id:'btn_rotate_left',
iconCls: 'icon_rotate_left'
}),
new Ext.Toolbar.Button({
id:'btn_rotate_vertical',
iconCls: 'icon_rotate_vertical'
})
]
});
I believe you are looking for the method hide() This will hide the toolbar. To show the toolbar again use the method show().
Another option that you may see is disable/enable this makes the toolbar disabled but still visible.
Use edit.tab.show() and edit.tab.hide().
See the answer on How to hide tab in ExtJS 4 for an example from the Ext docs.
i am developing one project with ui as pure extjs. I am facing one problem i want to add my own status message to the tabpanel in extjs only. please help me.
Each Component extending Ext.Panel accepts a config option called bbar which is the bottom Ext.Toolbar. this can function as a statusbar for your TabPanel if you want to. Check the docs on Ext.Panel and Ext.Toolbar for more info.
new Ext.Panel({
title: 'Basic StatusBar',
items:[{
xtype: 'button',
text: 'a button',
}],
bbar: ['->', 'Status bar']
});
If you are looking for more functionality you could also check out the official Statusbar Extension which you can find the official ExtJS Examples on sencha.com
Can you run it from Firebug console an ExtJS included page. It is not a good way for this but, achieves your need.
// this function should be in a namespace as a method
var updateStatusMessage = function(msg){
var msgEl = document.getElementById('tabPanelStatusMessage');
if (msgEl) {
msgEl.innerHTML = msg;
}
// style rules of span should be given with a css class
return Ext.DomHelper.createDom({tag:'span', id:'tabPanelStatusMessage', style: 'position: absolute; right: 5px; top: 5px', html: msg })
}
new Ext.Window({
title: 'test window',
width: 600,
height: 400,
items: {
xtype: 'tabpanel',
activeTab: 0,
id: 'statusTabPanel',
items: [
{
title: 'test',
html: 'this is a demo tab panel item'
}
]
},
listeners: {
afterrender: function(){
Ext.select('#statusTabPanel .x-tab-strip-wrap').appendChild(updateStatusMessage('Lorem Ipsum Dolor Sit Amet'))
}
}
}).show();
// you can call updateStatusMessage function with a message to update the message
Is there a way to attach an OnClick event to a tab switch in EXTJS?
I make the grid like this:
var simple = new Ext.FormPanel({
labelWidth: '100%',
border:false,
width: '100%',
style:
{
height: '291px'
},
items: {
xtype: 'tabpanel',
activeTab: 0,
//labelWidth: 75, // label settings here cascade unless overridden
items:[{
url:'save-form.php',
title: 'Tab 1',
...
Thanks!
I added in a listener after the tabs were defined like this:
//define all tabs, and after the ] from the tab panel JSON:
listeners: {
'tabchange': function(tabPanel, tab) {
alert("tab changed");
}
}
This just alerts when the tab changed, which is sufficient for my purposes. I'm not sure though how to find out which tab is the current tab.
Hope this helps someone in the future.
There is a tabchange event that fires when the active tab changes: http://www.sencha.com/learn/Ext_FAQ_TabPanel
There is no event for tab click in TabPanel, however you can bind into click event on each tab. You can add custom event.
Following example help to you.
{
xtype : 'tabpanel',
items : [{
xtype : 'panel',
title: 'ABC'
},{
xtype : 'panel',
title : 'XYZ'
}],
listeners: {
render: function() {
this.items.each(function(panel){
// Added tabclick event for tabpanel
panel.tab.on('click', function(){
panel.addEvents('tabclick'); // addded event to panel
panel.fireEvent('tabclick', panel);
});
});
}
}
}