Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Nov 2008
    Posts
    10
    Vote Rating
    0
    staskorz is on a distinguished road

      0  

    Default [INFOREQ] Firefox - GridPanel missing right border

    [INFOREQ] Firefox - GridPanel missing right border


    I've searched the forums, but could not find any occurrence of this issue:

    extjs-grid-border-missing.png

    I am trying to run the code (http://extjs.com/downloads/tutorial/introduction-ext/IntroToExt2.zip) from the ExtJS tutorial (http://extjs.com/learn/Tutorial:Introduction_to_Ext_2.0). On the "grid" section, the tutorial instructs to add the following code, which creates a grid:

    PHP Code:
    Ext.onReady(function() {
        var 
    myData = [
            [
    'Apple',29.89,0.24,0.81,'9/1 12:00am'],
            [
    'Ext',83.81,0.28,0.34,'9/12 12:00am'],
            [
    'Google',71.72,0.02,0.03,'10/1 12:00am'],
            [
    'Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            [
    'Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
        ];
     
        var 
    myReader = new Ext.data.ArrayReader({}, [
            {
    name'company'},
            {
    name'price'type'float'},
            {
    name'change'type'float'},
            {
    name'pctChange'type'float'},
            {
    name'lastChange'type'date'dateFormat'n/j h:ia'}
        ]);
     
        var 
    grid = new Ext.grid.GridPanel({
            
    store: new Ext.data.Store({
                
    datamyData,
                
    readermyReader
            
    }),
            
    columns: [
                {
    header'Company'width120sortabletruedataIndex'company'},
                {
    header'Price'width90sortabletruedataIndex'price'},
                {
    header'Change'width90sortabletruedataIndex'change'},
                {
    header'% Change'width90sortabletruedataIndex'pctChange'},
                {
    header'Last Updated'width120sortabletrue
                    
    rendererExt.util.Format.dateRenderer('m/d/Y'), 
                                
    dataIndex'lastChange'}
            ],
            
    viewConfig: {
                
    forceFittrue
            
    },
            
    renderTo'content',
            
    title'My First Grid',
            
    width500,
            
    autoHeighttrue,
            
    frametrue
        
    });
     
        
    grid.getSelectionModel().selectFirstRow();
    }); 
    The grid looks fine both on IE7 and Opera 9.62, but for some reason the grid's right border is missing on Firefox 3.0.4.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    I just tried all the grid examples on the main site with FF 3.0.4 and I don't see any border issues. Have you tried these? Are you sure you haven't changed the CSS? It's also possible that the tutorial zips are using CSS files that have not been updated to deal w/FF 3.0.4 - they may be the original 2.0 files.

  3. #3
    Ext User
    Join Date
    Nov 2008
    Posts
    10
    Vote Rating
    0
    staskorz is on a distinguished road

      0  

    Default I don't know whether it's a bug, but...

    I don't know whether it's a bug, but...


    ... for the grid to work properly in FF3, the css (ext-all.css) MUST be loaded BEFORE the user JS code. For IE7 or Opera 9.62, it doesn't matter whether the css is loaded before or after the user JS code, but it does for FF.

    Works for IE7, Opera 9.62 and Firefox 3.0.4:
    HTML Code:
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        
        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
        <!-- --- -->
        
        <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="ExtStart.js"></script>
    
        <title>Introduction to Ext 2.0: Starter Page</title>
    </head>
    <body>
        <div id="content">
        </div>
    </body>
    </html>
    Works for IE7 and Opera 9.62, but not with Firefox 3.0.4:

    HTML Code:
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <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="ExtStart.js"></script>
    
        <!-- CSS - will not work for FF3 -->
        <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
        <!-- --------------------------- -->
    
        <title>Introduction to Ext 2.0: Starter Page</title>
    </head>
    <body>
        <div id="content">
        </div>
    </body>
    </html>
    Is it a bug or by design?

    PS: tryanDLS, thanks a lot for you help - I wouldn't figure it out without you pointing me to those examples.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    If CSS ordering is causing the problem, it's likely that there's a conflict between Ext and your own CSS. Hard to say exactly what without seeing your CSS. My initial thought would be that something in the base reset part of the ext.css (look at reset.css) is conflicting with something in your css. Usually this is caused by setting styles at a very generic level, rather than specific to a single item.

    You could bring up 2 versions of the page with the different include orders and compare which css is being applied in Firebug to see if you can pick out one that causing the problem.

  5. #5
    Ext User
    Join Date
    Nov 2008
    Posts
    10
    Vote Rating
    0
    staskorz is on a distinguished road

      0  

    Default I didn't use my own css in this example.

    I didn't use my own css in this example.


    I've used only the original css coming with ExtJS. The code I've posted in my previous post is the exact code I was using.

  6. #6
    Ext User
    Join Date
    Dec 2008
    Posts
    13
    Vote Rating
    0
    wilksm is on a distinguished road

      0  

    Post confirmation

    confirmation


    Quote Originally Posted by staskorz View Post
    I've used only the original css coming with ExtJS. The code I've posted in my previous post is the exact code I was using.
    I can confirm that I've been able to reproduce this as staskorz says. FF3.0.4, no other style sheets involved. If the CSS includes come after the JS ones, right borders are missing. Put CSS first and they appear again.

  7. #7
    Ext User
    Join Date
    Dec 2008
    Posts
    13
    Vote Rating
    0
    wilksm is on a distinguished road

      0  

    Default


    FYI, I was using Tabs and Trees instead of Grids, but they both exhibited this bug.

  8. #8
    Ext User
    Join Date
    Nov 2008
    Posts
    10
    Vote Rating
    0
    staskorz is on a distinguished road

      0  

    Default Shout it be classified as a bug?

    Shout it be classified as a bug?


    Or maybe it's by design? Or just an undocumented requirement? Or maybe it's an FF bug, not ExtJS bug?

  9. #9
    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


    Quote Originally Posted by staskorz View Post
    Or maybe it's by design? Or just an undocumented requirement? Or maybe it's an FF bug, not ExtJS bug?
    It's a weird FF3 bug. At least the workaround is very easy.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  10. #10
    Ext User
    Join Date
    Nov 2008
    Posts
    10
    Vote Rating
    0
    staskorz is on a distinguished road

      0  

    Default Created a Firefox bug report (468303)

    Created a Firefox bug report (468303)


    URL: https://bugzilla.mozilla.org/show_bug.cgi?id=468303