1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    0
    pisces13 is on a distinguished road

      0  

    Default tooltip and autoLoad problem

    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
    /start.html
    /js/start.js
    /js/help.js
    /manual/en/scrhelp/wizard.html
    .........

    some coding of start.js
    Code:
    Ext.onReady(function(){
        Ext.QuickTips.init();
        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'
        });
    });
    help.js

    Code:
    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;
                break;
            }
        }
        
        for (j=0; j<fileArray.length; j++)
        {
            if (panel == fileArray[j])
            {
                fileName = panel;
                helpstr = helpstr + fileName + str2;
                break;
            }
        }
        alert(helpstr);
        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 - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default use tooltip config object instead of instance

    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:
    Code:
    {
    text: 'Help Button', tooltip: {
    autoLoad: HelpFunc('wizard', 'en')
    }
    }
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Thread Participants: 1

Tags for this Thread