PDA

View Full Version : Deploy Ext 4.2.x MVC project as Single js file



27 Mar 2014, 7:01 PM
We have a Ext JS 4 MVC project, and now required to deploy it as a single JS file. The structure contains various Controllers, Models, Stores and Views
Each file define the component inside the file. for eg;

Ext.define('ExtMVC.store.Patients', {
extend: 'Ext.data.Store',
storeId: 'Patients',
loadMask: true,
async : false,
autoDestroy: true,
model: 'ExtMVC.model.Patient'
});

Is saved in a file inside the folder structure 'js/pc/app/store/Patients.js'

I have created a single file called pc_all.js, which contains the content of all the files in the project.
However, when I try to execute this file its try to load data from the actual folder, eg: try to load Patients.js store from 'js/pc/app/store/Patients.js' which doesn't exist any longer.

How can I merge my MVC project into a single file?

Thanks in advance.

scottmartin
28 Mar 2014, 6:43 AM
The easiest way would be to use Sencha Cmd.
'sencha app build' creates a single JS file and copies all the required resources.

Scott.

30 Mar 2014, 9:02 PM
Thanks Scott,

I used the Sencha Cmd to create the jsb3 file and subsequentyl created the merged file containing all the resources.
However, I still face a problem. For Example, I define objects in my structure, below code is a eg of an object I defined in my project
Ext.define('ExtMVC.object.LayoutObject', {
config:
{
leftPW:screen.availWidth>1300?276:220,
rightPW:screen.availWidth>1300?262:(Ext.isIE?280:262), //QY fix layout format
patientTH:(screen.availHeight-120)/2,
seriesTH:(screen.availHeight-120)/4,
mySharedPH:(screen.availHeight-268)/2,
myRecentSubsPH:(screen.availHeight-268)/2-23,
smallIconButtonWidth: 22
},
size:
{
width:screen.availWidth,
height:screen.availHeight
}
});
and the file is saved in ~\pc\app\object\LayoutObject
In my controller I create the object as below
var layoutObject=Ext.create('ExtMVC.object.LayoutObject');
When I merge all the resources the merged file contains both object definition and the controller code.
However, the webpage still try to access the file from \pc\app\object\ folder.
How can I solve this problem.
Thanks in Advance.
Sam

scottmartin
31 Mar 2014, 4:43 AM
Creating a jsb3 is not the correct approach. You will need to generate a new app with the same namespace and then copy your application over to the app DIR, then refresh the meta using:



sencha app refresh


Sencha Cmd should be use to generate the app first, where the old SDKtools(jsb3) was used after the app was created.

To see how this works, create a new app then build



sencha sdk /path/to/extjs generate app MyApp /path/to/myapp
sencha app build


You now have a new MVC app with a build DIR that contains a single JS file for distribution.

What you are doing is just adding your code to the app DIR before you build (and after refresh to see your new app classes)

Scott.

3 Apr 2014, 4:10 PM
Hi,

Thank you for helping me out with the build.

I have noted that my ajax request to get JSON response from the server has been blocked, or other words has not been received by the server. The chorme developement tool display below.

Any help is greatly appreciated.

scottmartin
4 Apr 2014, 5:17 AM
You get the same response from entering the URL in a browser?

I see you are using Win7, Is your IIS configured to handle JSON?