View Full Version : Application view should fit all screen sizes

4 Feb 2012, 8:35 AM

I have built an application is ext js4. I want the viewport and other internal components(Grids etc.) to fit in all screens irrespective of the screen size. Currently the view of the application looks very cramped on big screens and it is fine on normal screens. Please advise.

5 Feb 2012, 9:46 AM
Please do not double post. If you make a mistake in one then you can edit your post. I have deleted the other thread for you.

Ext.container.Viewport will render to the body and take 100% of the width and height available. For child items, you should try to stay away from define width/height values and use flex in box layouts or anchor, something that will flow if the screen size changes.

5 Feb 2012, 9:35 PM
Ext.define('DG.view.agent.Index', {
extend: 'Ext.panel.Panel',
alias: 'widget.agentIndex',
xtype: 'panel',
frame: true,
title: 'Agent Management',
layout: {
type: 'vbox'
margin: '30 20 20 0',
defaults: {
style: {
padding: 2
items: [
xtype: 'agent_grid',
itemId: 'agentIndex_agent_grid',
margin: '20 5 5 20',
width: 700



This is one of my child panels which is defined inside a card layout container. I am using 'vbox' layout and this panel has a child grid with width 700. Can you tell what changes should i do to this panel so that ihe panel and the grid flows to entire screen.

Also, when i remove width: 700 from child grid, the data is not displayed in the grid. That is because the width of gridview is rendered as 0px, and data is overflowed from the gridview. Any ideas about this too would be most welcome.

6 Feb 2012, 9:49 AM
Here's a simple example which uses a Viewport, as mentioned by Mitchell. Note that I did everything inline for simplicity:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Auto-sizing Layout Example</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
region: 'north',
frame: true,
height: 52,
html: 'North Region Text',
title: 'North Region'
xtype: 'container',
region: 'center',
layout: 'fit',
items: [{
xtype: 'grid',
columnLines: true,
columns: [{
header: 'Last Name', dataIndex: 'lastName', width: 110, sortable: true
header: 'First Name', dataIndex: 'firstName', width: 110, sortable: true
header: 'Phone', dataIndex: 'phone', width: 110, sortable: true
header: 'Address', dataIndex: 'address', flex: 1
store: {
fields: [
{name: 'lastName', type: 'string'},
{name: 'firstName', type: 'string'},
{name: 'phone', type: 'string'},
{name: 'address', type: 'string'}
data : [
{lastName: 'Pooderton', firstName: 'Odiferous', phone: '(800) 224-3345', address: '202 CherryHill Way'},
{lastName: 'Snord', firstName: 'Cranston', phone: '(408) 224-0398', address: '7931 MoaningLisa Circle'},
{lastName: 'Hopsnuffer', firstName: 'Fershel Q.', phone: '(707) 382-4032', address: '911 Crysis Lane'},
{lastName: 'Gomerton', firstName: 'Homie', phone: '(422) 999-3495', address: '403 Spruce Goose Circle'}
title: 'Resizing Grid'
xtype: 'panel',
region: 'south',
frame: true,
height: 32,
html: 'Fixed Footer Content'