1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    55
    Vote Rating
    0
    varunjyoti is on a distinguished road

      0  

    Default Unanswered: Application view should fit all screen sizes

    Unanswered: Application view should fit all screen sizes


    Hi,

    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    853
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    55
    Vote Rating
    0
    varunjyoti is on a distinguished road

      0  

    Default


    Code:
    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.

  4. #4
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


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

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <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'
        }]
      });  
      
    });
    
    </script>
    
    </head>
    
    <body>
    </body>
    </html>
    Last edited by friend; 6 Feb 2012 at 9:51 AM. Reason: typo

Thread Participants: 2