PDA

View Full Version : 'Fit' to screen?



alejandroNNU
18 Apr 2014, 7:13 AM
Hello,

I was wondering if someone could help me with the following issue. I'm making a form that needs to "fit"/ fill up the browser page, the problem is I don't know how to achieve this, currently it looks like this:

48766

The way I have it set up currently is I have the viewport layout set to fit with the single 'Incident' panel inside, which works just fine, it fills up the entire page. The Incident panel layout is set to absolute so that I could arrange the boxes in that particular order, because it has to look like that. Each box is a simple container. I can't figure out how to make these containers 'fit' or fill up the panel though, if I set the panel layout to vbox for example then the container's will fill up the whole thing, but obviously they will all be re-arranged vertically, same with hbox and so on.... So can someone please help me fix this? or if it can't be done the way I have it set up can you suggest an alternative so that it still looks like this? This is the code for the panel:


Ext.define('MyApp.view.IncidentPanel', {
extend: 'Ext.panel.Panel',


height: 867,
itemId: 'incidentPanel',
width: 1181,
layout: {
type: 'absolute'
},
title: 'Incident',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'container',
x: 0,
y: 0,
border: '3px, 0px, 0px, 3px',
cls: 'inner-container',
height: 150,
itemId: 'incidentInfoContainer',
width: 470,
items: [
{
xtype: 'textfield',
fieldLabel: 'Incident #'
},
{
xtype: 'textfield',
fieldLabel: 'Licensee'
},
{
xtype: 'textfield',
fieldLabel: 'Opened'
},
{
xtype: 'textfield',
fieldLabel: 'Closed'
},
{
xtype: 'textfield',
fieldLabel: 'TSR'
}
]
},
{
xtype: 'container',
x: 470,
y: 0,
border: '3px, 0px, 0px, 3px',
cls: 'inner-container',
height: 150,
itemId: 'incidentSourceContainer',
width: 420,
items: [
{
xtype: 'label',
html: '<b>Incident Source</b><br></br>',
itemId: 'incidentSourceLabel'
},
{
xtype: 'combobox',
itemId: 'incidentSourceComboBox',
margin: '22, 0, 0, 30',
width: 346,
emptyText: 'Select Source'
}
]
},
{
xtype: 'container',
x: 890,
y: 0,
border: '3px, 3px, 0px, 3px',
cls: 'inner-container',
height: 150,
itemId: 'trackosIDContainer',
width: 290,
items: [
{
xtype: 'textfield',
itemId: 'trackosIDField',
margin: '50, 0, 5, 10',
fieldLabel: 'TRACKOS ID#'
}
]
},
{
xtype: 'container',
x: 0,
y: 150,
border: '3px, 0px, 0px, 3px',
cls: 'inner-container',
height: 160,
itemId: 'locationInfoContainer',
width: 470,
items: [
{
xtype: 'textfield',
fieldLabel: 'Location'
},
{
xtype: 'textfield',
fieldLabel: 'Area of Placement'
},
{
xtype: 'textfield',
fieldLabel: 'Address'
},
{
xtype: 'textfield',
fieldLabel: 'City, State, Zip, Country'
},
{
xtype: 'textfield',
fieldLabel: 'Custom Notes'
}
]
},
{
xtype: 'container',
x: 470,
y: 150,
border: '3px, 3px, 0px, 3px',
cls: 'inner-container',
height: 160,
itemId: 'categorizationContainer',
width: 710,
items: [
{
xtype: 'label',
html: '<b>Incident Categorization</b><br></br>',
itemId: 'incidentSourceLabel1'
},
{
xtype: 'combobox',
width: 294,
fieldLabel: 'Type'
},
{
xtype: 'combobox',
width: 295,
fieldLabel: 'Subtype'
},
{
xtype: 'combobox',
width: 295,
fieldLabel: 'Action'
},
{
xtype: 'combobox',
width: 295,
fieldLabel: 'Resolution'
}
]
},
{
xtype: 'container',
x: 0,
y: 310,
border: '3px, 0px, 0px, 3px',
cls: 'inner-container',
height: 170,
itemId: 'contactInfoContainer',
width: 470,
items: [
{
xtype: 'label',
html: '<b>Contact Information</b><br></br>',
itemId: 'contactInfoLabel'
},
{
xtype: 'textfield',
fieldLabel: 'Username'
},
{
xtype: 'textfield',
fieldLabel: 'First Name'
},
{
xtype: 'textfield',
fieldLabel: 'Phone'
},
{
xtype: 'textfield',
fieldLabel: 'Email'
},
{
xtype: 'textfield',
fieldLabel: 'Rate Plan:'
}
]
},
{
xtype: 'container',
x: 470,
y: 310,
border: '3px, 3px, 0px, 3px',
cls: 'inner-container',
height: 170,
itemId: 'templateContainer',
width: 710,
items: [
{
xtype: 'label',
html: '<b>Available Templates</b><br></br>',
itemId: 'incidentSourceLabel2'
},
{
xtype: 'combobox',
itemId: 'incidentSourceComboBox1',
margin: '30, 0, 0, 30',
width: 346,
emptyText: 'Select Template'
}
]
},
{
xtype: 'container',
x: 0,
y: 480,
border: '3px, 3px, 0px, 3px',
cls: 'inner-container',
height: 120,
itemId: 'problemDescriptionContainer',
width: 1180,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [
{
xtype: 'label',
html: '<b>Problem Description</b>',
itemId: 'problemDescriptionLabel'
},
{
xtype: 'textareafield',
flex: 1,
itemId: 'problemDescriptionField'
}
]
},
{
xtype: 'container',
x: 0,
y: 600,
border: '3px, 3px, 0px, 3px',
cls: 'inner-container',
height: 120,
itemId: 'resolutionDescriptionContainer',
width: 1180,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [
{
xtype: 'label',
html: '<b>Resolution Description</b>',
itemId: 'resolutionDescriptionLabel'
},
{
xtype: 'textareafield',
flex: 1,
itemId: 'resolutionDescriptionField'
}
]
},
{
xtype: 'container',
x: 0,
y: 720,
border: '3px',
cls: 'inner-container',
height: 120,
itemId: 'incidentHistoryContainer',
width: 1180,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [
{
xtype: 'label',
html: '<b>Incident History</b>',
itemId: 'incidentHistoryLabel'
},
{
xtype: 'textareafield',
flex: 1,
itemId: 'incidentHistoryField',
width: 1184
}
]
}
]
});


