1. #1
    Ext User
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    27
    Vote Rating
    0
    doc is on a distinguished road

      0  

    Default Problem with a 100% grid container width and window resize

    Problem with a 100% grid container width and window resize


    Here's a problem or at least a misbehavior I encountered when playing around with a grid which is rendered intto a container of 100% window width.
    The container size is known at rendering time, but when the window gets *resized*, the grid doesn't resize its content - but it should, cause the container dimensions are known after window resize and the monitorWindowResize flag is set.

    I've read the limits and docu well:
    * The container MUST have some type of size defined for the grid to fill.

    - Actually the size is rendered correctly the frist time, the container width is defined by the window width.

    Is this behavior correct?


    Other improvement: It should be possible to set the column width in percent (of the container width).
    The container width is known, so the column width can be calculated.


    Regards,

    Marco

    Here's the simple test code (based on the grid examples):
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>100% Grid Test</title>
    
    <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all-debug.js"></script>
    <script type="text/javascript" src="../../package/util.js"></script>
    <link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    
    </head>
    <body>
    <p>This example sets the container to 100% window width. The grid should resize
    if the window is resized, all dimensions of the grid are known:</p>
    
    <div id="test" style="border: 1px solid #00B; margin:10px;">
    	Small test container for 100% window width.
    </div>
    <br />
    <div id="container" style="border: 1px solid #00B; margin:10px;">
    	<div id="grid"></div>
    </div>
    
    <script type="text/javascript">
    
    var Example = {
        init : function(){
            // some test data
            var myData = [
    			['blue', 'fix', 'dog'],
    			['red', 'var', 'cat'],
    			['gray', 'fix', 'bird'],
    			['yellow', 'var', 'big bird']
    		];
    
            var ds = new Ext.data.Store({
    		        proxy: new Ext.data.MemoryProxy(myData),
    		        reader: new Ext.data.ArrayReader({}, [
                           {name: 'color'},
                           {name: 'type'},
                           {name: 'animal'}
                     ])
            });
            ds.load();
    
            // simple colum model
            var colModel = new Ext.grid.ColumnModel([
    			{id: 'color', header:"Color", width: 160, dataIndex: 'color'},
    			{id: 'type', header: "Type", width: 75, dataIndex: 'type'},
    			{id: 'animal', header: "Animal", width: 75, dataIndex: 'animal'}
    		]);
    
            // create the Grid
            var grid = new Ext.grid.Grid('grid', {
                ds: ds,
                cm: colModel,
                monitorWindowResize: true,
                autoExpandColumn: 'animal'
            });
    
            grid.render();
            grid.getSelectionModel().selectFirstRow();
        }
    };
    Ext.onReady(Example.init, Example);
    
    </script>
    </body>
    </html>
    Tested with Ext1.1RC1 / IE7, FF2, OP9
    Last edited by doc; 31 Jul 2007 at 4:38 AM. Reason: Added test eq

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    Using percentage widths on the grid container (or any container) is not supported. As the docs say, a size must be defined.

    Some people have had success implementing percentage widths. I would post to the help forum and maybe someone will share their solution.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  3. #3
    Ext User
    Join Date
    Apr 2007
    Posts
    15
    Vote Rating
    0
    acharis is on a distinguished road

      0  

    Default Seem to get it to work using a BorderLayout

    Seem to get it to work using a BorderLayout


    If you specifically specify a BorderLayout for the gridpanel it seems to allow a 100% width. Even 100% height.
    HTML Code:
    <div id="grid-panel" style="width:100%;height:100%;">
    <div id="grid-example"></div>
    </div>
    Code:
            var grid = new Ext.grid.Grid('grid-example', {
                ds: ds,
                cm: colModel,
                autoExpandColumn: 'company'
            });
            
            var layout = Ext.BorderLayout.create({
                center: {
                    margins:{left:3,top:3,right:3,bottom:3},
                    panels: [new Ext.GridPanel(grid)]
                }
            }, 'grid-panel');
    
            grid.render();
    Seems to do the trick, on my end, even on the resize. It works best with the autoExpandColumn. You can also add a spacer column if need be, if most of your columns are fixed.

  4. #4
    Ext User
    Join Date
    Aug 2007
    Posts
    4
    Vote Rating
    0
    Hutch is on a distinguished road

      0  

    Default


    Oh! Is cool~

  5. #5
    Ext User rmsweeter's Avatar
    Join Date
    Aug 2007
    Location
    Apharetta, GA
    Posts
    3
    Vote Rating
    0
    rmsweeter is on a distinguished road

      0  

    Default


    Is there any intent to add this percentage functionality in the near future?

    I've tried to use Archaris' solution but it doesn't seem to be working correctly within a ContentPanel. I'm currently in charge of R&D for a company and this issue makes extjs hard to sell to the management around here.

  6. #6
    Ext User
    Join Date
    Nov 2007
    Posts
    6
    Vote Rating
    0
    SeanBlader is on a distinguished road

      0  

    Default


    I'm with the other posters, a capacity for relative width is definitely needed. I've found that using Ext.Panel as the layout I can get it to scale to 100% in Firefox 2 and IE7, but IE6 really breaks the formatting and the size of each column ends up being like 250% of the browser's width.

  7. #7
    Ext User
    Join Date
    Mar 2008
    Posts
    5
    Vote Rating
    0
    Steve Micallef is on a distinguished road

      0  

    Default % scaling needed

    % scaling needed


    I would have to agree with the other posters. I'm new to ext and this has so far been a major stumbling block.

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