Question

I have created the class in Ext JS 4, and now I want to extend that in another class. I use extend properties, to extend the class. But I am not able to extend the class. Do I want to use require to include the class file. But I keep both the files in the same directory.

Answer 1

Define source paths for ExtJS to locate your source files.

Ext.Loader.setConfig({
            enabled: true,
            paths: {
                '[your namespace prefix here]': '[physical path]'
            }
        });

Then define Ext.require or requires section in subclass to enable automatic path resolution.
Read this link for more info.

Example

Base class: file located at folder root/view/common/Picker.js

Ext.define('RL.view.common.Picker', {
    extend: "Ext.form.field.Picker",
...
}

Sub class: file located at folder root/view/selection/DriverTreeCombo.js

Ext.define('RL.view.selection.DriverTreeCombo', {
        extend: "RL.view.common.Picker",
        requires: ['Ext.tree.Panel', 'RL.view.common.TreeBase'],
...
}

I have namespace as RL.xxx.xxx and RL is supposed to be the root folder. Now I can define Loader configuration as below

Ext.Loader.setConfig({
            enabled: true,
            paths: {
                'RL': '/root'                    
            }
        })

Loader configuration should be set before ‘Ext.onReady(…)’ function call. Going through examples folder in ExtJS package would help you to see how this is done.

Further reading:

• The Class System
• Dynamic Loading and new class system