Loading ...
Sorry, an error occurred while loading the content.
 

Panel cfg object, setting properties query

Expand Messages
  • stuplum
    Hi All, I m trying to build my own versions of Panels, that I can re-use (as much for practice than actual pratical reasons at the moment). I ve got this code
    Message 1 of 4 , Oct 6, 2008
      Hi All,

      I'm trying to build my own versions of Panels, that I can re-use (as much for practice than actual pratical reasons at the moment).

      I've got this code so far:

      In a Global JS file:

      var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, Panel = YAHOO.widget.Panel;
          var BASE_IMG_MEDIA_URL = 'Content/Images';

          /*
              Set up some global SGP panels
          */
          // create SGP.panel namespace
          .namespace(["panel"]);

          // Modal Panel with title.
          SGP.panel.ModalRounded = function(title) {

              SGP.panel.ModalRounded.superclass.constructor.call(
                  this,
                  'sgp_panel_modal',
                  {
                      width: "600px",
                      fixedcenter: true,
                      constraintoviewport: false,
                      underlay: "none",
                      modal: true,
                      close: true,
                      visible: false,
                      draggable: true
                  }
              );

              this.setHeader('<div class="tl"></div><span>' + title + '</span><div class="tr"></div>');
              this.setBody('<img class="panel-waiting" src="' + BASE_IMG_MEDIA_URL + '/trans.gif" alt="waiting..." />');
              this.setFooter('<div class="bl"></div><span class="button-group"><a id="sgp_panel_modal_cancel" href="javascript: void(0)">cancel</a> | <button id="sgp_panel_modal_save">Save</button></span><div class="br"></div>');
              this.render(document.body);
          };
          if(Panel) {
              YAHOO.lang.extend(SGP.panel.ModalRounded, Panel);
          };

      In a Page specific JS file:

      ...

      open_preview: function(ev) {
                  var _onlinePreviewPanel;
                  if (!_onlinePreviewPanel) {
                      _onlinePreviewPanel = new LOOT.panel.ModalRounded(this.config.modal_box_title,
                          {
                              width: '900px'
                          }
                      );
                  };
                  // set body to what html were after
                  _onlinePreviewPanel.setBody(this.html);
                  _onlinePreviewPanel.cfg.setProperty("width", "900px", true);
                  // show the modal box
                  _onlinePreviewPanel.show();
              }

      ...


      As you can see, I extend the YAHOO panel to my own setting default properties, however I want to be able to overide these properties. The 'open_preview' function tries to overide the width property, in 2 ways, both don't work, what am I missing.

      Regards

      Stuart
    • Satyam
      One way to do it would be like this: SGP.panel.ModalRounded = function(title,oConfig) { SGP.panel.ModalRounded.superclass.constructor.call( this,
      Message 2 of 4 , Oct 6, 2008
        One way to do it would be like this:

        SGP.panel.ModalRounded = function(title,oConfig) {

        SGP.panel.ModalRounded.superclass.constructor.call(
        this,
        'sgp_panel_modal',
        {
        width:oConfig.width || "600px",
        fixedcenter: oConfig.fixedcenter !== false,

        And so on for the rest. You set the panel with the option coming from
        the extra argument oConfig and if there is none (undefined hence false)
        it will take your default. With fixedcenter you have to do it in
        another way since false is a valid setting so you set it to true if
        fixedcenter is anything but exactly false.

        Satyam

        stuplum wrote:
        > Hi All,
        >
        > I'm trying to build my own versions of Panels, that I can re-use (as
        > much for practice than actual pratical reasons at the moment).
        >
        > I've got this code so far:
        >
        > In a Global JS file:
        >
        > var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, Panel =
        > YAHOO.widget.Panel;
        > var BASE_IMG_MEDIA_URL = 'Content/Images';
        >
        > /*
        > Set up some global SGP panels
        > */
        > // create SGP.panel namespace
        > .namespace(["pa nel"]);
        >
        > // Modal Panel with title.
        > SGP.panel.ModalRounded = function(title) {
        >
        > SGP.panel.ModalRounded.superclass.constructor.call(
        > this,
        > 'sgp_panel_modal',
        > {
        > width: "600px",
        > fixedcenter: true,
        > constraintoviewport: false,
        > underlay: "none",
        > modal: true,
        > close: true,
        > visible: false,
        > draggable: true
        > }
        > ; );
        >
        > this.setHeader('<div class="tl"></div><span>' + title +
        > '</span><div class="tr"></div>');
        > this.setBody('<img class="panel-waiting" src="' +
        > BASE_IMG_MEDIA_URL + '/trans.gif" alt="waiting..." />');
        > this.setFooter('<div class="bl"></div><span
        > class="button-group"><a id="sgp_panel_modal_cancel" href="javascript:
        > void(0)">cancel</a> | <button
        > id="sgp_panel_modal_save">Save</button></span><div class="br"></div>');
        > this.render(document.body);
        > };
        > if(Panel) {
        > YAHOO.lang.extend(SGP.panel.ModalRounded, Panel);
        > };
        >
        > In a Page specific JS file:
        >
        > ...
        >
        > open_preview: function(ev) {
        > var _onlinePreviewPanel;
        > if (!_onlinePreviewPanel) {
        > _onlinePreviewPanel = new
        > LOOT.panel.ModalRounded(this.config.modal_box_title,
        > {
        > width: '900px'
        > }
        > );
        > };
        > // set body to what html were after
        > _onlinePreviewPanel.setBody(this.html);
        > _onlinePreviewPanel.cfg.setProperty("width", "900px", true);
        > // show th e modal box
        > _onlinePreviewPanel.show();
        > }
        >
        > ...
        >
        >
        > As you can see, I extend the YAHOO panel to my own setting default
        > properties, however I want to be able to overide these properties. The
        > 'open_preview' function tries to overide the width property, in 2
        > ways, both don't work, what am I missing.
        >
        > Regards
        >
        > Stuart
        >
        > ------------------------------------------------------------------------
        >
        >
        > No virus found in this incoming message.
        > Checked by AVG - http://www.avg.com
        > Version: 8.0.173 / Virus Database: 270.7.6/1709 - Release Date: 05/10/2008 9:20
        >
        >
      • stuplum
        Awesome, i thought it would be something like that, but wasn t sure, Big thanks. Stuart ... class= br ); ... true); ... The ... 05/10/2008 9:20
        Message 3 of 4 , Oct 6, 2008
          Awesome, i thought it would be something like that, but wasn't sure,

          Big thanks.

          Stuart


          --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
          >
          > One way to do it would be like this:
          >
          > SGP.panel.ModalRounded = function(title,oConfig) {
          >
          > SGP.panel.ModalRounded.superclass.constructor.call(
          > this,
          > 'sgp_panel_modal',
          > {
          > width:oConfig.width || "600px",
          > fixedcenter: oConfig.fixedcenter !== false,
          >
          > And so on for the rest. You set the panel with the option coming from
          > the extra argument oConfig and if there is none (undefined hence false)
          > it will take your default. With fixedcenter you have to do it in
          > another way since false is a valid setting so you set it to true if
          > fixedcenter is anything but exactly false.
          >
          > Satyam
          >
          > stuplum wrote:
          > > Hi All,
          > >
          > > I'm trying to build my own versions of Panels, that I can re-use (as
          > > much for practice than actual pratical reasons at the moment).
          > >
          > > I've got this code so far:
          > >
          > > In a Global JS file:
          > >
          > > var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, Panel =
          > > YAHOO.widget.Panel;
          > > var BASE_IMG_MEDIA_URL = 'Content/Images';
          > >
          > > /*
          > > Set up some global SGP panels
          > > */
          > > // create SGP.panel namespace
          > > .namespace(["pa nel"]);
          > >
          > > // Modal Panel with title.
          > > SGP.panel.ModalRounded = function(title) {
          > >
          > > SGP.panel.ModalRounded.superclass.constructor.call(
          > > this,
          > > 'sgp_panel_modal',
          > > {
          > > width: "600px",
          > > fixedcenter: true,
          > > constraintoviewport: false,
          > > underlay: "none",
          > > modal: true,
          > > close: true,
          > > visible: false,
          > > draggable: true
          > > }
          > > ; );
          > >
          > > this.setHeader('<div class="tl"></div><span>' + title +
          > > '</span><div class="tr"></div>');
          > > this.setBody('<img class="panel-waiting" src="' +
          > > BASE_IMG_MEDIA_URL + '/trans.gif" alt="waiting..." />');
          > > this.setFooter('<div class="bl"></div><span
          > > class="button-group"><a id="sgp_panel_modal_cancel" href="javascript:
          > > void(0)">cancel</a> | <button
          > > id="sgp_panel_modal_save">Save</button></span><div
          class="br"></div>');
          > > this.render(document.body);
          > > };
          > > if(Panel) {
          > > YAHOO.lang.extend(SGP.panel.ModalRounded, Panel);
          > > };
          > >
          > > In a Page specific JS file:
          > >
          > > ...
          > >
          > > open_preview: function(ev) {
          > > var _onlinePreviewPanel;
          > > if (!_onlinePreviewPanel) {
          > > _onlinePreviewPanel = new
          > > LOOT.panel.ModalRounded(this.config.modal_box_title,
          > > {
          > > width: '900px'
          > > }
          > > );
          > > };
          > > // set body to what html were after
          > > _onlinePreviewPanel.setBody(this.html);
          > > _onlinePreviewPanel.cfg.setProperty("width", "900px",
          true);
          > > // show th e modal box
          > > _onlinePreviewPanel.show();
          > > }
          > >
          > > ...
          > >
          > >
          > > As you can see, I extend the YAHOO panel to my own setting default
          > > properties, however I want to be able to overide these properties.
          The
          > > 'open_preview' function tries to overide the width property, in 2
          > > ways, both don't work, what am I missing.
          > >
          > > Regards
          > >
          > > Stuart
          > >
          > >
          ------------------------------------------------------------------------
          > >
          > >
          > > No virus found in this incoming message.
          > > Checked by AVG - http://www.avg.com
          > > Version: 8.0.173 / Virus Database: 270.7.6/1709 - Release Date:
          05/10/2008 9:20
          > >
          > >
          >
        • Satyam
          Actually, now that I think of it, this is not complete. It allows you to set only those options which have defaults, but does not allow you to set other
          Message 4 of 4 , Oct 6, 2008
            Actually, now that I think of it, this is not complete. It allows you
            to set only those options which have defaults, but does not allow you to
            set other options, if oConfig has other options apart from those with
            defaults, it will ignore them. This would work better:

            SGP.panel.ModalRounded = function(title,oConfig) {
            var options = {};
            for (var key in oConfig) {
            if (oConfig.hasOwnProperty(key) {
            options[key] = oConfig[key]
            }
            }

            options.width = options.width || "600px";
            options.fixedcenter = options.fixedcenter !== false;
            // ... all the rest
            SGP.panel.ModalRounded.superclass.constructor.call(
            this,
            'sgp_panel_modal',
            options
            )

            The above will first clone the options (otherwise you would be changing
            the original options passed to the constructor), either those with
            pre-set defaults and those not even contemplated (even those in possible
            future versions) and then it overrides those missing with the defaults.

            Satyam


            stuplum wrote:
            > Awesome, i thought it would be something like that, but wasn't sure,
            >
            > Big thanks.
            >
            > Stuart
            >
            >
            > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
            >
            >> One way to do it would be like this:
            >>
            >> SGP.panel.ModalRounded = function(title,oConfig) {
            >>
            >> SGP.panel.ModalRounded.superclass.constructor.call(
            >> this,
            >> 'sgp_panel_modal',
            >> {
            >> width:oConfig.width || "600px",
            >> fixedcenter: oConfig.fixedcenter !== false,
            >>
            >> And so on for the rest. You set the panel with the option coming from
            >> the extra argument oConfig and if there is none (undefined hence false)
            >> it will take your default. With fixedcenter you have to do it in
            >> another way since false is a valid setting so you set it to true if
            >> fixedcenter is anything but exactly false.
            >>
            >> Satyam
            >>
            >> stuplum wrote:
            >>
            >>> Hi All,
            >>>
            >>> I'm trying to build my own versions of Panels, that I can re-use (as
            >>> much for practice than actual pratical reasons at the moment).
            >>>
            >>> I've got this code so far:
            >>>
            >>> In a Global JS file:
            >>>
            >>> var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, Panel =
            >>> YAHOO.widget.Panel;
            >>> var BASE_IMG_MEDIA_URL = 'Content/Images';
            >>>
            >>> /*
            >>> Set up some global SGP panels
            >>> */
            >>> // create SGP.panel namespace
            >>> .namespace(["pa nel"]);
            >>>
            >>> // Modal Panel with title.
            >>> SGP.panel.ModalRounded = function(title) {
            >>>
            >>> SGP.panel.ModalRounded.superclass.constructor.call(
            >>> this,
            >>> 'sgp_panel_modal',
            >>> {
            >>> width: "600px",
            >>> fixedcenter: true,
            >>> constraintoviewport: false,
            >>> underlay: "none",
            >>> modal: true,
            >>> close: true,
            >>> visible: false,
            >>> draggable: true
            >>> }
            >>> ; );
            >>>
            >>> this.setHeader('<div class="tl"></div><span>' + title +
            >>> '</span><div class="tr"></div>');
            >>> this.setBody('<img class="panel-waiting" src="' +
            >>> BASE_IMG_MEDIA_URL + '/trans.gif" alt="waiting..." />');
            >>> this.setFooter('<div class="bl"></div><span
            >>> class="button-group"><a id="sgp_panel_modal_cancel" href="javascript:
            >>> void(0)">cancel</a> | <button
            >>> id="sgp_panel_modal_save">Save</button></span><div
            >>>
            > class="br"></div>');
            >
            >>> this.render(document.body);
            >>> };
            >>> if(Panel) {
            >>> YAHOO.lang.extend(SGP.panel.ModalRounded, Panel);
            >>> };
            >>>
            >>> In a Page specific JS file:
            >>>
            >>> ...
            >>>
            >>> open_preview: function(ev) {
            >>> var _onlinePreviewPanel;
            >>> if (!_onlinePreviewPanel) {
            >>> _onlinePreviewPanel = new
            >>> LOOT.panel.ModalRounded(this.config.modal_box_title,
            >>> {
            >>> width: '900px'
            >>> }
            >>> );
            >>> };
            >>> // set body to what html were after
            >>> _onlinePreviewPanel.setBody(this.html);
            >>> _onlinePreviewPanel.cfg.setProperty("width", "900px",
            >>>
            > true);
            >
            >>> // show th e modal box
            >>> _onlinePreviewPanel.show();
            >>> }
            >>>
            >>> ...
            >>>
            >>>
            >>> As you can see, I extend the YAHOO panel to my own setting default
            >>> properties, however I want to be able to overide these properties.
            >>>
            > The
            >
            >>> 'open_preview' function tries to overide the width property, in 2
            >>> ways, both don't work, what am I missing.
            >>>
            >>> Regards
            >>>
            >>> Stuart
            >>>
            >>>
            >>>
            > ------------------------------------------------------------------------
            >
            >>> No virus found in this incoming message.
            >>> Checked by AVG - http://www.avg.com
            >>> Version: 8.0.173 / Virus Database: 270.7.6/1709 - Release Date:
            >>>
            > 05/10/2008 9:20
            >
            >>>
            >
            >
            >
            > ------------------------------------
            >
            > Yahoo! Groups Links
            >
            >
            >
            > ------------------------------------------------------------------------
            >
            >
            > No virus found in this incoming message.
            > Checked by AVG - http://www.avg.com
            > Version: 8.0.173 / Virus Database: 270.7.6/1709 - Release Date: 05/10/2008 9:20
            >
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.