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:
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:
Code:
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);
}
});
Aucun commentaire:
Enregistrer un commentaire