1. #1
    Sencha User vmorale4's Avatar
    Join Date
    Mar 2007
    Location
    Chicago, IL
    Posts
    189
    Vote Rating
    1
    vmorale4 is on a distinguished road

      0  

    Default Grid contents garbled when document.domain has been set (FF)

    Grid contents garbled when document.domain has been set (FF)


    When I include the Data grid in a page that uses document.domain, the contents look garbled in Firefox 1.5 or Firefox 2.0. (it looks fine in IE). We are trying to integrate the data grid in one of our company's pages, and that page requires to set document.domain.

    Below is a quick example to reproduce the problem.

    Note: For simplicity, in this example I am creating the XML document from a string using the Mozilla-only DomParser object.

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>XML Grid Example</title>
    
    <script type="text/javascript" src="du_main2.js"></script>
    <link rel="stylesheet" type="text/css" href="grid.css" />
    <script type="text/javascript" src="cssQuery.js"></script>
    <script type="text/javascript">
    document.domain="localhost";
    var XmlExample = {
        init : function(){
          
            var schema = {
                tagName: 'employee',
                id: 'emplid',
                fields: ['lastname', 'name', 'emplid']
            };
            
            var xmldoc="<?xml version='1.0' encoding='UTF-'?><table><employee><emplid>100</emplid><name>Bob</name><lastname>Bug</lastname></employee><employee><emplid>200</emplid><name>Sally</name><lastname>Simple</lastname></employee></table>";
            var xml = (new DOMParser()).parseFromString(xmldoc, 'text/xml');
            dataModel = new YAHOO.ext.grid.XMLDataModel(schema, xml);
                   
            var colModel = new YAHOO.ext.grid.DefaultColumnModel([
    			{header: "Last Name", width: 120, sortable: true},
    			{header: "First Name", width: 180, sortable: true},
    			{header: "EMPLID", width: 115, sortable: true}
    		]);
    
    		// create the Grid
            var grid = new YAHOO.ext.grid.Grid('example-grid', dataModel, colModel);
            grid.autoWidth = true;
            grid.autoHeight = true;
            grid.render();
        }
    }
    </script>
    </head>
    <body>
    <div onclick="XmlExample.init();">click me</div>
    <div id='example-grid' style="width:450px"></div>
    </body>
    </html>
    If you comment the document.domain line, the datagrid will display correctly[/code]

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

      0  

    Default


    I'm not sure what you're trying to accomplish by setting document.domain. My guess would be that it's causing js and/or css files to not be found. Use a debugger to verify that all your components are being loaded.

  3. #3
    Sencha User vmorale4's Avatar
    Join Date
    Mar 2007
    Location
    Chicago, IL
    Posts
    189
    Vote Rating
    1
    vmorale4 is on a distinguished road

      0  

    Default


    Looking at the DOM Inspector, I noticed that the style.left and style.width for the span where the rows are rendered are not being set when document.domain is being set in the javascript.

    I tried pasting the contents of grid.css directly on my page, but the problem still exist

  4. #4
    Sencha User vmorale4's Avatar
    Join Date
    Mar 2007
    Location
    Chicago, IL
    Posts
    189
    Vote Rating
    1
    vmorale4 is on a distinguished road

      0  

    Default


    I am not getting any errors in the Javascript Console (I am using Firebug as well). My guess is that the YUI-Ext library .js is catching the errors, but I haven't look at the code closely.

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

      0  

    Default


    use the -debug.js file and wrap your code with try/catch so you can see the error

  6. #6
    Sencha User vmorale4's Avatar
    Join Date
    Mar 2007
    Location
    Chicago, IL
    Posts
    189
    Vote Rating
    1
    vmorale4 is on a distinguished road

      0  

    Default I uploaded a sample test case to a web server

    I uploaded a sample test case to a web server


    I switched to all the -debug libraries, and I am not getting any errors, but the bug still persists.

    You can check it here:

    using document.domain
    http://www.climbforacause.org/bugtes...id-domain.html


    The page displays correctly in IE, but not in FireFox.


    As a reference, when document.domain is not being used, the page displays correctly in both Firefox and IE.

    http://www.climbforacause.org/bugtes...-nodomain.html
    [/url]

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


    FYI, it works fine when accessing it via http://climbforacause.org/bugtest/ex...id-domain.html. Notice the lack of "www." in the URL. I don't know what about the JS or CSS is failing, but clearly document.domain must *exactly* match the domain of the site.

  8. #8
    Sencha User vmorale4's Avatar
    Join Date
    Mar 2007
    Location
    Chicago, IL
    Posts
    189
    Vote Rating
    1
    vmorale4 is on a distinguished road

      0  

    Default


    I found out that commenting the following lines from grid.css file has the same effect as setting document.domain in the page

    Code:
    .ygrid-col-0{
    }
    .ygrid-col-1{
    }
    
    .ygrid-col-2{
    }

    Apparently when those classes are not present the width for the columns is being set to 0px and that's why in each row the text appears in the same column.

    My next attempt was to add those css class definitions directly in the html file, but the table still displayed incorrectly. Interestingly enough, when I added the css classes directly in the page, if I changed the color for the cell, the color changed, but the width bug still persisted!

    Code:
    <style>
     .ygrid-col-0{
    	color:blue;
    	
    }
    .ygrid-col-1{
    	color:orange;
    }
    .ygrid-col-2{
    	color:green;
    }
    </style>
    I also tried adding width:100px to those classes, but that didnt' make a difference.

    p.s. Changing document.domain is not a possibility for me, since it is not set by me, but rather automatically by a Peoplesoft Portal where I am using the grid.[/code]

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    The GridView modifies the CSS rules for the columns.

    I'm not following the discussion fully, but could it be a security problem caused by trying to update the rules?

    Ext 0.40 should not exhibit this behaviour because it creates private stylehseets to contain the grid column class settings.

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


    Additionally, while you may not maintain the document.domain bit, there's most likely something you can do to ensure that the domain the user is visiting with actually matches what document.domain is set to (ie, by redirecting them server-side or client-side).

Similar Threads

  1. Multiline grid cell contents
    By knagurski in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 17 Jul 2011, 11:39 PM
  2. wrap the contents of an element
    By knagurski in forum Community Discussion
    Replies: 8
    Last Post: 8 Jun 2009, 2:38 AM
  3. Resize dialog to fit contents
    By JeffHowden in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 2 Mar 2007, 6:48 PM
  4. AJAX Cross Domain
    By ameikle in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 12 Jan 2007, 1:03 PM
  5. YAHOO.ext.util.CSS's this.getRules Cross-Domain Security FF
    By chinohillsbanditos in forum Ext 1.x: Bugs
    Replies: 3
    Last Post: 14 Oct 2006, 12:03 PM

Thread Participants: 4