me.callParent(arguments);
}


});

alejandroNNU
21 Apr 2014, 5:48 AM
can someone please help me out with this? in case I was unable to explain myself properly in my first post what I'm trying to achieve here is for all the containers inside the panel to resize along with the browser so that they always 'fit' the screen whenever I resize the window. The problem is I'm using an absolute layout to organize the containers in that particular order and so they don't automatically resize along with the window.

Gary Schlosberg
21 Apr 2014, 8:51 AM
I added your code to this Fiddle:
https://fiddle.sencha.com/#fiddle/585

I commented out your width config on the main layout and it now stretches to fill the space. Will that work?

alejandroNNU
21 Apr 2014, 9:26 AM
Hi Gary,

That wasn't exactly what I was looking for but it led me to a solution, I mentioned it in my post but I guess it wasn't included in my code, that main panel is inside a viewport with a 'fit' layout, which means that the panel was stretched out to the whole screen anyways, those height and width configs are pretty much irrelevant so commenting it out did nothing in my code. What i needed was for the containers inside that main panel (the 'black boxes') to stretch out as well. What happens is that when the main panel is created, it'll stretch out because of the fit layout of the viewport it's in, but the containers inside the panel will not stretch out with it because of their set width and height configs, so that was basically the problem, but by removing those configs they will stretch out as needed automatically, so thank you very much for your help, appreciate it.

aw1zard2
21 Apr 2014, 9:51 AM
Just a side note if you don't want the black boxes to go below the height and widths you can do minWidth and minHeight so they don't go smaller than those number of pixels and still will be stretched out bigger to fit the view port.

alejandroNNU
21 Apr 2014, 9:55 AM
Just a side note if you don't want the black boxes to go below the height and widths you can do minWidth and minHeight so they don't go smaller than those number of pixels and still will be stretched out bigger to fit the view port.

This is actually very useful and I was not aware, thank you for the tip.