Where to put extjs file?

Question

I came across the extjs class on GitHub that I would like to use in my application. Where should I put that file?

I know that file structure in extjs follows some patterns, so for example if the name of my application is MyApp, then I put classes in corresponding folders, like MyApp.view.myfolder.MyClass .

However, in this case the usage of class is given as

GLC.tip.toast(title, message, options)

so I doubt that I should put it in some view folder. On the other hand I tried to copy those two files (glc_tip.js and tip.scss) in the root folder of my application and include in index.html the following line:

<script type="text/javascript" src="glc_tip.js"/>

but it also doesn't work. I got an error that it is not defined.

UPDATE

I created folder /ux/tip/ in the application root directory and put files toast.js (renamed glc_tip.js) and tip.scss into it. After that I modified app.json, so the section with "js" and "css" looks like:

"js": [{
    "path": "app.js",
    "bundle": true
},{
    "path": "/ux/tip/toast.js",
    "bundle": true
}],

"css": [{
    // This entry uses an ant variable that is the calculated value of the generated
    // output css file for the app, defined in .sencha/app/defaults.properties
    "path": "${build.out.css.path}",
    "bundle": true,
    "exclude": ["fashion"]
},{
    "path": "/ux/tip/tip.scss"
}],

After that I did sencha app refresh and sencha app build development , but it still doesn't work. i am getting an error:

Uncaught ReferenceError: GLC is not defined at constructor.handler

Answer 1

It is better to register the third party libs in 'app.json' file. There must be js and css sections. You can put it in '/ux/tip/toast.js' file (create dirs if they do not exist).

Js files in

"js": [
    {
        "path": "${framework.dir}/build/ext-all-rtl-debug.js"
    },
    {
        "path": "app.js",
        "bundle": true
    }
],

CSS files will be registered in

"css": [
    {
        // this entry uses an ant variable that is the calculated
        // value of the generated output css file for the app,
        // defined in .sencha/app/defaults.properties
        "path": "${build.out.css.path}",
        "bundle": true,
        "exclude": ["fashion"]
    }
],

And do not forget to rebuild and refresh your project to apply changes.