1. #1
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    -1
    mabello is an unknown quantity at this point

      0  

    Default GridPanel inside accordion layout forceFit problem IE6

    GridPanel inside accordion layout forceFit problem IE6


    Hi there,

    I'm trying to put inside a Panel with layout set to 'accordion' a GridPanel with forceFit=true;

    From the documentations of the GridPanel, I understand that you have to specify the width of the GridPanel or it will be calculated depending on Ext.Layout of the Panel which contains the grid.

    While in FF everything works fine, I have some problem with IE6, and the width of the columns is not right, and the first column is taking all the space while the others are not showed.

    This is the code (using the grid of Ext examples):
    HTML Code:
    <html>
    <head>    
        <title>Search Box Test</title>
        <link rel="stylesheet" type="text/css" href="../resources2.0.2/css/ext-all.css" />
    
    
        
        <script type="text/javascript" src="../scripts/Ext2.0.2/ext-base.js"></script>
        <script type="text/javascript" src="../scripts/Ext2.0.2/ext-all-debug.js"></script>
       <style type="text/css">
        .ext-ie .x-form-item label.x-form-item-label{position:absolute;}
        .ext-ie .x-form-label-top .x-form-item label.x-form-item-label{position:static;}
       </style>
    
    
    
    </head>
    <body>
        <div id="grid-example"></div>
    </body>
    </html>
    <script  type="text/javascript">
    
    
    var flag = true;
    
    var createGrid = function(){
        var myData = [
            ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
            ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
            ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
            ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
            ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
            ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
            ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
            ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
            ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
            ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
            ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
            ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
            ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
            ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
            ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
            ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
            ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
            ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
            ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
            ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
            ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
            ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
            ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
        ];
    	
    	function renderTopic(value, p, record){
            return String.format(
                    '<b><a href="#" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
                    value, record.data.forumtitle, record.id, record.data.forumid);
        }
        // example of custom renderer function
        function change(val){
            if(val > 0){
                return '<span style="color:green;">' + val + '</span>';
            }else if(val < 0){
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }
    
        // example of custom renderer function
        function pctChange(val){
            if(val > 0){
                return '<span style="color:green;">' + val + '%</span>';
            }else if(val < 0){
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }
    
        // create the data store
        var store = new Ext.data.SimpleStore({
            fields: [
               {name: 'company'},
               {name: 'price', type: 'float'},
               {name: 'change', type: 'float'},
               {name: 'pctChange', type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ]
        });
        store.loadData(myData);
    
    
        // create the Grid
        var grid = new Ext.grid.GridPanel({
    		region: 'center',
            store: store,
            columns: [
                {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', hidden: false},
                {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price', hidden: false},
                {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change', hidden: false},
                {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange', hidden: false},
                {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange', hidden: true}
            ],
            stripeRows: true,
            autoExpandColumn: 'company',
            height:450,
            title:'Array Grid',
    		viewConfig: {
                forceFit:true/*,
                enableRowBody:true,
                showPreview:true,
                getRowClass : function(record, rowIndex, p, store){
                    if(this.showPreview){
                        p.body = '<p style="color:red;">Write here write here Write here write here Write here write here Write here write here Write here write here </p>';
                        return 'x-grid3-row-expanded';
                    }
                    return 'x-grid3-row-collapsed';
                }*/
            }
        });
    	return grid;
    }
      
    
    Ext.onReady(function() {
    
        var fitPanel1 = {
            title: 'Title1',
            layout: 'fit',
            items: [createGrid()]
        }
        var fitPanel2 = {
            title: 'Title2',
            layout: 'fit',
            items: [createGrid()]
        }
        /*
        var accoridonPanel = new Ext.Panel({
            layout: 'accordion',
            items: [fitPanel1, fitPanel2]
        });
        */
         var accoridonPanel = new Ext.Panel({
            layout: 'accordion',
            items: [createGrid(), createGrid()]
        });
    
        new Ext.Viewport({
    		layout:'fit',
    		items:[accoridonPanel]
    	});
    })
    
    </script>
    I'm trying this:
    PHP Code:
    Ext.onReady(function() {

        var 
    fitPanel1 = {
            
    title'Title1',
            
    layout'fit',
            
    items: [createGrid()]
        }
        var 
    fitPanel2 = {
            
    title'Title2',
            
    layout'fit',
            
    items: [createGrid()]
        }
        
    /*
        var accoridonPanel = new Ext.Panel({
            layout: 'accordion',
            items: [fitPanel1, fitPanel2]
        });
        */
         
    var accoridonPanel = new Ext.Panel({
            
    layout'accordion',
            
    items: [createGrid(), createGrid()]
        });

        new 
    Ext.Viewport({
            
    layout:'fit',
            
    items:[accoridonPanel]
        });
    }) 
    Is it a bug or I'm missing out something? (I hope I'm missing out some configurations or I'm doing wrong!)
    Thanks a lot

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Try adding:

    Code:
    <style type="text/css">
      .x-grid3-header-offset {width: auto;}
    </style>

  3. #3
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    -1
    mabello is an unknown quantity at this point

      0  

    Default Some other problems

    Some other problems


    Thanks Condor for your quick reply, I really appreciate that.

    With your suggestion in IE6 apparently works when I load the page but now I have 2 different issues if I resize the browser:

    1)If I resize the windows browser (or if I have a split panel I guess and I resize it), reducing the width, the grid does not resize so I can't see the columns anymore (FF ok)

    2)If I resize the windows browser (or if I have a split panel I guess and I resize it), reducing the height, I can't see the scrollbars so I can't scroll in order to see all the rows of my grid. In order to reproduce this, you need to maximize the window of the browser, and then change the height (FF ok)
    Last edited by mabello; 28 Mar 2008 at 10:48 AM. Reason: changing point 2

  4. #4
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    -1
    mabello is an unknown quantity at this point

      0  

    Default Moving the thread in BUG

    Moving the thread in BUG


    I think it could be a BUG in IE6.
    Now my problem is that while I can play in Firefox with Firebug and the css, I can not do the same in IE6; I've installed in IE6 the plugin that is the IE developer toolbar, but I can't edit the css! Anyone know other tools?

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    Of course that should be

    Code:
        new Ext.Viewport({
            layout:'accordion',
            items:[createGrid(), createOtherGrid()]
        });
    })
    Where each grid is a different GridPanel. You can't add one Component in at two places.

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by Animal View Post
    You can't add one Component in at two places.
    If you look at the code you will see that createGrid will create a new component, so it won't add the same component twice.

    Coming back to the accordion layout with grids: Can't seem to fix that with a simple workaround...

  7. #7
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    -1
    mabello is an unknown quantity at this point

      0  

    Default Thanks guys

    Thanks guys


    createGrid is a factory method ideed.

    Thanks Animal and thanks Condor for the help, I really appreciate that.

    I will try to look at the problem, but if you two guys can't figure out how to fix it, I will be in trouble

    Thanks again

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    One thing to try is "over-nesting".

    Try putting each GridPanel inside a layout:'fit' Panel, and add that Panel to the accordion. It may be that the manipulations that the AccordionLayout layout manager class does somehow breaks the GridPanel, but I've seen GridPanels in layout:'fit' parents often.

  9. #9
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    -1
    mabello is an unknown quantity at this point

      0  

    Default


    Thanks Animal,
    I've already tried, if you look at my previuos code (and you are right, I've used this type of idea somewhere else and in some case it fixes the problem):
    PHP Code:
    Ext.onReady(function() {

        var 
    fitPanel1 = {
            
    title'Title1',
            
    layout'fit',
            
    items: [createGrid()]
        }
        var 
    fitPanel2 = {
            
    title'Title2',
            
    layout'fit',
            
    items: [createGrid()]
        }
        
    /*
        var accoridonPanel = new Ext.Panel({
            layout: 'accordion',
            items: [fitPanel1, fitPanel2]
        });
        */
         
    var accoridonPanel = new Ext.Panel({
            
    layout'accordion',
            
    items: [createGrid(), createGrid()]
        });

        new 
    Ext.Viewport({
            
    layout:'fit',
            
    items:[accoridonPanel]
        });
    }) 
    you can uncomment this
    PHP Code:
     /*
        var accoridonPanel = new Ext.Panel({
            layout: 'accordion',
            items: [fitPanel1, fitPanel2]
        });
        */ 
    But with the accordion no luck so far, unlucky!!

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Try:

    Code:
    layout: 'accordion',
    layoutConfig: {
    	autoWidth: false
    },