1. #1
    Ext User
    Join Date
    Oct 2008
    Posts
    3
    Vote Rating
    0
    JbL is on a distinguished road

      0  

    Default [2.0.2/2.2] PanelGrid column headers disappear in IE6 if specify autoheight+width

    [2.0.2/2.2] PanelGrid column headers disappear in IE6 if specify autoheight+width


    When displaying a GridPanel in IE6, the column headers disappear if both autoheight and width parameters are set on the GridPanel. Sometimes the headers are initially present, and then disappear as soon as the cursor is moved over the grid.

    If the autoheight parameter is removed, and instead a height is set, then the column headers display correctly. If the width parameter is removed, then the headers are displayed. The problem only occurs if both autoheight and width are set.

    This happens in IE6 (6.0.2900.2180 SP2) on Windows XP Pro SP2, but works without problem in Firefox 3. I have not tried any other browser versions. The symptom is the same in Ext 2.02 and in Ext 2.2. I have not tried any other Ext versions.

    See the attached screen shots to see the symptom. The first screen shot is the IE6 grid, with the missing column headers. The second shot is the same code running in Firefox 3. Currently this is stopping me from using Ext for my application. Please let me know if there is a workaround.

    The complete code is listed below.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
        <title>Ext Ajax Bean Test</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
       
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
        </script>   
    
        <script type="text/javascript">
        var bean; // current bean being displayed on this page
       
        function processList() {
            var listProxy = new Ext.data.MemoryProxy(bean);
            var SubBean = Ext.data.Record.create([
                {name: 'id'},  
                {name: 'name'}, 
                {name: 'number'} 
            ]);
            var listReader = new Ext.data.JsonReader(
                { root: "list", id: "id" }, SubBean );
           
            var listStore = new Ext.data.Store({
                    proxy: listProxy,
                    reader: listReader
            });
            listStore.load();
           
            var listColModel = new Ext.grid.ColumnModel([
                {id:'id',header: "ID", width: 60, dataIndex: 'id'},
                {header: "Amount", width: 80, dataIndex: 'number'},
                {header: "Name", width: 100, dataIndex: 'name'}
            ]);
    
            var listGrid = new Ext.grid.GridPanel({
                store: listStore,
                colModel: listColModel,
                width:300,
               // height:200,
               // maxHeight:300,
                autoHeight:true,
                renderTo: 'listGridDiv' 
            });
        }
    
        Ext.onReady(function()
        {
            bean = {
                "list": [
                    { "id": "abc", "name": "Name abc", "number": 103 },
                    { "id": "bad", "name": "Name bad", "number": 104 },
                    { "id": "cab", "name": "Name cab", "number": 105 },
                    { "id": "def", "name": "Name def", "number": 106 },       
                    { "id": "rat", "name": "Name rat", "number": 107 }
                ]
            };     
            processList();
        });
        </script>
      </head>
      <body>
        <h1>Testing Ext Grid </h1>
        <div id="listGridDiv"/>
      </body>
    </html>
    Attached Images

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    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


    I never noticed this, but it needs:
    Code:
    .x-grid3-header {position: relative;}

  3. #3
    Ext User
    Join Date
    Oct 2008
    Posts
    3
    Vote Rating
    0
    JbL is on a distinguished road

      0  

    Default


    Thanks, Condor -- looks like that fixed it.

    JbL

  4. #4
    Ext User
    Join Date
    Oct 2008
    Posts
    1
    Vote Rating
    0
    khandakar is on a distinguished road

      0  

    Default


    Thanks very very mutch Condor. I was pained with that IE problem

  5. #5
    Ext User
    Join Date
    May 2009
    Posts
    2
    Vote Rating
    0
    smith2martin is on a distinguished road

      0  

    Default


    Condor / JbL,

    Where exactly did you apply the "" style? To the grid itself, or to the element the grid is rendered to? Also, if to the grid, did you use the style config option?

    Thanks.

  6. #6
    Ext User
    Join Date
    May 2009
    Posts
    2
    Vote Rating
    0
    smith2martin is on a distinguished road

      0  

    Default


    Never mind guys. Added it to my default stylesheet and all is well.

    Thanks very much for the answer to this one!

    martin

  7. #7
    Sencha User
    Join Date
    Dec 2007
    Posts
    40
    Vote Rating
    0
    nugatto is on a distinguished road

      0  

    Default


    Just in case someone still has a similar problem and that thread doesn't solve it completely.
    Header also dissapears on ie6 because of <center> tag or text-align: center style
    http://www.extjs.com/forum/showthrea...rid+header+ie6
    Last edited by nugatto; 4 Sep 2009 at 4:27 AM. Reason: missspelling

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