Tooltip width is not enough to display text inside it. So how can i increase the width of tooltip ? Here is my code:
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
Ext.create('Ext.tab.Panel', {
width : 500,
height : 200,
style : 'margin: 50px',
renderTo : Ext.getBody(),
items : [{
title : 'Tab One'
}, {
title : 'Tab Two',
tabConfig : {
tooltip : {
text : 'Hello tab one... This is James cook. How r u doing.:)',
title : 'Tooltip Header'
}
}
}, {
title : 'Tab Three'
}]
});
});
I have used:
div.x-tip {
width: 300px !important; height: 100px !important;
}
Width is increasing but tooltip text is not adjusting to the width. I want to make tooltip text a single line. Any idea on this..??
Thanks in advance.
You can also just set a width property in the tip object.
tooltip : {
text : 'Hello tab one... This is James cook. How r u doing.:)',
title : 'Tooltip Header',
width: 100
}
You can overload:
div.x-tip {
width: 300px !important;
}
I confirmed this just now on a button with the tooltip property in ExtJS 4.2
The way that I uncovered this was pretty simple. I simply ran a grep inside of the ext/css directory for "tip" on all css files to discover what the DOM element would be (or you could simply examine the DOM yourself in the browser after showing at least one tooltip. Once you have that, you can target any of the sub-components in the hierarchy as you need to; in order to ensure that your text doesn't get clobbered.
I do wonder why the auto-sizer isn't working for this renderer but that's probably a question better asked of Sencha support.
Related
i'm new of Extjs; i have a panel with the item "collapsible: true" and it works fine but...
when my specific condition is true, i want to collapse the panel, and i want to disable the button used to expand it (therefore the panel doe not show anymore, even if the click is made).
It's possible do it?
I want a type of override method that doing other things, for example to show a div with few specific information in the page.
I use only javascript and Extjs.
thanks in advance and happy holidays
I added a bindable version
Fiddle
Using databinding to collapsible, you might also add the binding to the collapsed param
Please see my snippet. Can it resolve your issue ? Tell me if you have any question.
https://fiddle.sencha.com/fiddle/1fk9
Ext.application({
name : 'Fiddle',
launch : function() {
var parent = Ext.create('Ext.container.Container', {
title : 'Demo',
renderTo : Ext.getBody(),
layout : 'vbox',
items : [{
xtype : 'checkbox',
fieldLabel : 'Enable collapsible',
handler : function(self, v){
var panel = parent.down('panel');
panel.collapseTool.setVisible(v);
panel.getHeader().down('tool[type=up]').setVisible(!v);
},
checked : true
}, {
xtype : 'panel',
width : 500,
height : 400,
title : 'Collapsible demo',
collapsible : true,
tools : [{
type : 'up',
hidden : true
}]
}]
});
}
});
this.horizontalLine = {
xtype: 'box',
hidden: false,
autoEl : {
tag : 'hr'
}
};
I want to hide this horizontal line. But
this.horizontalLine.hide()
is undefined.
I tried using this.horizontalLine.hidden = true also. In that case, hidden property is set as true but the line is still visible. Is there some other way to do this?
I resolved the issue by placing the horizontal line in a panel and hiding the panel insted.
this.rulesLabel = new Ext.form.Label({
text : 'Rules:',
style : 'font-size:11px;font-weight:bold;color:#15428B;padding-right:10px;padding-top:50px; margin-left:10px;'
});
this.horizontalLine = {
xtype: 'box',
autoEl : {
tag : 'hr'
}
};
this.lineHolder = new Ext.Panel({
id: 'lineHolder',
hidden : true,
border: false,
layout : 'form',
bodyStyle : 'padding-top:10px;',
items : [{xtype: 'box'},this.rulesLabel, this.horizontalLine]
});
I used this.lineHolder.show() and this.lineHolder.hide() to show and hide the line respectively.
Have you tried this.horizontalLine.hidden = true;
Ext.Component has a hide() method, so your code should work.
See a working example: https://fiddle.sencha.com/#fiddle/ku7
I have a splibutton with a menu item. I want to make the width of the drop down equal to the split button width. Additionally I want to align the text in the center. How should I do it?
The width of the menu will be based on the width of the content inside. So if the width of the button will always be the same, you could set the width of the menu to that same value or you can get the width of the button and set it to the menu before rendering it.
As for centering the text, you have two options. Either via CSS, add a custom CLS to your menu and add the following CSS:
.yourCustomCls .x-menu-item-link {
text-align: center;
}
.yourCustomCls .x-menu-item-indent-no-separator {
margin-left: 0;
}
Or add the config plain: true to your menu and a style centering the text as in my example.
Example:
Ext.create('Ext.button.Split', {
renderTo: Ext.getBody(),
text: 'Commit Automatically',
menu: new Ext.menu.Menu({
plain: true,
style: 'text-align: center;',
items: [
{text: 'Commit On Trigger', handler: function(){ alert("Item 1 clicked"); }}
],
listeners: {
beforerender: function () {
this.setWidth(this.up('button').getWidth());
}
}
})
});
What is the offset configuration actually doing that makes panel 2 to show incompletely when the panel 1 is resized vertically?
Ext.onReady(function(){
var myWin = Ext.create('Ext.window.Window',{
height : 300,
width : 300,
layout : 'anchor',
border : false,
anchorSize : 400,
items : [
{
title : 'panel 1',
anchor: '-50, -150',
frame : true
},
{
title : 'panel 2',
anchor: '-10, -150', // how is this config working?
frame : true
}
]
});
myWin.show();
});
https://fiddle.sencha.com/#fiddle/64r
Thanks in advance.
from ExtJS docs...
// two values specified
anchor: '-50 -100' // render item the complete width of the container
// minus 50 pixels and
// the complete height minus 100 pixels.
// one value specified
anchor: '-50' // anchor value is assumed to be the right offset value
// bottom offset will default to 0
So possibly you're resizing the window to a size smaller than 150 (that is 300 - the specified anchor) pixels.. so "the complete height minus 150 pixels" will actually result in cropping of the item inside that container.
It would be much better to see some example of what you're trying to achieve and a fiddle of how it's working now though.
EDIT
You're setting the height of both components to be "the size of the window" minus some fixed amount (50) of pixels. If the window grows to 500 pixels "tall" then you get two panels that are 450 pixels tall. That's why the second panel always overflows the window.
It's all in the portion of docs that I posted earlier though. You may want to try some other layouts too, maybe nested layouts, for example: an anchor layout inside an hbox layout.
Ext.create("Ext.Window", ({
height : 300,
width : 300, items : [
{
title : 'Panel1',
anchor : '-50, -150',
frame : true
},
{
title : 'Panel2',
anchor : '-10, -150',
frame : true
}
]
}));
Panel1 Width = 288px - 50px = 238px
Panel1 Height = 285px - 150px = 135px
Panel2 Width = 288px - 10px = 278px
Panel2 Height = 285px - 150px = 135px
I am trying to set image of a button but its not covering the whole button. I mean, background of button is still visible.
I am trying to do it at run time by providing different image for each button in a loop.
Here it is:
for(var i=0; i<tvStore.getCount(); i++)
{
var aButton = Ext.create('Ext.Button',
{
margin:8,
id:'button'+i,
itemId:i,
style: 'width: 110px;height:110px;background-image:url(someRandomWebURLToImage) !important',
But image is not covering all the button. or if image cannot be stretched then how can I make the button's background transparent?
Thanks,
You can use iconCls attribute to specify CSS like this:
{
xtype : 'button',
iconCls : 'cart',
text : 'Add to Cart',
iconMask : true,
padding : 10,
margin : 10,
id : 'addToBagBtn'
}
and CSS file should have:
.x-tab .x-button-icon.cart, .x-button .x-button-icon.x-icon-mask.cart {
-webkit-mask-image: url('../../touch/resources/themes/images/default/pictos/shop1.png');
}