1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default Weird rendering issue when rendering more than 11 columns

    Weird rendering issue when rendering more than 11 columns


    Rendering more than 11 columns causes weird rendering issues in my app. I don't know why that seems to be the magic number, but it is.

    If I make the model contain 13 columns, the 12th and 13th column headers render, but inside the model info is blank. Then the data from those two columns renders on top of the first column.

    I'm trying to figure out how I can sanitise this client data so that I can put up an example to show you.

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default


    Ok here is an example of my problem.
    http://www.brokencrew.com/~sjacobs/grid/portal-yui.html

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default


    I'm using the Prototype library still. But If you'd like to see the problem:
    In my code:
    Code:
    var myColumns = $R(1, 11*2, false).collect ( function (col, idx) {
    				var even = {header: 'Week '+ Math.ceil(col/2) + '
    Actual', width: 50, renderer: hours}; 
    				var odd = {header: 'Week ' + Math.ceil(col/2) + '
    Budget', width: 50, renderer: hours};
    				return (idx % 2 ? even : odd);
    		});
    		myColumns = [{header: 'Labor Category', width: 300, renderer: italic}].concat(myColumns);
    If you change that to this:
    Code:
    var myColumns = $R(1, 10*2, false).collect ( function (col, idx) { /*** CHANGED 11 to 10 ***/
    				var even = {header: 'Week '+ Math.ceil(col/2) + '
    Actual', width: 50, renderer: hours}; 
    				var odd = {header: 'Week ' + Math.ceil(col/2) + '
    Budget', width: 50, renderer: hours};
    				return (idx % 2 ? even : odd);
    		});
    		myColumns = [{header: 'Labor Category', width: 300, renderer: italic}].concat(myColumns);
    It works, but of course you are now missing the last two columns worth of data on the page.[/code]

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


    Grab this file and include it:

    http://www.jackslocum.com/blog/css/reset-min.css and tell me if it fixes it.

    It's a very slightly modified version of yahoo standard css reset.

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default


    No difference. I also tried using reset.css and fonts.css from yahoo and that did nothing as well.

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default


    One thing I noticed, is if I remove the height of the element, it of course only renders the top portion. But I am able to scroll "further to the right" than if I do specify the height parameter. I don't know if that has anything to do with it.

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


    This was an interesting one.

    The problem is you are actually rendering 22 columns. Here's what I get for a row:

    <span tabindex="0" class="ygrid-col ygrid-col-0"><span class="ygrid-cell-text">Text For Row 2</span></span><span tabindex="0" class="ygrid-col ygrid-col-1"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-2"><span class="ygrid-cell-text"><div class="gridhours">32.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-3"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-4"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-5"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-6"><span class="ygrid-cell-text"><div class="gridhours">120.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-7"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-8"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-9"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-10"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-11"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-12"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-13"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-14"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-15"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-16"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-17"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-18"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-19"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-20"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-21"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span><span tabindex="0" class="ygrid-col ygrid-col-22 ygrid-col-last"><span class="ygrid-cell-text"><div class="gridhours">40.00</div></span></span></span>

    Notice it goes all the way to ygrid-col-21 and 22. In the default CSS file, I've only defined placeholder rules up to ygrid-col-20. So the extra ones are not being positioned.

    On a side note I notice you intend to have 2 grid in the same page. That's fine, but if you do you will have to define column placeholders for each column, for example:

    #mygrid .ygrid-col-0{
    }

    for as many columns as you have. The must be individual selectors and cant be combined. This is a limitation for multi grids in 1 page because they can't share the default rule and I am not aware of a way to dynamically create rules that works in Safari.

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default


    I realized the 22 column thing too after my initial post, however I was unaware that there were placeholder rules... I guess this is a by product of the positioning code. I was planning on having about 104 columns... (And was noticing that horizontal scrolling wasn't as optimized as vertical scrolling).

    I need to take a look and see how this impacts what I'm doing, and if I can think of a better way to optimize this.

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default


    Worst case I can dynamically generate the css for the page. Kind of ugly though.

  10. #10
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default


    ok so I see that you are using YAHOO.ext.util.CSS.updateRule to update the css rule dynamically. Could this be changed to us YAHOO.util.Dom.setStyle and giving every column's span an id? And then just setting the positioning attributes directly with the id? You could still skin the id's directly from CSS, and they would be easy to name. You pass the element to render to when you call the grid construct. So if that is gridID you could name things something like:
    Code:
    <span id="gridID-ygrid-col-1">...</span>
    Your css would certainly be a lot smaller since you would only need to define rules for columns that you didn't want to be the default.

    Thoughts?

Similar Threads

  1. Rendering fields while display: none
    By jeffiel in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 17 Jul 2008, 6:54 AM
  2. QTips rendering problem
    By Belgabor in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 16 Apr 2007, 10:16 AM
  3. [a3-r4]Datepicker: Different rendering on IE(6+7) vs. FF2
    By Wolfgang in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 2 Apr 2007, 12:48 AM
  4. Bug in rendering buttons in IE7?
    By kaoz in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 22 Feb 2007, 2:51 AM
  5. Grid: Bug when rendering >= 21 columns (w\Screenshots)
    By Integer in forum Ext 1.x: Bugs
    Replies: 2
    Last Post: 12 Feb 2007, 10:38 AM

Thread Participants: 2