I'm using ExtJS 5 and am having some issues with tooltip positioning. Specifically, when I have a button in the bottom right corner of the page, the tooltip covers the entire button itself.
I've tried using the anchorTo property but it doesn't seem to affect anything. Trying to figure out how I can position the tooltip above the button instead of right on top of it. I'm sure there's an easy solution - any help would be greatly appreciated. Thanks.
See fiddle here: https://fiddle.sencha.com/#fiddle/j94
You can try by adding this attribute -
tooltipType: 'title'
here..
bbar: {
items: ['->', {
text: 'My Button',
tooltip: 'tooltip positioned on top of button',
tooltipType: 'title'
}]
}
Here's what it says in the doc - http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.button.Button-cfg-tooltipType
qtip will work if you've more space below the button, in your fiddle there is no space available to draw your qtip over the button. You can check it by changing the layout to form -
layout: 'form'
or by adding padding as
padding: '20 20 20 20',
to your fit layout
I was able to get it to work by inspecting the inner workings for the tooltip mechanism and adding a 'mouseOffset' array:
tooltip: {
text: 'tooltip positioned on top of button',
mouseOffset: [0,-60]
}
Related
I have set a button like this:
xtype: 'button',
icon: 'icons/money_add.png',
text: 'Details',
iconAlign: 'left',
scale: 'small',
I need to change the icon, iconAlign and scale based on some conditions
I managed to change the icon and the scale like this:
buttonPath('#buttonId').setIcon('icons/newIcon.png');
buttonPath('#buttonId').setScale('large');
I need to change the iconAlign from letf to top but it is not working
I have tried
buttonPath('#buttonId').setIconAlign('top');
and it didn't work. Is there any way to change it ?
The button properies you mentioned are bindable. Here is an example of using binding to change the values of buttons. I bind to a boolean for hiding and showing buttons, makes it easy to make the buttons active based on other rules so you don't have to find the button and call a method when something in your app changes.
Button Properties and Binding
I'm trying my hands on extjs 4 by trying to recreate some component I have in an old extjs 2 project.
One of the component was creating a floating toolbox (like you get with photoshop) with a thin border and no title or min/max/close buttons. Like so..
In ext4 , I can't seem to be able to reproduce that same result. Here's what the same code looks like in ext 4:
This is the code I had:
app.Toolbox = Ext.extend(Ext.Window, {
,initComponent : function()
{
Ext.apply(this,{
closable:false,
border:false,
width:345,
height:60,
onEsc:Ext.emptyFn,
resizable:false,
x:20,
y:20,
items:[
/* icons (a html items) */
]
});
app.Toolbox.superclass.initComponent.call(this, arguments);
}
/* handlers, methods, etc */
});
Is there any way to get a similar result in ext 4?
I tried using some css to hide some elements like the title bar, but ext 4 always calculates the height of the window as if the element was visible, which looks even weirder.
Any idea?
Ext.panel.Header is just an extended Ext.container.Container so you can do as you wish to it.
I think the closest you're going to get is by applying frame: true which kind of forces the content to fill the window frame.
However, it doesn't seem to work if you have a Close button in the top right.
Ext.create('Ext.window.Window', {
height: 60,
width: 345,
closable: false,
layout: 'fit',
frame: true,
items: {
html: '<p>hello</p>'
}
}).show();
You're still going to have to style it a little, but its far closer to what you need.
I have a toolbar like this:
tbar : {
xtype: 'toolbar',
tooltip: 'Right click to clear',
items: [
{
xtype: 'form',
padding: 2,
height:25
}]
}
My tooltip does not show up. I have done QuickTips.init(). Also, is it possible to include some dynamic text in the tooltip?
In your code, you are attempting to put a toolbar inside of a toolbar. Are you sure that is really what you are trying to do?
Your tooltip probably does not work because tooltip is not a valid property of the toolbar object.
As for dynamically altering the tooltip text, you have the getText(string) method.
According to the ExtJS API documentation, Toolbar does not have a tooltip property. In order to use the tooltip, you'll need to apply the tooltip directly to an HTML element, or use the tooltip on a valid, supported object.
I have a combobox inside of a ext.panel, inside of an ext.window. When I click the down arrow to show the possible SELECT options, the options pop up at the top-left of the browser window, instead of below the SELECT box. The funny thing is if I attach the drugDetailsPanel (see code below) to a div on the page (instead of inside an ext.window), the combobox works correctly. This also happens when I change ext.panel to ext.form.formpanel, by the way.
Any ideas?
My code:
drugDetailsPanel = new Ext.Panel({
layout:'form',
id:'drug-details-panel',
region:'center',
title:'Drug Details',
height:200,
collapsed:false,
collapsible:false,
items:[
new Ext.form.ComboBox({
fieldLabel:'What is the status of this drug?',
typeAhead:false,
store:drugStatusStore,
displayField:'lookup',
mode:'remote',
triggerAction:'all',
editable:false,
allowBlank:false,
emptyText:'Select a status..',
name:'/drug/drug-status',
id:'drug-status'
})
]
});
newDrugWindow = new Ext.Window({
title: 'Add Drug',
closable:true,
width:650,
height:650,
//border:false,
plain:true,
layout: 'border',
items: [drugDetailsPanel],
closeAction:'hide',
modal:true,
buttons: [
{
text:'Close',
disabled:false,
handler: function(){
newDrugWindow.hide();
}
},
{
text:'Save Drug',
handler: function(){
newDrugDialog.hide();
}
}]
});
Try to add shim: true to combo-box control.
Older versions of Ext had issues like this in certain browsers (FF 2.x) in certain situations dealing with nested positioning, the specifics of which escape me now. If that's the case, search the Ext forums for more info. If not, then I'm not sure...
This forum thread helped me: http://www.sencha.com/forum/showthread.php?177677-IE-displays-combobox-dropdown-in-the-top-left-corner-of-browser-window
Just give the combobox a (unique) name. Giving the combobox an inputId should also help
Seems like IE does not respect the position of the element if it does not have an explicit name/inputId. This thread goes more deeply into it: http://www.sencha.com/forum/showthread.php?154412-Combo-Box-options-appears-in-Top-Left-Corner-in-IE-9
Inside my FormPanel , I have a fieldset with a layout of 'column'.
I have tried several different config properties but i cannot get the label for my textfield to work. It just renders the textbox without a label.
(Obviously, if i make the layout type 'form', i have no issues). The text for the checkboxes shows fine, but the textbox label does not. Can someone point out what is wrong ?
thanks!
xtype:'fieldset',
title:'Transaction Status',
layout: 'column',
style:'margin:5px;'
,height:125//or:'-20', allowBlank:false}
,defaultType: 'checkbox'
,defaults: {
columnWidth: '.32',
border: false
},
items: [{
id:'check1-field',
name: 'check1',
boxLabel: 'DOT'
},{
id:'check2-field',
boxLabel: 'Results Matched',
name: 'check2'
},{
xtype:'textfield',
name: 'testname',
fieldLabel:'This doesnt show'
}
]
Ext Docs for TextField
"This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager."
So, since you have a layout of "column", I don't think it will render.
Best best is probably to place your check boxes in a separate field set below the text entry boxes, or just remove the column layout style and change it to form (the default).
I had the same problem with you..
I solved it using panel xtype.
set your checkboxes becomes the items of a panel.