in my west region panel there is smth. like the task panel here:
http://dev.sencha.com/deploy/dev/examples/tasks/tasks.html
the data is loaded from 2 different 's containing only with links
the first "task" group is always expanded to all the height of the document, though there are much less data there.
here is the code:
new Ext.Panel({
region: 'west',
title: 'דוחות',
id: 'w',
header: false,
width: 190,
split: true,
layout: 'fit',
collapseMode: 'mini',
//minWidth: 100,
baseCls:'x-plain',
margins: '0 1 0 0',
items: [ new Ext.Panel({
id:'wp',
frame:true,
title: 'דוחות לעובדים',
collapsible:true,
contentEl: 'workerRep',
//titleCollapse: true
}),
new Ext.Panel({
frame:true,
id:'mp'
title: 'דוחות למכונות',
collapsible:true,
contentEl:'machRep',
layout: 'fit',
//titleCollapse: true
})
]
What could be the problem?
Ext.layout.FitLayout ( which is what layout: 'fit' stands for) is for situations when you anly have one item in a container, because it tries to 'fit' this one component to the full size of the container.
From manual:
This is a base class for layouts that contain a single item that automatically expands to fill the layout's container.
If you have more than one item in container use different layout like Ext.layout.ContainerLayout (default one), Ext.layout.VBoxLayout or perhaps Ext.layout.TableLayout.
found the answer, the problem was here:
baseCls:'x-plain',
Related
I have used split: true and it worked until I had the following situation:
centerContent = new Ext.Panel
({
layout: 'border',
split:true,
stateful:true,
border:false,
items:
[
{
region:'center',
margins:'0 0 0 0',
autoScroll:true,
split: true,
items:
[
{
region: 'north',
height: 250,
minSize: 150,
frame:false,
border:false,
layout:'fit',
items: blah
},
{
title:'Graph',
region:'south',
margins:'0 0 0 0',
collapsible: true,
split:true,
frame:false,
border:false,
height: 500,
minSize: 250,
layout:'fit',
items: anotherBlah
}
]
}
]
});
I tried to put split: true everywhere, but still no result. To illustrate the result of this code, I have attached a picture:
The north region has no title, but it renders to the item: blah. South region has title 'Graph' as you can see from the picture. I want to be able to split/drag down south region from north whenever necessary. But that "split tool" will not show up.
Do you know what am I missing?
You can't have border layout and auto scroll in the same container. The reason is that the border layout will fit its children component to the available space, and so they will never overflow.
So, in order to achieve what you want, you need an inner container with a fixed height (so that it overflows its parent) in a container with autoScroll. Then you apply the border layout to that inner container.
Example (jsFiddle):
Ext.widget('container', {
renderTo: Ext.getBody()
// the 300px container contains a 500px child: it will scroll
,width: 300
,height: 300
,autoScroll: true
,items: [{
xtype: 'container'
,height: 500
// the 500px container has border layout
,layout: 'border'
,items: [{
// you are required to have a center region, so use center and south
title: 'Center'
,region: 'center'
,height: 200
},{
title: 'South'
,region: 'south'
,split: true
,height: 300
}]
}]
});
I have a vbox panel on the right side of my page:
{
xtype: 'panel',
region: 'east',
itemId: 'clipboard',
autoScroll: true,
width: 200,
layout: {type:'vbox',align: 'stretch',pack: 'start'},
collapsible: false,
split: true,
border: false,
}
When an event occurs, I need to add a new image with text beneath it to the 'clipboard' strip:
var clipboard = Ext.ComponentQuery.query('panel[itemId=clipboard]')[0];
clipboard.add(
{
xtype: 'panel',
layout: { type: 'vbox', align: 'center',pack: 'start'},
data: data,
margin: '5 0 5 0',
items: [{
xtype: 'image',
src: 'resources/images/clipboardItem.png',
height: 32,
width: 32
}, {
xtype: 'box',
html: 'This text needs to wrap around because it is too wide to fit in the clipboard strip.'
}]
});
The image is correctly centered over the text. The text should wrap around, so that it's not wider than the clipboard. However, its container is not shrinking to the width of the strip. The text length is determining the width of its immediate container.
What configuration changes do I need to make so that each item I add to the clipboard has a centered image, followed by a block of text that potentially wraps around within the bounds of the clipboard, and everything adjusts when the user changes the width of the clipboard?
http://jsfiddle.net/nxSmS/
Just add a width to the box...
xtype: 'box',
width: '100%',
html: '<p>This text is super long and will be too wide for the panel</p>',
I have the following Ext.TabPanel:
var modules_info_panel = new Ext.TabPanel({
activeTab: 0,
defaults:{autoScroll:true},
//layout: 'fit', // makes component disappear
viewConfig: {
forceFit: true //has no effect
},
// height: auto, //error "auto isn't recognized"
items:[{
title: 'Section 1',
html: 'test'
},{
title: 'Section 2',
html: 'test'
},{
title: 'Section 3',
html: 'test'
}]
});
which looks like this:
How can I get the line in the middle to extend down to the bottom so that it fills its parent space vertically?
Here's how the TabPanel is loaded into regionContent:
regionContent = new Ext.Panel({
id: 'contentArea',
region: 'center',
autoScroll: true
});
function clearExtjsComponent(cmp) {
var f;
while(f = cmp.items.first()){
cmp.remove(f, true);
}
}
function replaceComponentContent(cmpParent, cmpContent) {
clearExtjsComponent(cmpParent);
cmpParent.add(cmpContent);
cmpParent.doLayout();
}
replaceComponentContent(regionContent, modules_info_panel);
I see that the height is for this element in the dom is absolute (19px), where is that being set?
Addendum
McStretch, I tried your idea by putting layout: 'fit' in the tabs themselves but the line still is in the same place:
var modules_info_panel = new Ext.TabPanel({
activeTab: 0,
defaults:{autoScroll:true},
items:[{
title: 'Section 1',
layout: 'fit',
html: 'test'
},{
title: 'Section 2',
layout: 'fit',
html: 'test'
},{
title: 'Section 3',
layout: 'fit',
html: 'test'
}]
});
Corrected:
Sorry Edward I was incorrect, you want layout: 'fit' within your regionContent Panel. The updated code changes are below.
Your initial idea of using layout: 'fit' is correct, but you have it in the wrong location. You want the following:
var regionContent = new Ext.Panel({
region : 'center',
autoScroll : true,
layout : 'fit', // added this line
items : []
});
Looks like you are within a border Layout, how do you define the panel that set the border layout ? The center region of a border layout should normally fill the space not remained by the other regions. I did a sample that looks like your layout: http://jsbin.com/ikazo3/6/edit
From the Border Layout documentation:
Any container using the BorderLayout must have a child item with
region:'center'. The child item in the
center region will always be resized
to fill the remaining space not used
by the other regions in the layout.
Any child items with a region of west or east must have width defined
(an integer representing the number of
pixels that the region should take
up).
Any child items with a region of north or south must have height
defined.
The regions of a BorderLayout are fixed at render time and thereafter,
its child Components may not be
removed or added. To add/remove
Components within a BorderLayout, have
them wrapped by an additional
Container which is directly managed by
the BorderLayout. If the region is to
be collapsible, the Container used
directly by the BorderLayout manager
should be a Panel. In the following
example a Container (an Ext.Panel) is
added to the west region:
I would have thought this would be quite simple. alas it seems nothing about ExtJS is simple.
I need to split the center region of a border layout and have both the top and bottom panels fill the center region when the page resizes.
As it stands, I can only figure out how to set absolute sizes for the panels.
Here's the code generated using ExtJS Gui Builder
/* This file is created or modified with
* Ext.ux.guid.plugin.GuiDesigner (v2.1.0)
*/
{
layout: "border",
items: [{
region: "center",
title: "map",
items: [{
xtype: "panel",
title: "Panel",
autoHeight: true,
split: true,
height: 100
}, {
xtype: "panel",
title: "Panel",
autoHeight: true,
split: true,
height: 300
}]
}, {
region: "north",
split: true,
height: 100
}, {
region: "west",
width: 300,
split: true,
collapsible: true,
title: "Gazetter Explorer"
}]
}
First off, autoheight means that the container will collapse to the size of the content and its dimensions will be managed by the browser (not by Ext). This is almost never what you want in an app UI.
Your center region should have some type of layout specified. You could "split" it by giving it layout: 'border' and giving it a center and a north/south panel. However, to mimic an "auto height" type of layout, you'd probably want to go with a vbox layout (Ext 3.x) with two child panels that each stretch to take up 50% (or whatever you want) of the space.
Each of my 3 Extjs gridpanels do not expand horizontally within a tabPanel.
The each grid's properties:
id: grid_id,
ds: ds,
cm: cm,
loadMask: true,
view: grouping_view,
plugins: [expander, filters],
stateId: which + '-grid-stateId',
stateful: true,
stateEvents: ['datachanged', 'columnresize', 'columnmove', 'sortchange', 'columnvisible', 'columnsort', 'hide', 'show', 'expand', 'collapse'],
selModel: checkbox,
// height: 400,
width: GRID_WIDTH,
defaults: {autoHeight: true},
autoHeight: true,
collapsible: false,
animCollapse: false,
layout: 'fit',
TabPanel's properties:
id: 'tab_panel',
renderTo: 'tabs',
activeTab: 0,
enableTabScroll: true,
defaults: {autoScroll:true, authHeight:true},
plugins: new Ext.ux.TabCloseMenu(),
width: GRID_WIDTH + 2,
autoHeight: true,
items: [ // put items in tabpanel like this. adding via method call forces them to render/load befire user clicks on them
owned_grid,
managed_grid,
subscribed_grid
],
Layout is not a valid property for a GridPanel.
Try using:
viewConfig: { forceFit: true }
instead
I was searching the forums for a way to make my grid resize automatically but could not find the solution, nothing worked... and then I read the Ext Js GridPanel documentation: "
A grid requires a width in which to
scroll its columns, and a height in
which to scroll its rows. These
dimensions can either be set
explicitly through the height and
width configuration options or
implicitly set by using the grid as a
child item of a Container which will
have a layout manager provide the
sizing of its child items (for example
the Container of the Grid may specify
layout:'fit')."
..so I just set not the grid's layout, but the layout of the grids's PARENT to whatever value I want (in my case the parent container holds other things than only the grid, so I set layout : 'anchor', and then by setting the the anchor : '100% 100%' I make the grid expand as much as it can be).
and now I HAVE IT WORKING :D yayyyy!
It's the layout of the container that you have to set, ie:
var tp = new Ext.TabPanel({
items: [{
title: 'First tab',
layout: 'fit',
items: new Ext.GridPanel({ title: "Grid panel" })
},{
title: 'Second tab'
}]
});
Fit layouts mean that there is only one item in the container and it should expand to take all available space. Remove all explicit references to width, autoWidth, etc.