I want a specific height(600px,etc) of the middle content on page load:
Right now I have something similar to:
[_____________Header________________]
[Left Sidebar] [Middle Content Panel] [Right Sidebar]
[_____________Footer_________________]
Part of the code:
var viewport = new Ext.Viewport({
layout: 'border',
id: 'parent_container',
items: [{
region: 'north',
contentEl: 'header',
border: false
}, {
region: 'west',
id: 'left_sidebar_panel',
split: true,
width: 200,
minSize: 200,
maxSize: 400,
autoScroll: true,
contentEl: 'sidebar_container',
border: false
},{
region: 'center',
id: 'middle_content_panel',
layout: 'border',
border: false,
items: [{
region: 'north',
contentEl: 'main_content_header',
border: false
}...
Is there anyway to force middle_content_panel to have a specific height on page load/window expand? Or a way to grab the height of it with javascript some other way.
First you have to define your center content as variable
For example: var center= new Ext.Panel({
...
});
You can use setHeight Method center.setHeight(600);
From Documentation:
Related
I have a viewport with code
Ext.define('WIMM.view.Viewport', {
extend: 'Ext.container.Viewport',
autoScroll: true,
layout: 'anchor',
items: [
{
border: false,
title: 'Header',
layout: 'fit',
xtype: 'container',
html: 'Header block. We\'ll try to do this again'
},{
layout: 'border',
items: [
{
collapsible: true,
width: 240,
title: 'Aside Column',
region:'west',
layout: 'fit',
html: 'Aside widgets (news, balance, budget, goals) would be here.'
},{
title: 'Main Block',
border: false,
region:'center',
layout: 'fit',
html: 'Main block were tabPanel would be nested in.'
}
]
},{
title: 'footer',
xtype: 'container',
layout: 'fit',
html: 'Some information in footer (copyrights, disclaimer link)'
}
]
});
But item with border layout shrinks and only 1px border of that block is visible. It's important for me to have scrollBar, so I can't use border layout for entire viewport.
You have to set the height of the panel with the border layout.
{
layout: 'border',
height: 100,
items: [
{
collapsible: true,
width: 240,
title: 'Aside Column',
region: 'west',
layout: 'fit',
html: 'Aside widgets (news, balance, budget, goals) would be here.'},
{
title: 'Main Block',
border: false,
region: 'center',
layout: 'fit',
html: 'Main block were tabPanel would be nested in.'}
]
}
Look at this: http://jsfiddle.net/3CabN/4/
I'm about to go crazy.
I have my panels configured as follows:
accordion = new Ext.Panel({
id: 'accordionPanel',
title: 'Options',
region: 'center',
animCollapse: true,
border: false,
minWidth: 150,
maxWidth: 400,
autoScroll: true,
autoHeight: true,
layout: 'accordion',
layoutConfig: {
animate: true
}
});
var panelOne = new Ext.Panel({
region: 'center',
layout: 'border',
defaults: {
collapsible: true,
split: true
},
items: [{
title: 'Navigation',
region: 'west',
margins: '5 0 0 0',
animCollapse: true,
autoScroll: true,
autoHeight: true,
width: 200,
minWidth: 150,
maxWidth: 400,
layout: 'border',
layoutConfig: {
animate: true
},
items: [
Ext.Panel({
region: 'north',
border: false,
collapsible: false,
height: 65,
align: 'center',
html: myHtmlSource
}),
accordion
]
}, {
title: 'Main Content',
region: 'center',
layout: 'absolute',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
},
items: [someWindows],
collapsible: false,
margins: '5 0 0 0'
}]
});
viewport = new Ext.Viewport({
layout: 'border',
id: 'viewport',
items: [panelOne]
})
accordionPanel has a bunch of grids like this one inside of it:
var myGrid = new Ext.grid.Panel({
id: 'myGrid',
layout: 'anchor',
border: false,
title: 'My Grid',
width: 412,
store: store,
heigth: 300,
frame: false,
columns: [myColumns],
.....
});
Each of those grids is a separate accordion tab.
Now my problem is that those grids never display scrolls.
Just to be clear, this looks like the border layout that is displayed here.
Except that the navigation panel has an accordion inside of it with multiple grids in it.
Can't think of anything else to try.
Anyone?
I wan to apply horizontal scrollbar in my panel(ExtJS)
my code is...
var reportPanel = new Wtf.Panel({
border: false,
title: "Chart View",
autoScroll: true,
iconCls: "pwndCRM piechartIcon",
bodyStyle: 'background:white',
layout: 'border',
tbar: [this.pieChartButton, this.barChartButton],
closable: true,
items: [new Wtf.Panel({
id: mainpanid + "center_panel",
autoScroll: true,
//columnWidth:.47,
layout: "fit",
border: true,
region: "center",
width: '50%',
collapsible: true
})
, new Wtf.Panel({
id: mainpanid + "east_panel",
autoScroll: true,
border: true,
layout: "fit",
//columnWidth:.48,
region: "east",
width: '50%',
collapsible: true
})
]
});
It is not working can anybody tell what is wrong with code...?
I have a panel containing two children panels.the parent panel uses "border" layout, while two children panels use "form" and "column" layouts respectively. now How can I make these two children panels resize accordingly when window resizes, i.e., make sure the size ratio of these two panels is constant.
thanks!
my codes are as follows:
itemRts = {
xtype: 'panel',
title: 'Route',
region: 'north',
autoHeight: true,
layout: 'form',
width: 294,
bodyStyle: 'padding:10px 12px 10px',
id: 'ROUTE_PANEL',
el: 'Route_Setup',
items: [
{
xtype: 'button',
text: 'Go',
anchor: '0',
id: 'GO_BTN'
}]
};
itemEvts = {
xtype: 'panel',
title: 'Events',
region: 'center',
layout: 'column',
tpl: 'Please put events here.',
//bodyStyle: 'padding:10px 12px 10px',
border: false,
hideBorders: true,
id: 'EVENT_PANEL',
el: 'Event_Legend',
autoScroll: true
};
newView = new Ext.Viewport({
layout: "border",
items: [
{
xtype: 'panel',
margins: '10 0 10 10',
region: 'center',
width: 200,
layout: 'border',
split: true,
boxMaxWidth: 280,
minWidth: 280,
id: 'RTS_EVTS_REGION',
collapseMode: 'mini',
items: [
itemRts,
itemEvts]
}]
});
how to modify above codes to make it work as what I want?
thanks again!
You can set a resize event for container panel and call "dolayout" method of their children in case of resize :
newView = new Ext.Viewport({
layout: "border",
items: [
{
xtype: 'panel',
margins: '10 0 10 10',
region: 'center',
width: 200,
layout: 'border',
split: true,
boxMaxWidth: 280,
minWidth: 280,
id: 'RTS_EVTS_REGION',
collapseMode: 'mini',
items: [itemRts, itemEvts],
listeners: {
'resize': function () {
itemRts.doLayout();
itemEvts.doLayout();
}
}
}]
});
for your main container, i suggest hbox and/or vbox layouts. those layouts are what you are looking for. here a sample:
var testPanel = new Ext.Viewport( {
id : 'vp_test',
layout : 'hbox',
align : 'stretch',
items : [
{
id : 'pnl_child_1',
title : 'Test 1',
flex : 2
},
{
id : 'pnl_child_2',
title : 'Test 2',
flex : 3,
layout : 'vbox',
align : 'stretch',
items : [
{
id : 'pnl_child_3',
title : 'Test 3',
flex : 1
},
{
id : 'pnl_child_4',
title : 'Test 4',
flex : 1
}
]
},
]
} );
you can refer to documentation, viewport, hbox, vbox
itemRts = {
xtype: 'panel',
title: 'Route',
// region: 'north', <<< we don't need this anymore
flex: 1, // this means that this container has 1 flexible share
// autoHeight: true, <<< this will ruin all layout
layout: 'form',
// width: 294, <<< we don't need this anymore
bodyStyle: 'padding:10px 12px 10px',
id: 'ROUTE_PANEL',
el:'Route_Setup',
items: [
{
xtype:'button',
text:'Go',
anchor:'0',
id:'GO_BTN'
}
]
};
itemEvts = {
xtype: 'panel',
title: 'Events',
// region: 'center', <<< we don't need this anymore
flex: 1, // this means that this container has 1 flexible share
layout: 'column',
tpl: 'Please put events here.', // <<<< if you're not going to use xTemplates you should use html property instead
//bodyStyle: 'padding:10px 12px 10px',
border: false,
hideBorders: true,
id: 'EVENT_PANEL',
el : 'Event_Legend',
autoScroll: true
};
newView = new Ext.Viewport({
//// if you have only one child component you can use fit layout for viewport.
//// and consider removing that only child. use viewport as main container.
layout : "border",
items: [
{
xtype: 'panel',
margins: '10 0 10 10',
region: 'center',
// width: 200, <<<< width has no effect on center region
/// we'll use hbox with align stretch
layout: 'hbox',
align: 'stretch',
// split: true, <<<< split has no effect on center region
// boxMaxWidth: 280, <<<< no effect
// minWidth: 280, <<<< no effect
id: 'RTS_EVTS_REGION',
// collapseMode: 'mini', <<<< collapse properties has no effect on center region
items: [
itemRts,
itemEvts
]
}
]
});
I'm writing an app where I have a BorderLayout for the entire page. In the south part I have a Panel to which I add FormPanels. I would like to be able to scroll that Panel so I can scroll through the FormPanels.
So far, nothing I've found from searches has helped. I don't quite understand what ExtJS requires in terms of the combination of LayoutManagers, setting the size and setting AutoScroll.
Any partial tips will be gratefully followed up.
A code snippet:
new Ext.Viewport({
layout: "border",
items: [{
region: "north",
contentEl: "title",
height: 50
}, {
region: "center",
id: "mappanel",
title: "Map",
xtype: "gx_mappanel",
map: map,
layers: [layer],
extent: extent,
split: true,
tbar: toolbarItems
}, {
region: "east",
title: "Details",
width: 300,
split: true,
id: "east-panel",
laout: 'fit'
}, {
region: "south",
id: "south-panel",
height: 200
}, {
region: "west",
id: "west-panel",
width: 300
}]
});
matchedTrailJunctionsPanel = new Ext.Panel({
title: "Matched Trail Junctions2",
id: "matched-trail-junctions",
autoScroll:true
//layout: 'anchor'
});
var southPanel = Ext.getCmp('south-panel');
southPanel.add(matchedTrailJunctionsPanel);
southPanel.doLayout();
createTrailJunctionPanel = function(trailJunction) {
var trailJunctionPanel = new Ext.form.FormPanel({
labelWidth: 75,
width: 350,
defaultType: 'textfield',
items: [{
fieldLabel: 'Junction Name',
name: 'junction-name'
}],
autoScroll:true,
//anchor: '100% 100%',
height: 100
});
matchedTrailJunctionsPanel.add(trailJunctionPanel);
if(trailJunction.publicTrailSegments.length == 0) {
matchedTrailJunctionsPanel.add(new Ext.form.Label({text: 'No public trails matched'}));
} else {
var grid = new Ext.grid.GridPanel({
store: mapMatchObjectStore,
columns: [
{id:'publicTrailSegment',header: 'Trail', width: 160, sortable: true, dataIndex: 'publicTrailSegment'}
],
stripeRows: true,
autoExpandColumn: 'publicTrailSegment',
height: 350,
width: 600,
title: 'Matched Trail Junctions'
});
matchedTrailJunctionsPanel.add(grid);
}
matchedTrailJunctionsPanel.doLayout();
}
Your south panel is the main container for your components, so it should be autoScroll:true and you should be adding both your form and grid into it. You can't really add a grid into a FormPanel directly as it's not a form field (you'd have to wrap it as a Field or implement some of Field's interface). It may work with south having no layout (the browser should just stick the grid directly after the form) but generally it's better to specify an appropriate layout (vbox would be a good one in this case).
The containing panel must have the height set. The contained panels must either have the height set or autoHeight: true set.