1. #1
    Ext User
    Join Date
    Dec 2007
    Posts
    8
    Vote Rating
    0
    ljaeren is on a distinguished road

      0  

    Default Panel Expand/Collapse Icon Tooltip Solution

    Panel Expand/Collapse Icon Tooltip Solution


    Good design principles warrant adding a tooltip to the default collapse tool icons. I mined the code and discovered where I can insert a single tooltip message that will display when you mouseover the expand/collapse icon on the panel and accordion panel headers. The solution will work for whatever expand/collapse icon you want to use. The function where the code needs to change is - Ext.Panel = Ext.extend(...) View the attached ZIP for the coding solution. I provided a snapshot of changes made to ext-all.js and ext-all-debug.js.
    Attached Images
    Attached Files

  2. #2
    Ext User halkon_polako's Avatar
    Join Date
    Nov 2007
    Location
    Barcelona
    Posts
    193
    Vote Rating
    0
    halkon_polako is on a distinguished road

      0  

    Default


    Instead of inside the loop, a better place will be where the tool is created. Inside Panel.js, look for:
    Code:
    this.tools[this.collapseFirst?'unshift':'push']({
       id: 'toggle',
       handler : this.toggleCollapse,
       scope: this
    });
    and add the qtip attribute:

    Code:
    this.tools[this.collapseFirst?'unshift':'push']({
       id: 'toggle',
       handler : this.toggleCollapse,
       scope: this,
       qtip:"Click to expand/collapse panel"
    });
    Also, the text string should be localized to can use it with diferent languages, with, maybe, using a new attribute on Panel class and setting that attribute inside the locales files.

  3. #3
    Ext User
    Join Date
    Dec 2007
    Posts
    8
    Vote Rating
    0
    ljaeren is on a distinguished road

      0  

    Default


    Thank you for providing a more elegant solution. I am a novice with the Ext tools. I removed my previous code changes and updated ext-all.js and ext-all-debug.js appropriately. Works great. It would be nice to be able to set the panel collapse tool qtip in the config, versus in the code. I am a strong advocate of localization. I haven't started exploring how to do that using Ext components.

  4. #4
    Ext JS - Development Team J.C. Bize's Avatar
    Join Date
    May 2007
    Location
    Bay Area, CA
    Posts
    179
    Vote Rating
    0
    J.C. Bize is on a distinguished road

      0  

    Default


    I think it would make sense for this to be the default behavior, unless there is an wasy way to override this without editing ext-all.js/ext-all-debug.js.

    Cheers,
    JC

  5. #5
    Ext JS Premium Member watrboy00's Avatar
    Join Date
    Aug 2007
    Location
    Minneapolis, MN
    Posts
    473
    Vote Rating
    0
    watrboy00 is on a distinguished road

      0  

    Default


    http://www.extjs.com/forum/showthread.php?t=24425

    Yup, I think so as well. Should show tooltip if tooltips are enabled and if possible take some type of toolTipText config option for the tool.
    Eric Berens
    Intranet Systems Manager @ Best Buy
    You should follow me on twitter here.

  6. #6
    Ext User
    Join Date
    Nov 2007
    Posts
    28
    Vote Rating
    0
    litera is on a distinguished road

      0  

    Default


    To all novice users:
    Normally you don't change ext-all.js and debug files. You normally leave library as is, because if you will upgrade in the future you won't be able to do it in an easy way. So. Make yourself a favour and don't do that. What you should do instead is provide a separate js file (or within your html, we don't really care) that will include all necessary class overrides/extensions.

    This way you will be able to EASILY upgrade ExtJS library and provide same overrides if still needed on the new version.
    Robert Koritnik
    .net development specialist

  7. #7
    Sencha User
    Join Date
    May 2010
    Posts
    16
    Vote Rating
    0
    softwareengineer is on a distinguished road

      0  

    Thumbs up Greate job

    Greate job


    @ Ijaeren

    thanks buddy, it was a great job. I implemented the same code according to your post and it worked.
    Keep it up.

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