How do I change the tooltip for a panel located in a tab panel? Originally, I created a tooltip using the tabtip parameter of the panel constructor as the panel was added to the tabpanel.
You need to grab the DOM element that represents your tab's tab strip. You can use tabPanel.getTabEl(tabID) to get the strip element. You can then grab the .x-tab-strip-text span and set its qtip property.
// be sure to set your tab's itemId
var tabPanel = new Ext.TabPanel({
items: [{
title: 'one tab',
tabTip: 'something',
itemId: 'firstTabID',
html: 'haha wooo'
}]
});
// later...
// .getTabEl grabs the tabstrip DOM element
// Ext.get converts it to an Ext.Element
Ext.get( tabPanel.getTabEl('firstTabID') )
// find its descendent span that contains the tab's title text
.child('span.x-tab-strip-text', true)
// and set the tool tip
.qtip = 'something completely different!';
I'd never changed tab tooltips before so I dug around the Ext.TabPanel source looking at how they set it. I learned something too :)
Related
I have a tabpanel as follows-
var topTab = Ext.create('Ext.tab.Panel', {
region: 'center'
});
I am adding tab items on click of a button
topTab.add(someGrid);
this works well. Only the issue is, this grid is not getting fit into the tab item. I want to set layout = 'fit' to this tab.
I tried adding
topTab.items[0].setLayout but it is not working. Also tried giving height to the grid.
Any suggestions. (Using ExtJs 6)
I have few Panels in my page, being created dynamically regarding the type of data that should be presenting.
I'd like to add checkbox to the title row of a particular panel. I identify this panel by it's properties (like it's name\ title and fields count).Then I add the checkbox like that:
newPanel.header.items = [
{
xtype: 'checkbox',
boxLabel: 'some text'
}
];
But for some reason, this checkbox is being render to all panels in the page.
I'm sure that the above code happening only once - I've put an alert to check that.
Can I avoid it and make the checkbox appears only on one specific panel?
Can someone point out that why checkbox appears in all of my dynamic panels there?
You should use the "add" method or the "setItems" method of the parent container (your header container I suppose), ie:
var myPanel = Ext.create('Ext.panel.Panel');
var myHeader = Ext.create('Ext.container.Container');
myPanel.add(myHeader);
myHeader.add({xtype: 'checkbox'});
Try below code
newPanel.getHeader().add({
xtype: 'checkbox',
boxLabel: 'Some Text'
});
Here is Fiddle for your reference.
I cannot see to get the buttons from an Ext.FormPanel defined like this:
Ext.apply({
....
buttons: [
{
text: 'Save',
itemId: 'btnSave'
}
]
});
I've tried getComponent on the FormPanel instance, but that doesn't return btnSave. Is btnSave on a different element than the rest of the form?
You can't use getComponent() because the buttons are not part of the items config.
getComponent() - "Examines this container's items property and gets a direct child component of this container."
You could give the button an id and then use Ext.getCmp() or use component query as #limscoder shows.
You should be able to use the container's "query" method to retrieve descendant components:
panel.query("#btnSave")
In Extjs 4.2, I had similar code to yours with buttons at the bottom of a window.
This worked for me:
var bbar = this.getDockedItems('toolbar[dock="bottom"]')[0];
var button = bbar.getComponent('btnSave');
The toolbar and items are not in your code but they are implied with buttons:[{}]
I have an Ext TabPanel, and I am trying to set the hidden property for one of the Tabs, programmatically. I am able to select the object and call methods such as disable() and enable() but so far have been unable to find a means by which I can manipulate the Tab's 'hidden' property.
The Tab is defined as
{
id: "view-task",
hidden: false,
title: "View"
}
and the code attempting to manipulate it
twin = ( Ext.getCmp('view-task'));
twin.disable();
The above call to disable works, so the component is being correctly selected but I do not know how to manipulate the hidden property.
Any assistance will be much appreciated.
N. Euzebe
Try this:
var tabs = Ext.createWidget('tabpanel', {
items: [{
itemId: 'home',
contentEl:'script',
title: 'Short Text',
closable: true
}]
});
tabs.child('#home').tab.hide();
You can find this code in examples on the API page
You haven't explained which version of ExtJS you're using. But in version 3.x you can do the following (I don't know, but it might also work in ExtJS 4.x):
var tabPanel = Ext.getCmp('myTabPanel');
var tabToHide = Ext.getCmp('myTab');
tabPanel.hideTabStripItem(tabToHide);
To show the tab again:
tabPanel.unhideTabStripItem(tabToHide);
Hope this helps you :)
I have a regionContent panel which I add to my viewport.
How can I replace its content with new content?
...
var regionContent = new Ext.Panel({
id: 'contentArea',
region: 'center',
padding:'10',
autoScroll: true,
html: 'this is the original content'
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [ regionMenu, regionContent ]
});
var newPanel = new Ext.Panel({
region: 'east',
title: 'Info Panel',
width: 300,
html: 'this is a panel that is added'
});
// regionContent.update(newPanel); //renders as javascript code ???
// regionContent.remove(...) //how do I remove ALL CONTENT, I will not know what is in this panel to remove it specifically
regionContent.add(newPanel); //adds to original content but does not replace it
regionContent.doLayout();
...
.update() does this:
.add() does this:
You'll want to use a panel with card layout:
var card=new Ext.Panel({
layout:'card',
activeItem:0,
items:[ regionContent , newPanel ]
});
That panel can then go inside your viewport. To switch between them you'll use something like this:
card.getLayout().setActiveItem(1);
Take a look at the two card layouts for working examples:
http://dev.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html
You cannot remove the HTML using .remove(), because it's not considered an item of a panel. So you need to use .update() to get rid of that HTML, and then add your new panel.
// clear the html by replacing it with an empty string.
// calling update with no arguments would work as well.
regionContent.update('');
// add the new component
regionContent.add(newPanel);
// redraw the containing panel
regionContent.doLayout();
From your screenshot, it looks like you may have used .update() by passing in the new panel, e.g., .update(newPanel). That method is used to update HTML, not replace components. To go the opposite way:
regionContent.removeAll(); // if you want to remove all the items
regionContent.update('this is the original content');
regionContent.doLayout();
Did you really use the solution you posted to solve this exact problem? For me clearExtjsComponent() leaves the HTML string "This is the original content" behind, just like in your screenshot.
Ext.getCmp('content-panel').body.update(record.get('id'));
This will really work
Here's how I solved this:
function clearExtjsComponent(cmp) {
var f;
while(f = cmp.items.first()){
cmp.remove(f, true);
}
}
then when I want to replace the content of a panel with new content, I use this:
function replaceComponentContent(cmpParent, cmpContent) {
clearExtjsComponent(cmpParent);
cmpParent.add(cmpContent);
cmpParent.doLayout();
}