1. #1
    Ext JS Premium Member
    Join Date
    Feb 2011
    Location
    Bristol, UK
    Posts
    4
    Vote Rating
    0
    jonwuwo is on a distinguished road

      0  

    Default 100% height when loading into a div

    100% height when loading into a div


    Hey guys,

    I'm an Ext JS newbie and have a question, (sorry if I have the wrong section)

    I need a panel (or some type of Ext JS container) to load into, and fill the space of a fixed height <div>. I've managed to get the panel loaded into a <div> and strech the panels width to fill it, but I'm struggling to make it do the same for the height

    If anyone can help point me in the right direction that would be great,

    Boycey

  2. #2
    Ext JS Premium Member
    Join Date
    Jun 2010
    Location
    US
    Posts
    98
    Vote Rating
    1
    bryall is on a distinguished road

      0  

    Default


    layout: 'fit'

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    46
    Vote Rating
    3
    gfrancis1@gmail.com is on a distinguished road

      0  

    Default


    I have the same issue and can't get my FormPanel to fill all the height of 'west-div' using fit:

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
    <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-all-debug-w-comments.js"></script>
    <script type="text/javascript">

    Ext.onReady(function(){

    var panel = new Ext.form.FormPanel({
    renderTo:'west-div',
    layout:'fit',
    border:true,
    items:[
    {
    xtype:'panel'
    ,layout:'column'
    ,style: {
    marginTop: '14px',
    marginRight: '15px',
    },
    title: 'Properties',
    id:'propertiesPanel',
    tbar:[
    {
    xtype: 'tbbutton',
    text: 'Add',
    },{
    xtype: 'tbseparator'
    }
    ]
    }]
    });
    panel.doLayout();
    });

    </script>

    </head>
    <body>

    <div id="west-div" style='height:100%'></div>

    </body>
    </html>

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2011
    Location
    Bristol, UK
    Posts
    4
    Vote Rating
    0
    jonwuwo is on a distinguished road

      0  

    Default


    I've tried the layout : 'fit' but that doesn't seem to work.

    My code is:

    Code:
    MyViewportUi = Ext.extend(Ext.Panel, {
        title: 'Warehouse holder',
        layout: 'fit',
        initComponent: function() {
            this.items = [
                {
                                    
                                                xtype: 'grid',
                                                store: 'WarehouseStore',
                                                layout: 'fit',
                                                columns : [
                                                        {
                                                            xtype: 'gridcolumn',
                                                            header: 'name',
                                                            dataIndex: 'name',
                                                            sortable: true
                                                        },
                                                        {
                                                            xtype: 'gridcolumn',
                                                            header: 'lat',
                                                            dataIndex: 'lat',
                                                            sortable: true
                                                        },
                                                        {
                                                            xtype: 'gridcolumn',
                                                            header: 'lon',
                                                            dataIndex: 'lon',
                                                            sortable: true
                                                        },
                                                        {
                                                            xtype: 'gridcolumn',
                                                            header: 'meterSq',
                                                            dataIndex: 'meterSq',
                                                            sortable: true
                                                        },
                                                        {
                                                            xtype: 'gridcolumn',
                                                            header: 'existing',
                                                            dataIndex: 'existing',
                                                            sortable: true
                                                        },
                                                        {
                                                            xtype: 'gridcolumn',
                                                            header: 'palletsPerMeter',
                                                            dataIndex: 'palletsPerMeter',
                                                            sortable: true
                                                        }
                                                    ]
                                            }
                                        ]
                              
                       
                ;
            MyViewportUi.superclass.initComponent.call(this);
        }
    });
    And what I'm seeing is this:



    Many thanks
    Last edited by jonwuwo; 8 Mar 2011 at 6:25 AM. Reason: typing error

  5. #5
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    7
    fay will become famous soon enough fay will become famous soon enough

      0  

    Default


    Remove the single quotes from your store config option:

    Code:
     
    // ...
    store: WarehouseStore, // <-- expects a store object not a string
    // ...

  6. #6
    Sencha User
    Join Date
    Nov 2009
    Posts
    58
    Vote Rating
    -1
    emils is on a distinguished road

      0  

    Default


    just got errors in the code ...

    Define grid separately, for example:

    Code:
    Grid = Ext.extend(Ext.grid.GridPanel, {
    	id: 'grid',
    	initComponent:function() {
    		Ext.apply(this, {
    			ds: {store definition},
    			columns: [{column definition},{column definition},{column definition},{column definition}],
    			sm: new Ext.grid.RowSelectionModel({singleSelect:true}), // if needed
    		});
    		Grid.superclass.initComponent.apply(this, arguments);
    	},
    	other definitions ...
    });
    Ext.reg("Grid",Grid);
    var NewGrid = new Grid;
    then just put it in the panel, something like:

    Code:
    MyViewportUi = new Ext.Panel({
    	border:false,
    	bodyBorder:false,
    	layout: 'border',
    	items: [{
    		region: 'center',
    		layout: 'fit',
    		items: [NewGrid]
    	}]
    });

  7. #7
    Ext JS Premium Member
    Join Date
    Feb 2011
    Location
    Bristol, UK
    Posts
    4
    Vote Rating
    0
    jonwuwo is on a distinguished road

      0  

    Default


    If I Remove the single quotes that stops the data from being pulled in.

    The data is being pulled into the grid. Its the surrounding panel that is hidding the grid, so I need the panel to stretch to the height of the pink box.

  8. #8
    Ext JS Premium Member NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    518
    Vote Rating
    1
    NoahK17 is on a distinguished road

      0  

    Default


    Here's the issue: Your grid doesn't have any data. Once you load some data, and you use the layout: fit, your grid will expand to cover the whole div. Just send back some blank data and you should be good.
    Noah
    Senior Web Developer
    NBA.com

  9. #9
    Sencha User
    Join Date
    Nov 2009
    Posts
    58
    Vote Rating
    -1
    emils is on a distinguished road

      0  

    Default


    do not confuse people, the data have nothing to do with the problem

  10. #10
    Ext JS Premium Member
    Join Date
    Feb 2011
    Location
    Bristol, UK
    Posts
    4
    Vote Rating
    0
    jonwuwo is on a distinguished road

      0  

    Default


    @emils

    I have reworked the code to be closer to what you said;

    Code:
    MyViewportUi = Ext.extend(Ext.Panel, {
        border:false,
        bodyBorder:false,
        layout: 'border',
        initComponent: function() {
            this.items = [
                {
                    region: 'center',
                    layout: 'fit',
                    items: [{
                                                xtype: 'grid',
                                                store: 'WarehouseStore',
                                                height: '',
                                                columns : [
                                                        {
                                                            xtype: 'gridcolumn',
                                                            header: 'name',
                                                            dataIndex: 'name',
                                                            sortable: true
                                                        },
                                                        {
                                                            xtype: 'gridcolumn',
                                                            header: 'lat',
                                                            dataIndex: 'lat',
                                                            sortable: true
                                                        },
                                                        {
                                                            xtype: 'gridcolumn',
                                                            header: 'lon',
                                                            dataIndex: 'lon',
                                                            sortable: true
                                                        },
                                                        {
                                                            xtype: 'gridcolumn',
                                                            header: 'meterSq',
                                                            dataIndex: 'meterSq',
                                                            sortable: true
                                                        },
                                                        {
                                                            xtype: 'gridcolumn',
                                                            header: 'existing',
                                                            dataIndex: 'existing',
                                                            sortable: true
                                                        },
                                                        {
                                                            xtype: 'gridcolumn',
                                                            header: 'palletsPerMeter',
                                                            dataIndex: 'palletsPerMeter',
                                                            sortable: true
                                                        }
                                                    ]
                                            }
                                        ]
                }]
                       
                ;
            MyViewportUi.superclass.initComponent.call(this);
        }
    });
    this code gives me this result;



    If I add a height instead of the ' border:false,bodyBorder:false, ' I can then see the grid?



    Do you think this could be because of the way I have coded Grid, and that doing it your way said would correct the problem?

    Thanks for your help

Similar Threads

  1. Replies: 1
    Last Post: 12 Sep 2010, 8:33 AM
  2. TabPanel content Loading Mask 100% height
    By vtulin in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 20 Jun 2010, 12:13 PM
  3. Replies: 2
    Last Post: 9 Dec 2009, 8:24 AM
  4. Loading Mask not extending to full height
    By borg in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 19 Nov 2009, 3:48 AM
  5. problem with minWidth/Height and maxWith/Height in resizable Object
    By TAG in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 18 Aug 2009, 11:34 PM

Thread Participants: 5

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar