Renaming paths to components in ExtJs4

98 Views Asked by At

I have an Ext Js 4.1.1 Application with the following structure and Im trying to switch the namespaces for both folders:

public/
├──app/
│   ├──controller/
│   ├──model/
│   ├──store/
│   └──view/
│ 
└──vendor/

My app-Loader.js contains the paths mapping:

Ext.Loader.setConfig({
  enabled: false,
  disableCaching: false,
  paths: {
    'App': 'public/vendor',
    'vendor': 'public/app'
  }
});

I have renamed the components and their usage inside each folder location, but whenever I changed any one of them, let's say a Lightbox inside the vendor folder the program stops working, It doesn't render on the browser, the file is not loaded and I get no error messages. I tried creating a third path like this:

'tmp' : 'public/vendor'

Then changed said component definition from

Ext.define('App.Lightbox', {}

to

Ext.define('tmp.Lightbox',{}

Expecting the change to take effect the app would compile completely and display the content. Instead of that, the page just stops loading after the login and displays a white screen, The browser console doesn't show the changed file. Is there something I'm missing to rename? I'm not well acquainted with ExtJs. Any help will be greatly appreciated.

Edit: The renaming of a component under the vendor folder works, but as of now, I am not able to rename any component under app, even after adding a placeholder namespace with the same path.

Edit: I found there is this in app.js, which confuses me even more:

 app = Ext.create('App.AbstractApplication', {
 name: 'vendor',
 appFolder: 'public/js/app'
 }

The documentation says it is loaded with Ext.loader.setPath() for the namespace configured in the name config. Changes here also break the Application

1

There are 1 best solutions below

0
cfag On

The name parameter needed to be renamed properly and at the same time rename the other components inside the folder with the new namespaces so I changed app.js to:

app = Ext.create('App.AbstractApplication', {
name: 'app',
appFolder: 'public/js/app'
}

the in app-loader.js I change it to:

Ext.Loader.setConfig({
  enabled: false,
  disableCaching: false,
  paths: {
    'App': 'public/app',
    'vendor': 'public/vendor'
  }
});

And the corresponding components like:

public/app/Lightbox.js

Ext.define('vendor.Lightbox'){}

become:

Ext.define('App.Lightbox'){}