Integrating extjs 5 app build with sencha cmd and WebAPI in Visual Studio

Question

I'm new to ExtJs and want to integrate ExtJs 5 app created with Sencha CMD to WebAPI app!

I did the integration for BUILD mode, but not for the DEVELOPMENT mode.

Regarding to this post the steps of integration are done as show below!

• Step 1. Creating the path: C:\VCProject\SVCodeCampWeb\WebAPI

• Step 2. Creating the WebAPI project named 'API_NAME' on the directory of Step 1.

• Step 3. Moving ExtJS 5 framework (ext-5.0.0) to the directory of Step 1.

• Step 4. Generating the extjs app with sencha cmd:

  C:\VCProject\SVCodeCampWeb\WebAPI\ext-5.0.0>sencha generate app MyApp C:\VCProject\SVCodeCampWeb\WebAPI\API_NAME\API_NAME\CMDBUG1

• Step 5. Including the ext app to Web Api through the Solution Explorer.

• Step 6. Building the app with sencha cmd as shown below:

  C:\Users\albert\Documents\Visual Studio 2013\Projects\BMSIA\BMSIA.Web\BMSJS>sencha app build

WORKS!!! These are the files that I included in my _Layout.chtml of the WebAPI for BUILD mode and works!

<script src="~/CMDBUG1/build/production/MyApp/app.js"></script>
<link href="~/CMDBUG1/build/production/MyApp/resources/MyApp-all.css" rel="stylesheet" />

ERROR SECTION!!!

And for DEVELOPMENT mode I'm including these files:

< link href="~/CMDBUG1/build/production/MyApp/resources/MyApp-all.css" rel="stylesheet" />

< script src="~/CMDBUG1/ext/ext-all.js"></script>

< script src="~/CMDBUG1/app.js"></script>

But it's throwing this error:

TypeError: Ext.application is not a function

If you need more details, let me know!

Any help will be appreciated!

Answer 1

There is no need to set .js and .css to _Layout.cshtml. When you build your application using Sencha CMD you get index.html, app.js, resources/App-all.css and some images. The goal here is that this app can work anywhere on app domain (or other domain if CORS is applied). Web Api will provide URI's your app will call. This way you decouple client app (extjs) from server (webapi) even if they are in same project.And the whole thing will work if you for instance provide different webapi for your application. One thing to bear in mind is baseUri. While you are developing it will be http://localhost:xxxx and when app is deployed it will http://www.somedomain.com. I use simple singleton class where i set my dev and production paths(s). This is necessary so your ajax calls from models/stores/ext.ajax have a valid path to your api. General goal is to decouple client and webapi. You can put your builded app to /app folder and keep your extjs code inside /source folder which you can then exclude from publishing.

Ext.define('MyApp.config.AppConfig', {
    statics: {
        path: 'http://localhost:8888'
        //path: 'http://client1.azurewebsites.net',
        //path: 'http://client2.azurewebsites.net'
    }
});

and then when calling api you say: url: MyApp.config.AppConfig.path + /users/list. This can be done nicely of course.