Results 1 to 2 of 2

Thread: tooltip and autoLoad problem

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Vote Rating

    Default tooltip and autoLoad problem

    Good day.

    I have a program with different panels. Each panel would have a top toolbar containing a 'Help' Button.
    I am trying to use autoLoad config on the button to show a tooltip. The tooltip gets its source from a HTML file. I would like to use autoLoad to call a function to find the HTML file according to different panels.
    Example, panel Wizard will have a help file named wizard.html

    My file structure is

    some coding of start.js
        var tiptest = new Ext.ToolTip({
            autoLoad: HelpFunc('wizard','en')    // this function is found in help.js. wizard is fileName, en is Language
        var start = new Ext.Panel({
            id: 'start-panel',
            border: false,
            renderTo: Ext.getBody(),
            tbar: new Ext.Toolbar({
                items: ['->',{
                    text: 'Help Button',
                    id: 'wizard',
                    tooltip: tiptest
            html: 'this is a panel'

    function HelpFunc(panel,lang){
        var helpstr = '';
        var fileLocation1 = '{url: \'manual/';
        var fileLocation2 = '/scrhelp/';
        var str2 = '.html\'}'
        var fileName = '';
        var fileLang = '';
        var fileArray = new Array(3);
        var langArray = new Array(2);
        fileArray[0] = 'wizard';
        fileArray[1] = 'ra';
        fileArray[2] = 'wa';
        langArray[0] = 'en';    // english
        langArray[1] = 'ch';    // chinese
        for (i=0; i<langArray.length; i++)
            if (lang == langArray[i])
                fileLang = lang;
                helpstr = fileLocation1 + fileLang + fileLocation2;
        for (j=0; j<fileArray.length; j++)
            if (panel == fileArray[j])
                fileName = panel;
                helpstr = helpstr + fileName + str2;
        return helpstr;
    My questions:
    1. Is above implementation wrong? (i.e. is my concept wrong?)
    2. I read the API doc of Ext.Button. Under 'tooltip' stated it accepts string or QuickTips config object. But when I read about QuickTips, it stated there it's a sigleton. I don't quite understand the word 'singleton'. Is it correct to use a ToolTip object for 'tooltip' config?
    3. autoLoad config is
    autoLoad: {url: 'someName.html'}
    When I return a HTML string from HelpFunc, do I need to include the '{' and '}' like what I did in the function?

    Any comment and error found please feel free to comment. I might also miss some important points.
    I am trying my best effort to learn ExtJS.
    Thank you.

  2. #2
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Vote Rating

    Default use tooltip config object instead of instance

    1. Actually, i cannot say it's wrong, but it looks like Ext.Button accepts tooltip property as a config object or a string, i guess that's how it works.

    2. Here, you cannot use an instance of Ext.ToolTip, because tooltips of buttons, inputs and other various components refer to the same single QuickTip instance object. So, that's why it's not needed to get a new tip instance for each component if they are shown one by one. That makes your application lighter.

    3. As a suggestion, use below for your toolbar button:
    text: 'Help Button', tooltip: {
    autoLoad: HelpFunc('wizard', 'en')
    }, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

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