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.
Related
I need to resize my popup created by using Ext.Window based on the controls render on it.
I popup an aspx page and dynamically creating control on it. So i can't hard code the height of the window.
How can I resize the popup window height. Please help me with your valueable information.
My code is as follows.
Ext.onReady(function () {
var myWin = new Ext.Window({
title: 'Add to Favourit',
width: 380,
height: 300,
closable: true,
buttonAlign: 'center',
items: [{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'box',
itemId: 'iFrameInWindow',
title: 'IFrame',
autoEl: {
tag: 'iframe',
src: 'forms/test.aspx?id=1'
},
flex: 1,
width: 380,
height: 300,
}],
listeners: {
afterrender: function () {
//
},
}
}]
});
myWin.show();
});
Thanks in advance.
I have an item inside a container in my Viewport, I want to copy that item to a new window: What I've tried copies the item to the new window but unfortunately it destroys it in the container.
How can I keep it in both places ?
onOpenNewClick: function () {
var win;
var viewport = this.getMyViewport();
var chart = viewport.down('container #thechart');
win = Ext.create('widget.window', {
title: 'Layout Window',
width: 1000,
height: 600,
constrain: true,
constrainHeader: true,
hidden: false,
shadow: false,
maximizable: true,
autoScroll: true,
title: 'test',
layout: 'fit',
items: [{
region: 'center',
layout: 'fit',
title: 'chart',
xtype: chart
}]
});
win.show()
win.center();
},
My viewport :
items: [{
region : 'center',
height : '100%',
items : [{
xtype : 'container',
id : 'pan_chart',
border : false,
autoHeight : true,
hidden : true,
autoScroll : true,
items : [{
width : screen.width,
xtype: 'mychart',
id : 'thechart',
}]
}]
}
]
You need to clone the object instead of copying. Because when you copy you copy the reference and not creating a new instance of the object.
This thread discusses cloning of ExtJs objects.
Edit:
You are getting an extjs object and store it in the chart variable. In the second part you are trying to assign the object to the xtype property.
You should directly add it to the items property like so:
win = Ext.create('widget.window', {
title: 'Layout Window',
layout: 'fit',
items: [chart]
});
But this still "cut" your object and not "copy" it.
Edit2:
A good way for component copying is creating a function that return an instance of a chart. You can use the same store with the same data.
function createChart(store){
return Ext.create('Ext.chart.Chart', {
width: 400,
height: 300,
store: store
});
}
use it like so:
win = Ext.create('widget.window', {
title: 'Layout Window',
layout: 'fit',
items: [createChart(myStore)]//myStore must be defined
});
I am working on ExtJs collapsible panel in table layout.
Whenever I open the page the panel comes up perfectly fine (width wise).
Please check the below images
But when I collapse the panel, the width changes!
See the below image:
A sample code to replicate this issue:
Ext.create('Ext.panel.Panel', {
title: 'Car Simple Tree',
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2
},
items: [{
xtype: 'panel',
title: 'panel title',
collapsible: true,
titleCollapse: true,
bodyStyle: {
background: '#D9E5F3',
borderColor: '#99BCE8',
borderWidth: '1px'
},
scrollable: true,
autoScroll: true,
layout: {
pack: 'center',
type: 'hbox'
},
rowspan: 1,
colspan: 2,
width: '100%',
items: [{
text: 'Save',
xtype: 'button',
padding: 5
}]
}, {
html: 'Cell C content',
cellCls: 'highlight'
}, {
html: 'Cell D content'
}]
});
I have also created a fiddle with the same code.
JSFiddle Demo
Please help me in resolving this issue.
I want the width of the panel to remain fixed whether it is collapsed or not.
But I WANT to set width in the terms of percentage and not fixed absolute number.
To set the column width to '100%' use tableAttrs
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
}
Also 'scrollable' and 'autoScroll' need not to be set to true since the column width will be '100%'
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:
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
]
}
]
});