1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    61
    Vote Rating
    0
    steven is on a distinguished road

      0  

    Default Grid in Border Layout problems

    Grid in Border Layout problems


    I am having problems with getting a grid to correctly resize within a border layout with a splitter. My application is quite complicated so I tried to create a test page but I am still having problems with it.

    I have the following:
    Code:
    <div id="outer">
      <div id="top">
        <div id="grid-panel" style="overflow:hidden;position:absolute;">
          <div id="grid" style="overflow:hidden;"></div>
        </div>
      </div>
      <div id="bottom" style="background:red;"></div>
    </div>
    then javascript:
    Code:
    Ext.onReady(function(){
        var north = new Ext.ContentPanel('top'); 
        var center = new Ext.ContentPanel('bottom'); 
        var layout = new Ext.BorderLayout('outer', {     
            north: { split:true, initialSize: 200}, 
            center: {}}); 
        
        layout.add('north', north); 
        layout.add('center', center);     
        
        ...
    
        var grid = new Ext.grid.EditorGrid('grid', {
            ds: ds,
            cm: cm,
            enableColLock:false
        });
      
        var gridlayout = Ext.BorderLayout.create({
            center: {
                margins:{left:3,top:3,right:3,bottom:3},
                panels: [new Ext.GridPanel(grid)]
            }
        }, 'grid-panel');
    
        grid.render();
    
        ds.load();
    });
    I copied most of the code from various examples. I have also tried moving the border layout to the bottom and doing

    Code:
    var north = new Ext.NestedLayoutPanel(gridlayout); 
    var center = new Ext.ContentPanel('bottom'); 
    var layout = new Ext.BorderLayout('outer', {     
      north: { split:true, initialSize: 200}, 
      center: {}}); 
            
    layout.add('north', north); 
    layout.add('center', center);
    The first one doesn't resize the grid properly and the second one does strange things when moving the splitter. Bits of panels seem to get out of place.

    I would prefer fixing the first version as it will be easier to incorporate into my app. I have tried handling regionresized and calling grid.autoSize() but it doesn't seem to work.


    Here is the complete code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Manage Accounts</title>
        
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ytheme-aero.css" />
        
        <script type="text/javascript" src="extjs/utilities.js"></script> 
        <script type="text/javascript" src="extjs/ext-yui-adapter.js"></script> 
        <script type="text/javascript" src="extjs/ext-all-debug.js"></script> 
        
        <script type="text/javascript">
    Ext.onReady(function(){    
        
        var north = new Ext.ContentPanel('top'); 
        var center = new Ext.ContentPanel('bottom'); 
        var layout = new Ext.BorderLayout('outer', {     
            north: { split:true, initialSize: 200}, 
            center: {}}); 
            
        layout.add('north', north); 
        layout.add('center', center);         
    
        // shorthand alias
        var fm = Ext.form, Ed = Ext.grid.GridEditor;
    
        var cm = new Ext.grid.ColumnModel([
    		{header: "Coach Name", width: 200, dataIndex: 'name', editor: new Ed(new fm.TextField({allowBlank: true}))},
    		{header: "Coach Email", width: 200, dataIndex: 'email', editor: new Ed(new fm.TextField({allowBlank: true}))},
    		{header: "Coach Password", width: 200, dataIndex: 'password', editor: new Ed(new fm.TextField({allowBlank: true}))},
    		{header: "Assigned Clients", width: 170, dataIndex: 'assigned', editor: new Ed(new fm.TextField({allowBlank: true}))}
    	]);
    
        // by default columns are sortable
        cm.defaultSortable = true;    
    
        var ds = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({url:"GetAccounts.aspx"}),
            reader: new Ext.data.ArrayReader({id: 0}, [
               {name: 'id'},
               {name: 'name'},
               {name: 'email'},
               {name: 'password'},
               {name: 'assigned'}
          ])
        });
    
        // create the editor grid
        var grid = new Ext.grid.EditorGrid('grid', {
            ds: ds,
            cm: cm,
            enableColLock:false
        });
      
        var layout = Ext.BorderLayout.create({
            center: {
                margins:{left:3,top:3,right:3,bottom:3},
                panels: [new Ext.GridPanel(grid)]
            }
        }, 'grid-panel');
    
        // render it
        grid.render();       
    
        // trigger the data store load
        ds.load();
    });
    
    </script>
    </head>
    
    <body>
        <form name="form1" method="post" action="ManageAccounts.aspx" id="form1">
        <div id="outer">
            <div id="top">
                <div id="grid-panel" style="overflow:hidden;position:absolute;height:100%;">
                    <div id="grid" style="overflow:hidden;"></div>
                </div>
            </div>
            <div id="bottom" style="background:red;"></div>
        </div>
        </form>
    </body>
    </html>

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

      0  

    Default


    Have you tried adding the GridPanel directly to "north" in the first layout? That will fix your issue.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    61
    Vote Rating
    0
    steven is on a distinguished road

      0  

    Default


    I will give that a go but in my more complex screen I actually have a number of other controls in the "north" section. I will see if I can rearrange it all to work or I might have to post a more complicated example.

    Is there a way to force the grid to properly layout within its panel? As I mentioned I tried autoSize() but it didn't do anything. (Even in my broken example the grid sizes properly when the browser is resized, it just fails when the splitter is moved.)

  4. #4
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    If the grid is to know anything about the panel it's in and the dimensions it must size to, it must be in a gridpanel or you'll have to manually hook up a bunch of event listeners and custom resizing logic yourself.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    61
    Vote Rating
    0
    steven is on a distinguished road

      0  

    Default


    Quote Originally Posted by JeffHowden
    If the grid is to know anything about the panel it's in and the dimensions it must size to, it must be in a gridpanel or you'll have to manually hook up a bunch of event listeners and custom resizing logic yourself.
    The grid is definitely in a gridpanel. The problem I am having is that the gridpanel is resizing correctly but the grid itself doesn't get resized.

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    220
    Vote Rating
    0
    dfenwick will become famous soon enough

      0  

    Default


    I don't mean to sound somewhat brash, but is there a specific reason you're overly complicating the layout? NestedLayoutPanel objects were added specifically for this type of thing. You can nest BorderLayout objects by using them. I have some 10 NestedLayoutPanel objects in my code.

    In your code, you're creating 2 ContentPanel objects. Those objects are aligned north and south. You're then creating (on the fly) another BorderLayout object. The LayoutRegion has no idea how to lay it out because there's no region associated with it. What's happening is your north/south objects are splitting properly, but your GridPanel isn't associated with anything, so the layout engine is putting it in the parent container. Since there's no association with the outside container from inside the GridPanel, and since a ContentPanel doesn't have any managerial control over layout of the things in its content, the grid will never get resized.

    You're nesting. North needs to be a NestedLayoutPanel, and inside north, you'll need to add your controls and GridPanel. You're trying to do something I **wish** was available, which is doing dynamic alignment (I already submitted an enhancement request for this). In a perfect world, we could just do a mainPanel.align('top', GridPanel) (yadda yadda yadda) and everything would automagically lay itself out. But that's not currently the case.

    Your order of creation should be:

    - Create main Borderlayout with a 'north' and 'south'
    - Add ContentPanel for 'south'
    - Create BorderLayout nested panel for grid with a 'center'
    - Create grid
    - Add GridPanel to your nested BorderLayout as 'center'
    - Add NestedLayoutPanel as 'center' to your main BorderLayout

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    61
    Vote Rating
    0
    steven is on a distinguished road

      0  

    Default


    Hi dfenwick,

    Thanks for that. I'll try again with your suggestions.

    I had been trying to use NestedLayoutPanel etc, the problem is that the pages are being adapted from some older code that is generating some pages in a particular way which makes it harder than it should be. That and I've only just started using extjs so I am not up to speed on how everything should be done yet.

    I was under the impression that "grid-panel" would be within "top" but I'll have another look at it all and see if I can figure it out or at least get closer and have some more specific questions.

Similar Threads

  1. Don't want border of a layout region
    By wavel in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 26 Feb 2007, 9:17 PM
  2. Grid on a border layout
    By rodiniz in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 24 Feb 2007, 8:30 AM
  3. Diagram showing border layout and grid containment
    By Herm in forum Community Discussion
    Replies: 4
    Last Post: 8 Feb 2007, 3:53 PM
  4. Border Layout preferences
    By Webnet in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 7 Feb 2007, 7:13 AM
  5. Border Layout Documentation
    By rwilkerson in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 18 Jan 2007, 3:40 AM

Thread Participants: 3

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi