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

      0  

    Default getting the collapser to work

    getting the collapser to work


    Hi, I recently psoted a script request for a animatied collapser at http://www.yui-ext.com/forum/viewtopic.php?t=2045
    and from there i was lead to this post http://www.yui-ext.com/forum/viewtopic.php?t=1232

    I just need help getting it to work properly because right now non of it works for me. Just wondering what Im doing wrong.

    1. Downloaded the YahooUserInterface and placed the required files: yahoo-debug.js, dom-debug.js, event-debug.js, animation-debug.js
    2. Made my own yui-ext with these selections; Animator Core, YAHOO.ext.View and all the core YAHOO.ext
    3. Also saved my own file called collapser.js with the following code:

    collapser.js
    Code:
    // Collapser
    
    var Collapser = function(collapsableContainer){
    
       containerEl = getEl(collapsableContainer);
       this.clickEl = getEl(YAHOO.util.Dom.getElementsByClassName('ycollapsable-menuhead', null, collapsableContainer)[0]);
       this.collapseEl = getEl(YAHOO.util.Dom.getElementsByClassName('ycollapsable-menucontent', null, collapsableContainer)[0]);
       this.clickEl.addClass('ycollapsable-expanded');
       
       this.id = containerEl.id;
       this.enabled = true;
       this.collapsed = false;
       
       this.clickEl.mon('click', function(){
          if (this.enabled) this.collapsed == true ?
             this.expand() : this.collapse();
       }, this, true);
       
       this.events = {
            'expanded' : new YAHOO.util.CustomEvent('expanded'),
            'collapsed' : new YAHOO.util.CustomEvent('collapsed'),
            'enabled' : new YAHOO.util.CustomEvent('enabled'),
            'disabled' : new YAHOO.util.CustomEvent('disabled')
        };
       
    };
    
    YAHOO.extendX(Collapser, YAHOO.ext.util.Observable, {
    
       collapse : function(animate){
          if (!this.collapsed) {
              this.collapseEl.clip();
              if (animate == null || animate == true) {
                 this.collapseEl.setHeight(1, true, .15, this.afterCollapse.createDelegate(this), YAHOO.util.Easing.easeIn);
              } else {
                 this.collapseEl.setHeight(1);
                 this.afterCollapse();
              }
          }
       },
       
       afterCollapse : function(){
          this.collapsed = true;
          this.collapseEl.setDisplayed(false);
          this.clickEl.replaceClass('ycollapsable-expanded','ycollapsable-collapsed');
          this.fireEvent('collapsed', this);
       },
       
       expand : function(animate){
          if (this.collapsed) {
              this.collapseEl.setDisplayed(true);
              if (animate == null || animate == true) {
                 this.collapseEl.autoHeight(animate, .25, this.afterExpand.createDelegate(this), YAHOO.util.Easing.easeOut);
              } else {
                 this.collapseEl.autoHeight();
                 this.afterExapand();
              }
          }
       },
       
       afterExpand : function(){
          this.collapsed = false;
          this.collapseEl.unclip();
          this.collapseEl.setStyle('height', '');   
          this.clickEl.replaceClass('ycollapsable-collapsed','ycollapsable-expanded');
          this.fireEvent('expanded', this);
       },
       
       enable : function(){
          this.enabled = true;
          this.clickEl.removeClass('ycollapsable-disabled');
          this.fireEvent('enabled', this);
       },
       
       disable : function(animate){
          this.enabled = false;
          this.collapse(animate);
          this.clickEl.addClass('ycollapsable-disabled');
          this.fireEvent('disabled', this);
       },
       
       restoreState : function(defaultState, provider){
          if(!provider){
             YAHOO.ext.state.Manager.setProvider(new YAHOO.ext.state.CookieProvider());
             provider = YAHOO.ext.state.Manager;
          }
          var sm = new CollapserStateManager();
          sm.init(this, provider, defaultState);
       }
    });
    
    var CollapserStateManager = function(collapserObject, provider){
    
      this.state = {
         collapsed: true,
         enabled: true
      };
       
    };
    
    CollapserStateManager.prototype = {
        init : function(collapser, provider, defaultState){
           
            this.provider = provider;
           
            if (!defaultState) {
                  defaultState = { enabled: true, collapsed: false };
            }
            var savedState = provider.get(collapser.id+'-collapser-state');
            this.state = savedState || defaultState;
           
             if(this.state.collapsed){                           
                collapser.collapse(false);
             } else {
                collapser.expand(false);
             }
    
             if(this.state.enabled == true){
                collapser.enable();
             }else{
                collapser.disable();
             }
               
            this.collapser = collapser;
            collapser.on('collapsed', this.onCollapsed, this, true);
            collapser.on('expanded', this.onExpanded, this, true);
            collapser.on('enabled', this.onEnabled, this, true);
            collapser.on('disabled', this.onDisabled, this, true);
        },
       
        storeState : function(){                   
            this.provider.set(this.collapser.id+'-collapser-state', this.state);
        },
       
        onCollapsed : function(){
            this.state.collapsed = true;
            this.storeState();
        },
       
        onExpanded : function(){
            this.state.collapsed = false;
            this.storeState();
        },
       
         onEnabled : function(){
            this.state.enabled = true;
            this.storeState();
        },
       
         onDisabled : function(){
            this.state.enabled = false;
            this.storeState();
        }
    };
    HTML:
    Code:
    <html>
    <head>
       <script type="text/javascript" src="js/yahoo-debug.js"></script>
       <script type="text/javascript" src="js/dom-debug.js"></script>
       <script type="text/javascript" src="js/event-debug.js"></script>
       <script type="text/javascript" src="js/animation-debug.js"></script>
       <script type="text/javascript" src="js/yui-ext.js"></script>
       <script type="text/javascript" src="js/collapser.js"></script>
       <style>
          .ycollapsable-menuhead {border:1px solid #555;background:#369;color:#fff;cursor:pointer;padding-left:10px;}
          .ycollapsable-menucontent {border:1px solid #555;padding:20px;}
          .ycollapsable-disabled {background:#999;color:#ddd;cursor:default;}
       </style>
    </head>
    <body>
        <div id="collapser1" class="ycollapsable">
            <div class="ycollapsable-menuhead">
                Header
            </div>
            <div class="ycollapsable-menucontent">
                <div>
                    Content
    Content
    Content
    Content
                </div>
            </div>
        </div>
    
        <div id="collapser2" class="ycollapsable">
            <div class="ycollapsable-menuhead">
                Header 2
            </div>
            <div class="ycollapsable-menucontent">
                <div>
                    Content 2
    Content 2
                </div>
            </div>
        </div>
    
       
    
    <input id="toggleButton" type="button" value="Enable" /></p>
    
        <script>
            var coll1 = new Collapser('collapser1');
            var coll2 =  new Collapser('collapser2');
    
            coll1.restoreState({enabled: true, collapsed: true});
            coll2.restoreState({enabled: false});
            setButtonState();
    
            YAHOO.util.Event.on('toggleButton', 'click', toggleCollapser, coll2, true);
    
          function toggleCollapser(){
             if (coll2.enabled) {
                coll2.disable(false);
             }
             else {
                coll2.enable(false);
             }
             setButtonState();
          }
    
          function setButtonState() {
             YAHOO.util.Dom.get('toggleButton').value = (coll2.enabled ? "Disable" : "Enable");
          }
        </script>
    </body>
    </html>

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

      0  

    Default


    'Nothing works' doesn't tell us much. What error are you getting? Did you use a debugger to find out where the error is occurring?

    If you are new to yui-ext, you should not be spending time creating your own version of the yui-ext.js, until you understand the dependencides - it's possible you're missing a required component.

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

      0  

    Default


    Sorry, by saying nothing happens I mean that when I click on Hearder1 or Header2 or the Enable button there are no errors nothing. I think I might be doing something wrong. Im not too sure of how it works. If someone could show me how to set the yui from http://www.yui-ext.com/forum/viewtopic.php?t=1232 up properly that would be very much appreciated.

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

      0  

    Default


    I copied your code verbatim and it works perfectly. Your build of yui-ext is bad -- start with the version of 'yui-ext.js' that comes with the released library, and as Tim said, only start trying to build your own when you're more comfortable with what all the dependencies are. You are undoubtedly getting an error somewhere, you just probably aren't seeing it (do you use Firebug?).

Similar Threads

  1. BUG: ClickRepeater doesn't work with JQuery
    By Draven in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 13 Mar 2007, 5:14 AM
  2. Show Off Your Work
    By patspats in forum Community Discussion
    Replies: 1
    Last Post: 21 Feb 2007, 2:17 PM
  3. Can't seem to get the Menu From the YUI to work with .ext
    By greyknght1 in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 26 Jan 2007, 3:02 PM
  4. Can't get the rss feed viewer to work
    By ib in forum Ext 1.x: Help & Discussion
    Replies: 16
    Last Post: 6 Jan 2007, 9:21 AM
  5. Row over not work!!
    By galdaka in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 20 Oct 2006, 4:47 AM

Thread Participants: 2