Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Performnace issue in IE; Grouped grid is constantly requesting for an image in IE.

    I'm using smartgwt-2.4 & IE 8.0 and facing a performance related issue specific to IE Browser. On mozilla firefox 3.6 this is working fine.

    Issue:-
    I'm experiencing a performance issues when using the IE browser.

    There is a repeated request for an image when using a ListGrid in underneath scenario-
    "GET /<myAppDir>/images/ToolStrip/button/button_start.png HTTP/1.1" 404 1108

    It appears when a record is added/updated/removed in the ListGrid (which is also attached with datasource). Also it happens only when ListGrid is Grouped on some field. When ungrouped this won't happen at all.

    This request tries to get the image from the applications image directory instead of GWT's SKIN directory which resulted in 404 - Not Found. However, on hovering/rollover the same record the it tries to get the image from the correct path.

    It seems like this request is coming from the some smart gwt component.
    What I believe is that when grid is grouped, grid internally creates a tree to group items in a tree form and
    GWT is internally calling and displayed those state images.

    Is there any way to suppress those image calls?

    Can anybody help me out:-
    1) Why its reuesting for a perticular image.
    2) Why it tries to look for image into app image path instead of SKIN Dir.
    3) Also, how to prevent happening this.

    #2
    The fact that it's going to the app dir indicates the reference to this media is either in your application code or in customizations you've made to the skin. Search for "ToolStrip/button/button" to find it.

    Comment


      #3
      Thanks for the reply. I only found one reference of such an image in the whole application and that is inside the "skin_style.css".

      However, we are overriding this CSS for all three types of Skins but we are currently using the image @ only one place.

      File -> "skin_style.css"
      Part of this file for one the skin dir contains:-

      .sectionHeaderopened {
      background: url(./images/ToolStrip/button/button_start.png) repeat-x scroll;
      }
      .sectionHeaderclosed {
      background: url(./images/ToolStrip/button/button_start.png) repeat-x scroll;
      }

      When I try to dig more into this issue I found that this issue is caused when ListGrid:-
      - is grouped upon some field.
      - it uses a row to show an icon and group title text for grouping. (which is
      actually a group tree parent node).
      - backgroud of that row is using this image ("./images/ToolStrip/button/button_start.png")

      Now the behavior for using this image is different in both IE & Firefox:-

      Usage in Firefox:-
      =============
      Firefox uses the CSS class name i.e., class="sectionHeaderopened" inside the "Table > TR > TD".
      This CSS class name is pointing to the above mentioned class in CSS "skin_style.css" file. Which is returning the correct result i.e. image is found @ the SKIN Dir.

      <table width="361" cellspacing="0" cellpadding="2" border="0" style="table-layout: fixed; overflow: hidden; padding-left: 0px; padding-right: 0px;" class="listTable" id="isc_9Stable"><tbody></tbody><col width="361"><tbody>
      <tr><td height="28" align="left" class="sectionHeaderopened" style="padding-top: 0px; padding-bottom: 0px; width: 361px; overflow: hidden;" colspan="1"><div style="overflow: hidden;" cellclipdiv="true"><nobr><img width="1" height="1" border="0" align="TEXTTOP" suppress="TRUE" src="http://172.16.25.83/callcenter/callcenter/sc//skins/Enterprise/images/blank.gif">
      <img width="16" height="16" border="0" align="TEXTTOP" suppress="TRUE" src="http://172.16.25.83/callcenter/callcenter/sc//skins/Enterprise/images/ListGrid/group_opened.png">
      <img width="3" height="1" border="0" align="TEXTTOP" suppress="TRUE" src="http://172.16.25.83/callcenter/callcenter/sc//skins/Enterprise/images/blank.gif">
      Priority 3 (1)
      </nobr></div></td></tr>
      <tr><td height="28" align="left" class="tallCellSelectedDark" style="padding-top: 0px; padding-bottom: 0px; width: 361px; overflow: hidden;">
      .......
      .......
      .......
      </table>

      Usage in Internet Explorer 8.0:-
      =======================

      Unlike firefox; See how IE behaves in the same scenario.
      Inside the "TABLE > TR > TD".
      It uses the whole image path as mentioned in the "skin_style.css" file into the style tag instead of the CSS class name which firefox is used.

      <TABLE style="TABLE-LAYOUT: fixed; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; wrap: false" id=isc_7Btable class=listTable border=0 cellSpacing=0 cellPadding=2>
      <COLGROUP>
      <COL width=359>
      <TBODY>
      <TR>
      <TD style="BORDER-BOTTOM: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; FONT-FAMILY: Arial,Verdana,sans-serif; BACKGROUND: url(./images/ToolStrip/button/button_start.png) repeat-x; HEIGHT: 23px; COLOR: #333333; FONT-SIZE: 11px; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid; PADDING-TOP: 3px" height=28 align=left><NOBR><SPAN style="WIDTH: 1px; HEIGHT: 1px; OVERFLOW: hidden">&nbsp;</SPAN><IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://127.0.0.1:8888/callcenter/sc//skins/Graphite/images/ListGrid/group_opened.png',sizingMethod='scale')" border=0 align=textTop src="http://127.0.0.1:8888/callcenter/sc//skins/Graphite/images/blank.gif" width=16 height=16 suppress="TRUE"><SPAN style="WIDTH: 3px; HEIGHT: 1px; OVERFLOW: hidden">&nbsp;</SPAN>Priority 3 (1)</NOBR></TD></TR>
      <TR>
      <TD style="BORDER-BOTTOM: white 1px solid; PADDING-BOTTOM: 0px; TEXT-OVERFLOW: ellipsis; FONT-FAMILY: Arial,Verdana,sans-serif; BACKGROUND: #fceeaf; COLOR: #333333; FONT-SIZE: 11px; BORDER-TOP: #9fb7e9 1px dotted; PADDING-TOP: 0px" height=28 width=359 align=left><NOBR>
      .......
      .......
      .......
      </TABLE>


      Conclusion:-
      -------------
      So, now what happens in IE that, it tries to get that image from the current app context which is wrong and end up found nothing and HTTP 404 status is returned.

      15:50:05.496 0.000 s 1426 GET 127.0.0.1 404 text/html; charset=iso-8859-1 http://127.0.0.1:8888/images/ToolStrip/button/button_start.png

      =========================================================

      So, can anyone tell me that why IE messes this up.
      Is this an IE bug or SmartGWT issue ???

      Also, if there is any woraround other than directly copying this image to the app dir @ the place where this image path is requested.

      Note:-
      -----
      This is not the only image which has this behvior for IE. I've noticed one more image "./images/ListGrid/row_Over.png" having such a behavior.

      15:49:57.105 0.016 s 1414 GET 127.0.0.1 404 text/html; charset=iso-8859-1 http://127.0.0.1:8888/images/ListGrid/row_Over.png

      Please suggest.

      Comment


        #4
        This is, ironically, a consequence of something we need to do to make IE adequately fast - see fastCellUpdates. Possible workarounds are given there. Note, unless you're using skins from an older version, you should have seen the "tallBaseStyle" used automatically, which does not include an image background.

        Comment

        Working...
        X