Search code examples
extjs4

How to Extend our own class in ExtJS4

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.

Solution

  • 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: