1. #1
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    64
    Vote Rating
    2
    ojintoad is on a distinguished road

      0  

    Default YAHOO.ext.Element Display

    YAHOO.ext.Element Display


    I am just posting this in case anyone else has a similar issue.

    In the implementation of the YAHOO.ext.Element, there are two choices for how element Visibility is managed: using the Visibility style property or the Display style property. You can select which property gets changed by the classes' methods by calling the YAHOO.ext.Element.setVisibilityMode method with either of the two constants YAHOO.ext.Element.DISPLAY or YAHOO.ext.Element.VISIBILITY.

    Visiblity is an easy style property to handle since it just toggles between the visible and hidden values. However, if you choose to use the Display property, the class has to determine what possible Display property values you want to use (block, inline, inline-block, etc.). To handle this, it detects the initial display property of your element at object creation time, rather than assume you want all your items displayed as either block or inline elements.

    But what if you want your elements want to start out with display of none? You go to your style sheet, write "display:none" , use getEl to get your element, and call .show, but nothing shows up! Well, the methods to toggle visibilty actually use the initial display property when showing the element, so show is setting your element's display to none, just like it should.

    To work around this, all you need to do is use your CSS to show elements using whichever display style property you want, then write a page load event function to hide all the elements using the YAHOO.ext.Element functions.

    The additional benefit of this is the YAHOO.ext.Element class automagically caches each element to prevent lookups later.

    Alternately, you can avoid all this by using the Visibility Mode and visibility style property.

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Very nice post. I actually run into this myself from time to time. Most recently while creating the editors in the grid. The undocumented property originalDisplay on Element can also be manipulated in this situation.

    Also, it's worth noting that using visibility over display in most situations is preferred because in IE visibility is significantly faster.

    Jack

  3. #3
    Ext JS Premium Member schoterson's Avatar
    Join Date
    Mar 2007
    Location
    Los Altos, CA (South of SF)
    Posts
    23
    Vote Rating
    0
    schoterson is on a distinguished road

      0  

    Default autoDisplayMode not working properly

    autoDisplayMode not working properly


    I've followed the instructions outlined so that my css is set to display:block, I have the global flag setting the YAHOO.ext.Element.prototype.autoDisplayMode = true; This is redundant though since the latest ext package has it set to true. I have an onload function which does a getEl("someId").hide();. Looking at my page the div which should now have its diplay set to none is visibilitiy:hidden. Meaning I have the space reserved for this element.

    Can someone let me know what I'm doing wrong. I would really prefer to use the global flag because onload I plan on hiding numerous elements and it is painful to do
    Code:
    getEl("someId).setDisplayMode(YAHOO.ext.Element.Display);
    getEl("someId").hide();
    for each one.

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    autoDisplayMode can only detect display mode if the element starts with display:none. There's no other way for it to know that it should use display mode.

    A couple other ways:
    getEl("someId).setDisplayed(false);

    getEl('someId').enableDisplayMode().hide();

    But the easiest way is to just start it in display:none now that autoDetect exists.

  5. #5
    Ext JS Premium Member schoterson's Avatar
    Join Date
    Mar 2007
    Location
    Los Altos, CA (South of SF)
    Posts
    23
    Vote Rating
    0
    schoterson is on a distinguished road

      0  

    Default follow up on the autodisplay

    follow up on the autodisplay


    Thanks for the reply Jack. I've actually tried this with the css setting the element to display:none, however when I do getEl("someId").toggle(); it only changes the visibility of the element not the display. Assuming that the autoDisplayMode=true by default and my css says display:none is there another reason why my getEl("someId").toggle(); is adjusting the visibilty attribute and not the display?

    Also, can you enlighten my co-worker and I as to why you have a conditional statement of
    Code:
    if (this.orginalDisplay == 'none')
    inside :


    Code:
       this.originalDisplay = YAHOO.util.Dom.getStyle(this.dom, 'display') || '';
        if(this.autoDisplayMode){
            if(this.originalDisplay == 'none'){
                this.setVisibilityMode(YAHOO.ext.Element.DISPLAY);
            }
        }
    It seem to us that when autoDisplayMode=true it doesn't matter what the originalDisplay is, I'll always want to affect the display attribute of an element.

  6. #6
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Yeah, I forgot this was turned off due to Safari crashes and FireFox lockups (table elements). I plan on putting some time into it again version soon.

  7. #7
    Ext JS Premium Member schoterson's Avatar
    Join Date
    Mar 2007
    Location
    Los Altos, CA (South of SF)
    Posts
    23
    Vote Rating
    0
    schoterson is on a distinguished road

      0  

    Default autodisplay

    autodisplay


    Thanks again for the reply, your extension and assistance is invaluable. Good luck in the New Year, I/we look forward to your innovations.

Similar Threads

  1. Display bug in TabPanel (or possibly Element.toggle)?
    By SwellJoe in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 5 Mar 2007, 10:50 PM
  2. TabPanel eats display: inline; of parent element
    By SwellJoe in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 2 Mar 2007, 11:35 PM
  3. YAHOO.ext.Element and addListener
    By alex1er in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 18 Feb 2007, 2:57 AM
  4. YAHOO.ext.Element.get
    By jclawson in forum Ext 1.x: Bugs
    Replies: 2
    Last Post: 7 Feb 2007, 10:04 AM

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi