Hybrid View

  1. #1
    Ext Premium Member staticboy's Avatar
    Join Date
    Aug 2007
    Posts
    19
    Vote Rating
    0
    staticboy is on a distinguished road

      0  

    Question fadeIn/fadeOut only works first time in Internet Explorer 7

    fadeIn/fadeOut only works first time in Internet Explorer 7


    I have a <div> as follows on my page:

    HTML Code:
    <div id="djcs-view-article" style="visibility:hidden;">
        ...
    </div>
    Elsewhere on the page is a Grid upon which I have set a rowclick listener (the grid is a list of news headlines). The handler is set to populate a second data.Store with the results of a JSON response and to fadeIn() the above <div> (which has been populated with the contents of a news article). The <div> then has a click handler which re-hides it by calling fadeOut().

    This all works perfectly in Firefox, but for some reason the fade-in and fade-out effect only accur once in Internet Explorer 7, the first time a headline is clicked and when that article is then closed. Subsequent article views result in the <div> popping in and out of existence instantly with no fade effect?

    No errors are being generated in either FireBug or IE. Has anyone else come across this?

    PHP Code:
            init : function() {

                
    // ...

                
    viewArticle Ext.get('djcs-view-article');
                
    viewArticle.on('click'this.hideArticlethis);

                
    // ...

                
    }); 
    PHP Code:
            getArticle : function(gridrowIndexe) {

                
    // ...

                // Align and resize article popup with resizeable grid
                
    viewArticle.alignTo('djcs-article-grid''tl-tl', [1010]);
                var 
    viewArticle_w Ext.get('djcs-article-grid').getWidth();
                var 
    viewArticle_h Ext.get('djcs-article-grid').getHeight();
                
    viewArticle.setWidth(viewArticle_w);
                
    viewArticle.setHeight(viewArticle_h);
                
    viewArticle.fadeIn({
                    
    duration.250,
                    
    useDisplayfalse
                
    });

                var 
    refs //... REMOVED FOR SECURITY

                
    ds_article.load({
                    
    params: {referencesrefs}
                });
            }, 
    PHP Code:
            hideArticle : function() {
                
    viewArticle.fadeOut({
                    
    duration.500,
                    
    useDisplayfalse
                
    });
            } 

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Not sure if you're still having this issue, but it came up in another thread that referenced this one (http://extjs.com/forum/showthread.php?p=84257).

    It appears that IE does not like useDisplay:false for the fade effects. Try switching to useDisplay:true instead. If you need to maintain the element's dimensions you may need to add a wrapping element to make it work.

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    1
    Vote Rating
    0
    mardlucca is on a distinguished road

      0  

    Default


    Great stuff, thanks for this man!

    My problem was slightly different though, I was trying to toggle (fade in/fade out) an Ext.Element without success in IE 8 (like you said, it worked the first time only). To make it work in IE I had to call "setVisibilityMode(Ext.Element.DISPLAY)" on my element before calling the "toggle" method. This did mess up my layout but I think I can figure something out about that.

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar