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
Related
I use rowwidget to display extra data for every row in my grid, for example: panel, but when I resize my grid or when the grid have a vertical scrollbar the size of the widget (width) remains the same, Is there any way to change the width of the widget automatically?
I mean like a layout for the rowwidget plugin?
config.plugins = [{
ptype: 'rowwidget',
widget: {
xtype: 'panel',
/* I want it's width as the plugin width even when resizing the grid*/
items: [],
height: 50,
style: {
'border': 'solid 1px green'
},
bind: {
}
}
}];
the layout can remain the same you can use the width of the grid, or window, to set a relative width for the widget dynamically . there should be a function that returns the width and height after onresize event, something like window.innerWidth , good luck finding the grid body with the console then get its width,
grid = Ext.getBody().component.items.items[1].items.items[1].body;
winWidth = grid.getWidth();
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.
I have a simple Ext.ProgressBar and need to double it's height which works but didn't scale the progress image, just the outer box. I thought OK, maybee it is to small and can't scale but it has a height of >800px (sencha original images).
So how can this be done?
Here's the config
{
xtype: 'progressbar',
text: 'Some text',
border: 1,
height: 40
}
Height of progress bar is set in style definition. You can change height by changing .x-progress-bar css class. In modern browsers (eg. Chrome) all you need to do is to change height property, because background image is definied as gradient. Example:
// height of bar
.x-progress-bar {
height: 38px;
}
// height of text box
.x-progress-text {
height: 38px;
line-height: 38px;
}
Working sample: http://jsfiddle.net/D2QYN/2/
Another way is to attach handler to render event and set height of child elements which are not scaled verically. Example handler:
listeners: {
render: function(sender) {
var height = sender.bar.parent().getHeight(true); // content height
sender.bar.setStyle('height', height + 'px');
sender.textEl.setStyle('height', height + 'px');
sender.textEl.setStyle('line-height', height + 'px');
}
}
Working sample: http://jsfiddle.net/D2QYN/3/
So I have the following window.
var myWindow = Ext.create("Ext.window.Window", {
width : 600,
title : "Window",
draggable : true,
border : false,
resizable : true,
autoScroll : true,
layout : "fit",
items : form,
modal : true
};
And this is my form:
var form= Ext.create("Ext.form.Panel", {
border : false,
frame : true,
items : items,
fbar : buttons
});
There's a lot of things that are hidden and show if some things are clicked. This causes the size of the form to change regularly. At first this is no problem, the window always resizes itself to fit the form. But if I close or resize the window, the window no longer fits the form. It is as layout : 'fit' doesn't work anymore after close/resize.
Any ideas?
Any help appreciated.
Once you resize a panel, width and height are FIXED. Every time the layout has to be recalculated it verifies if width and height are fixed or not in order to determinate if width and height should be recalculted or not.
This makes sense because you cannot have both (auto fit and custom size) at the same time. What you can do is set width and height to undefined and call doLayout() after you show new content.
I have a TabPanel, where the TabPanel contains two parts, one part has details about the image and the down part has the image which is created using Panel. Now the image is unreadable in IE8(less size), so i want to increase the size of the Imagepanel in the Tabpanel. How can i achieve this?
Thanks,
Raj
var tabs = new Ext.TabPanel({
activeTab : 0,
autoScroll: true,
width:200,
height: 200,
items:[]
});