Results 1 to 8 of 8

Thread: Best Way to add a personal tool library to my Application

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    Compiegne FRANCE
    Posts
    48

    Default Answered: Best Way to add a personal tool library to my Application

    Hello all,

    I'm new to ExtJS 5, I have to migrate my current application from Ext3 to Ext5.
    I have decided to start from the blank page and build with rules of Ext5.

    So, I have deployed the template with sencha cmd and I have my page with welcome, tab1 and 1 button ;-).
    My first step is to add specifics tools accessible from every where in the code (Translate function, display error...).

    For this, in the Main.js file I have added:
    Code:
    // Add by me
    Ext.Loader.setConfig(
    {
        enable    :    true
        ,paths    :    {
            'lib.PDM'    :    './lib/PDM'
        }
    }); // Eof Add by me
    
    Ext.define('PDM.view.main.Main', {
        extend: 'Ext.container.Container',
        requires: [
            'PDM.view.main.MainController'
            ,'PDM.view.main.MainModel'
            ,'lib.PDM.Utils' // Add by me, only this line
        ],
    # [...] Exactly the code from automatic template 
        xtype: 'app-main',
        },{
            region: 'center'
            ,xtype: 'tabpanel'
            ,items    :    [
              {
                title    :    lib.PDM.Utils.translate('Welcome') // Add by me to translate the title
                ,html    :    '<h2>Content appropriate for the current navigation.</h2>'
            }]
        }]
    });
    But I get an error because lib is not recognized.

    To correctly get the lib object, I have find a way (I'm sure is not the good one).

    Code:
    // Add by me
    Ext.Loader.setConfig(
    {
        enable    :    true
        ,paths    :    {
            'lib.PDM'    :    './lib/PDM'
        }
    }); 
    
    var Utils = Ext.create('lib.PDM.Utils');
    // Eof Add by me
    
    Ext.define('PDM.view.main.Main', {
        extend: 'Ext.container.Container',
        requires: [
            'PDM.view.main.MainController'
            ,'PDM.view.main.MainModel'
        ],
    # [...] Exactly the code from automatic template 
        xtype: 'app-main',
        },{
            region: 'center'
            ,xtype: 'tabpanel'
            ,items    :    [
              {
                title    :    lib.PDM.Utils.translate('Welcome') // Add by me to translate the title
                ,html    :    '<h2>Content appropriate for the current navigation.</h2>'
            }]
        }]
    });
    Could you please tell me what is wrong in my structure.
    It seems that the Ext.define(....requires:...lib.PDM.Utils) does not work well on my first version.
    How build and call correctly the tools that I have write in the lib.PDM.Utils ?

    Thank you for your help.

  2. Try setting the title in an initComponent method of the PDM.view.main.Main class.

  3. #2
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    Compiegne FRANCE
    Posts
    48

    Default

    Hello,

    Little up, need help on this topic.

  4. #3
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    Is lib.PDM.Utils configured with singleton: true?
    http://docs.sencha.com/extjs/5.1/5.1...-cfg-singleton

  5. #4
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    Compiegne FRANCE
    Posts
    48

    Default

    Hello,

    No, I use static propertie like this:

    Code:
    // Write in the file app/lib/PDM/Utils.js
    Ext.define('lib.PDM.Utils',
    {
        statics        :    {
            // Main translate function for the extjs
            ,translate    :    function( sStringToTranslate ) 
            {
                return sStringToTranslate;
             }
        }
    })
    So, I have tried with singleton propertie, like this:

    Code:
    Ext.define('lib.PDM.Utils',
    {
        singleton    :    true
        // Main translate function for the extjs
         ,translate    :    function( sStringToTranslate ) 
         {
               return sStringToTranslate;
           }
    })
    But I get the same result... ;-(
    I have not made any other modification from the original template, so I don't understand why this cause an issue.

    Thank you very much for your help.

  6. #5
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    Hi,

    Making the class a singleton like in your second code snippet would be the way to go. Often time when there's a util class like that folks will add it as a required class to the config of Ext.app() so all classes have the methods / properties avaialble from that util class.

    If you look in the network tab in the browser dev tools are you seeing that the Utils.js is fetched from the lib/PDM directory?

  7. #6
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    Compiegne FRANCE
    Posts
    48

    Default

    Hello,

    Yes the file is well loaded, I saw it in the network tab, and in more, if I had a little test on the onClickButton, it's work correctly : (display alert with 'Traduction').
    Code:
        onClickButton: function () {
               Ext.Msg.alert('Debug', lib.PDM.Utils.translate('Traduction'));
        },
    Thank you for your help.

  8. #7
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    Try setting the title in an initComponent method of the PDM.view.main.Main class.

  9. #8
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    Compiegne FRANCE
    Posts
    48

    Default

    Thank you Slemmon,

    It's works like this.
    Is it for you a Correct/Good/Best way to proceed?

    If it's not the "Best" way, as I have to build an entire application, do you think I have to continue to search why I have this issue ?

Posting Permissions

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