How to separate extjs4 files to related bundles - extjs

Question

There is a symfony 2 project with extjs4 frontend. I started with an extjs bundle which contains now the entire extjs app. The problem is it will be difficult to manage as the project grows.
I think , the best solution would be to relocate all extjs file to the related bundle
(e.g.: to the UserBundle all forms, panel, grid etc. ) and use a central Extjs bundle to load them.
What is the best practice to organize a project in this manner?
And how to include the js files from another bundle?
Or should I create extjs app to every bundle (I'm not sure it would be wise) ?

Answer 1

I'm not sure this is best practice, but I know this works on ExtJs 4.0.7.
So for example I have the following folder structure:
proj
index.htm
proj
app.js
app
view
SimpleIFrame.js
So in app.js I have the following code:
Ext.Loader.setConfig(
{
enabled: true
});
Ext.Loader.setPath('proj.view', './proj/app/view');
Ext.Loader.require([
'proj.view.SimpleIFrame'
])
In SimpleIFrame I have the following code:
Ext.define('proj.view.SimpleIFrame', {
extend: 'Ext.Panel',
alias: 'widget.simpleiframe',
...
});
So then later in app.js I can do the following:
var panel = Ext.create('adminClaiming.view.SimpleIFrame', {
title: 'Hello',
...
});
That allows me to separate the whole app.js into separate files. Up until I figured this out I kept getting the dreaded:
Uncaught TypeError: object is not a function
Which just meant that I'd forgotten to call Ext.Loader.setPath.
Now don't quote me on this next bit, but it seems that if you remove the Ext.require then SimpleIFrame.js is loaded in the global namespace, which is not really what you want, but it's still loaded, and it does work, which is more important.
Hope that helps. And mind you I will be most likely all be wrong ;), and had just gotten lucky in my case; what can I do, I'm still a n00b.

Answer 2

You could make separates bundles with your JS files inside Resources/public/js of each of them.
Then, on your main html template you could include all your JS Files using assetic.