Results 1 to 2 of 2

Thread: [ux.ToolsTips] Quicktips for all your Panel Tools

  1. #1
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Lightbulb [ux.ToolsTips] Quicktips for all your Panel Tools

    Want QuickTips on the all those default Panel Tools? Now you can.

    This plugin allows you to define Quicktip text (or full configs) for those hard-to-reach tools and collapsible regions.

    See comments below:

    PHP Code:

    /**
     * @class Ext.ux.ToolsTips
     * @extends Object
     * @version 1.0.1
     * @license GPL 3.0
     * @copyright 2009, Doug Hendricks, The Active Group, Inc.
     * For Ext 3.0+
     * Plugin (ptype = 'toolstips') adds Tooltips to the standard and user-defined Panel tools.
     * A standard set of English defaults are built-in but each tool 'id' may be overridden with
     * either a simple text string or a full Quicktip cfg object (in any language locale you choose).
     * @ptype toolstips
     * @example
       
       var tt = new Ext.ux.ToolsTips(
          { tips: 
            {
             pin : 'Anchor this Window',
             help : { title: 'More about..', text: 'What this does' },
             refresh : 'Refresh this chart',
             maximize : 'Go Full Screen',
             minimize : 'Hide this thing'
           }
        });
        
        new Ext.Window({
          title : 'Products Chart',
          height: 500,
          width : 600,
          maximizable : true,
          minimizable : true,
          layout : 'fit',
          plugins : [ tt ],
          items : {
             xtype : 'somechart',
             tools : [ {id : 'refresh', handler : function() {} } ],
             plugins : [ tt ],
             }
        }).show()
       
        //or apply it to a Panel that's already rendered:
        tt.init(renderedPanel);
       
     */

    Ext.ux.ToolsTips = function(cfg){
        
    this.tools Ext.apply({}, (cfg||{}).tips || {}, this._tools);

        
    /**
         * List of Tools that tips were applied to. (for destruction/cleanup)
         * @type Array 
         */
        
    this.release = [];
    };

    Ext.extend(Ext.ux.ToolsTipsObject, {
            
        
    /**
         * @private English defaults (override each if necessary in the constructor tips:{} cfg)
         * @type {object} 
         */    
        
    _tools : {
              
    toggle 'Expand/Collapse',
              
    expand 'Expand',   //Use this one for collapsible region tool
               
    close 'Close',
            
    minimize 'Minimize',
            
    maximize 'Maximize',
             
    restore 'Restore'
                
    gear 'Configure',
                 
    pin 'Pin',
               
    unpin 'Unpin',
               
    right 'Collapse right',
                
    left 'Collapse left',
                  
    up 'Up',
                
    down 'Down',
             
    refresh 'Refresh'
               
    minus 'Subtract',
                
    plus 'Add',
                
    help 'Help',
              
    search 'Find',
                
    save 'Save',
               print : 
    'Print'
        
    },

        
    ptype    :  'toolstips',

        
    init : function(panel){
            
            if(
    Ext.QuickTips && Ext.QuickTips.isEnabled() && panel){ 
               
    panel.rendered 
                 
    this.applyTips(panel) :
                    
    panel.on('afterrender'this.applyTips this, {single:truedelay:1200}) ;
                    
               
    panel.on('destroy'this.releaseTipsthis);
             }
        },
        
        
        
    applyTips : function(comp){
           
           if(
    comp){
                var 
    CT comp comp.tools null
                    
    register Ext.QuickTips.register,
                    
    qtip Ext.QuickTips.getQuickTip(),
                    
    layout comp && comp.ownerCtcomp.ownerCt.layout null
                    
    region layout layout[comp.region] : null
                    
    ctooltipCfgcEl;
                
                
    Ext.iterate(this.tools, function(toolNametip){
                    
                       
    tipCfg Ext.isString(tip) ? {text tip } : tip || {text toolName } ; 
                        
                       if(
    CT && 
                         
    CT.hasOwnProperty(toolName) && 
                         !
    qtip.targets[CT[toolName].id//already defined inline?
                         
    ){
                          
    tipCfg.target CT[toolName];
                          
    registertipCfg );
                          
    this.release.push(CT[toolName]);
                       }

                       
    //Seek Border Layout region for collapse and other tools
                       
    if(region && (cEl region.getCollapsedEl()) && 
                          (
    ctool cEl.child('div.x-tool-'+toolName+'-'+comp.region))){
                              
    tipCfg.target ctool;
                              
    register(tipCfg);
                              
    this.release.push(ctool);
                       }
                }, 
    this);
                
            }
        },
        
    /**
         * @private
         */
        
    releaseTips : function(){
            
    Ext.each(this.release || [], function(tool){
               
    Ext.QuickTips && Ext.QuickTips.unregister(tool);
            });
        }
    });

    Ext.preg && Ext.preg('toolstips'Ext.ux.ToolsTips); 
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  2. #2
    Sencha User VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501

    Default

    Very cool man. Nicely done.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •