Results 1 to 4 of 4

Thread: add method and 100% height

  1. #1

    Default add method and 100% height

    Hello!
    I'm using the add method of a Panel to add a grid in it, but I cannot make the grid take 100% of height of the panel.

    How can I do?

    This is the definition of the TabPanel:
    PHP Code:
                    {
                        
    region'center',
                        
    margins'5 0',
                        
    xtype'tabpanel',
                        
    activeTab0,
                        
    items: [
                            {
                                
    title"La mia griglia",
                                
    listeners: {
                                    
    activate: function(panel) {
                                        
    attivaPannello1(panel);
                                    }
                                }
                            },
                            {
                                
    title"Altro",
                                
    listeners: {
                                    
    activate: function(panel) {
                                        
    attivaPannello2(panel);
                                    }
                                }
                            }
                        ]
                    } 
    This is the function:

    PHP Code:

            
    function attivaPannello1(panel) {
                var 
    store = new Ext.data.Store({
                    
    data: [
                        [
    10"Titolo"],
                        [
    11"Titolo2"],
                        [
    12"Titolo"],
                        [
    13"Titolo"],
                        [
    14"Titolo"],
                        [
    15"Titolo"],
                        [
    16"Titolo"],
                        [
    17"Titolo"],
                        [
    18"Titolo"],
                        [
    19"Titolo"],
                        [
    20"Titolo"],
                        [
    21"Titolo"],
                        [
    22"Titolo"],
                        [
    23"Titolo"],
                        [
    24"Titolo"],
                        [
    25"Titolo"]
                    ],
                    
    reader: new Ext.data.ArrayReader({id'id'}, ['id''title'])
                });

                var 
    grid = new Ext.grid.GridPanel({
                    
    storestore,
                    
    borderfalse,
                    
    layout'fit',
                    
    height200,
                    
    columns: [
                        {
    header'#'dataIndex'id'},
                        {
    header'Title'dataIndex'title'}
                    ]
                });
                
                
    panel.removeAll();
                
    panel.add(grid);
                
    panel.doLayout();
            } 
    The Panel load the grid correctly, but shows only one line.
    If I put height: 200 (for example) in the Panel, it works correctly, but by putting height: '100%' doesn't.

    Thanks
    Alessio

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    You need to cosider how that Panel is going to lay out the grid that you add.

    Read the full explanation of this at

    http://www.extjs.com/deploy/dev/docs...&member=layout

    Expand that section and read the whole thing.

  3. #3

    Default

    I used the "fit" option because I wanted the inner panel to fill the entire space, but it doesn't work.
    I think the problem is to use the add() method instead of loading it when the panel load.
    My problem is that in tabpanel a tab content is loaded once and then it is "cached" and not loaded again in ajax. For example, if I click on Panel2 I can load the content of that panel by ajax. Then I click on Panel3 and again on Panel2, the content of that panel is the same as before, even if someone in another part of the world has modified a line of the grid in the meantime.
    So I found the add() solution, that allow me to load the content everytime the tab change, even if it was already loaded before.

    I hope this was more explaining (and sorry for my english).

    Alessio

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    FitLayout does work. You are not using it.

    Code:
                            {
                                title: "La mia griglia",
                                listeners: {
                                    activate: function(panel) {
                                        attivaPannello1(panel);
                                    }
                                }
                            },
    You have NO layout. Which means, as the docs tell you in four separate places, that no sizing will be done.

Similar Threads

  1. Ext.Panel height: 100% best method?
    By SlashEMc2k in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 8 Jun 2011, 6:05 AM
  2. viewport 100% height
    By zyon in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 16 Jul 2009, 1:18 AM
  3. Grid with width: 100% and height: 100%
    By PHP Detonator in forum Ext 2.x: Help & Discussion
    Replies: 11
    Last Post: 14 Nov 2008, 9:46 AM
  4. How to add a 100% width/height table to a resizable window
    By okwei in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 18 Aug 2008, 1:22 AM
  5. how to customize the htmleditor's height? "height:100" has no effect
    By aeonsun in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 11 Dec 2007, 3:10 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •