Results 1 to 5 of 5

Thread: Cmd and Visual Studio integration

  1. #1
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    260

    Default Cmd and Visual Studio integration

    I was searching over the internet for simple solution how I should integrate VisualStudio 2013 with Sencha Cmd to be able to easily build debug (testing) and production builds.
    I found some informations (http://peterkellner.net/2013/07/24/u...th-sencha-cmd/) but maybe someone has/found a project template?

    I want to build ASP MVC5 application with ExtJS 5.1 as frontend.
    I will be grateful for any informations on how to integrate CMD and VS.

  2. #2
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    260

    Default

    I've tried to integrate ExtJS with VS by my selfe.
    Here is what I did:

    1. In VS2013 I've created ASP.NET Web Application (using .NET 4.5.1) in E:\Dashboard
    2. Inside E:\Dashboard I've created new folder "Front":



    3. Using cmd I navigated to E:\Dashboard\Front and I created new ExtJS application:


    Why there is mix of slashes and backslashes in paths?

    4. I started my application and after navigating to http://localhost:56479/Front/ I was able to see my application:

    5. I changed Views/Home/Index.cshtml to this:
    PHP Code:
    @{    
    Layout null;
    }
    <!
    DOCTYPE html>
    <
    html manifest="">
    <
    head>
        <
    meta http-equiv="X-UA-Compatible" content="IE=edge">
        <
    meta charset="UTF-8">
        <
    title>Dahsboard</title>
        <!-- 
    The line below must be kept intact for Sencha Cmd to build your application -->
        <
    script id="microloader" type="text/javascript" src="~/Front/bootstrap.js"></script>
    </head>
    <body>
    </body>
    </html> 
    but after rinning my application again and navigating to http://localhost:56479 I get this error:
    I'm stuck here. How should I change my project so all files inside bootstrap.js would load relatively to bootstrap.js? Can this be configured?

    Here is sencha diag show output:

    [INF] app.archivePath : archive
    [INF] app.bootstrap.base : E:\Dashboard\Front
    [INF] app.bootstrap.css : bootstrap.css
    [INF] app.bootstrap.manifest : bootstrap.json
    [INF] app.bootstrap.microloader : bootstrap.js
    [INF] app.classpath : E:\Dashboard\Front/app
    [INF] app.cmd.version : 5.1.0.13
    [INF] app.config.dir : E:\Dashboard\Front\.sencha\app
    [INF] app.cordova.config.id : com.domain.Dashboard
    [INF] app.cordova.config.name : Dashboard
    [INF] app.cordova.config.path : E:\Dashboard\Front/cordova
    [INF] app.cordova.config.target :
    [INF] app.cordova.config.verbose : false
    [INF] app.cordova.js.0.path : cordova.js
    [INF] app.cordova.js.0.priority : 1000
    [INF] app.cordova.js.0.remote : true
    [INF] app.cordova.js.length : 1
    [INF] app.cordova.microloader : E:\Dashboard\Front\.sencha\app/Microloader.js
    [INF] app.cordova.output.base : E:\Dashboard\Front/cordova/www
    [INF] app.cordova.output.cache.enable : false
    [INF] app.cordova.output.deltas.enable : false
    [INF] app.dir : E:\Dashboard\Front
    [INF] app.framework : ext
    [INF] app.framework.version : 5.1.0.47
    [INF] app.id : 3c406065-bb7b-4dbc-b63e-698bd850cd01
    [INF] app.indexHtmlPath : index.html
    [INF] app.name : Dashboard
    [INF] app.output.base : E:\Dashboard\Front/build/${build.environment}/Dashboard
    [INF] app.output.cache.enable : false
    [INF] app.output.deltas.enable : false
    [INF] app.output.microloader.enable : true
    [INF] app.overrides : E:\Dashboard\Front/overrides
    [INF] app.page.name : index.html
    [INF] app.phonegap.config.id : com.domain.Dashboard
    [INF] app.phonegap.config.name : Dashboard
    [INF] app.phonegap.config.path : E:\Dashboard\Front/phonegap
    [INF] app.phonegap.config.remote : false
    [INF] app.phonegap.config.verbose : false
    [INF] app.phonegap.js.0.path : phonegap.js
    [INF] app.phonegap.js.0.priority : 1000
    [INF] app.phonegap.js.0.remote : true
    [INF] app.phonegap.js.length : 1
    [INF] app.phonegap.microloader : E:\Dashboard\Front\.sencha\app/Microloader.js
    [INF] app.phonegap.output.base : E:\Dashboard\Front/phonegap/www
    [INF] app.phonegap.output.cache.enable : false
    [INF] app.phonegap.output.deltas.enable : false
    [INF] app.production.compressor.type : yui
    [INF] app.requires.names : sencha-core,ext
    [INF] app.requires.packages : E:\Dashboard\Front\ext\packages\sencha-core,E:\Dashboard\Front\ext
    [INF] app.resource.paths : E:\Dashboard\Front/resources
    [INF] app.sass.etcpath : E:\Dashboard\Front/sass/etc/all.scss
    [INF] app.sass.namespace : Dashboard
    [INF] app.sass.srcpath : E:\Dashboard\Front/sass/src
    [INF] app.sass.varpath : E:\Dashboard\Front/sass/var
    [INF] app.slicer.js.0.isWidgetManifest : true
    [INF] app.slicer.js.0.path : E:\Dashboard\Front/sass/example/custom.js
    [INF] app.slicer.js.length : 1
    [INF] app.testing.output.cache.enable : false
    [INF] app.testing.output.deltas.enable : false
    [INF] app.theme : ext-theme-neptune
    [INF] buildenvironment.dir : E:\Dashboard\Front
    [INF] buildenvironment.load.dir : E:\Dashboard\Front
    [INF] cmd.config.dir : C:\Users\Misiu\bin\Sencha\Cmd\5.1.0.13
    [INF] cmd.dir : C:\Users\Misiu\bin\Sencha\Cmd\5.1.0.13
    [INF] cmd.framework.minver : 5.0.0
    [INF] cmd.framework.version : 99.99
    [INF] cmd.jvm.args : -Xms128m -Xmx2048m -Dapple.awt.UIElement=true
    [INF] cmd.merge.tool.args.araxis : -wait -merge -3 -a1 {base} {user} {generated} {out}
    [INF] cmd.merge.tool.args.kdiff3 : {base} {user} {generated} -o {out}
    [INF] cmd.merge.tool.args.p4merge : {base} {user} {generated} {out}
    [INF] cmd.merge.tool.args.smartsync : {user} {generated} {base}
    [INF] cmd.merge.tool.args.sourcegear : --merge --result={out} {user} {base} {generated}
    [INF] cmd.merge.tool.args.tortoise : -base:{base} -theirs:{generated} -mine:{user} -merged:{out}
    [INF] cmd.minver : 3.0.0.0
    [INF] cmd.platform : windows
    [INF] cmd.server.port : 1841
    [INF] cmd.version : 5.1.0.13
    [INF] cmd.web.port : 1841
    [INF] ext.dir : E:\Dashboard\Front/ext
    [INF] ext.license.name : beta-trial
    [INF] framework.classpath : E:\Dashboard\Front\ext/src
    [INF] framework.cmd.minver : 5.1.0.13
    [INF] framework.cmd.version : 5.1.0.13
    [INF] framework.compatVersion : 4.0
    [INF] framework.config.dir : C:\Users\Misiu\bin\Sencha\Cmd\5.1.0.13\plugins\ext\current
    [INF] framework.creator : Sencha
    [INF] framework.detailedDescription : Sencha Ext JS JavaScript Framework
    [INF] framework.dir : E:\Dashboard\Front\ext
    [INF] framework.format : 1
    [INF] framework.isV5 : true
    [INF] framework.name : ext
    [INF] framework.output : ${package.dir}/build
    [INF] framework.packages.dir : E:\Dashboard\Front\ext/packages
    [INF] framework.signatures.0.algorithm : SHA1withRSA
    [INF] framework.signatures.0.created : 2014-11-26T19:43:06Z
    [INF] framework.signatures.0.name : Sencha
    [INF] framework.signatures.0.nonce : NuVhtVukY24=
    [INF] framework.signatures.0.signature : UHFa4CXhCg4S5fdKHAtrbG7cfoab2+gRQNE2XB71v7W+pzWqJGuBOLdKVRbqzsm+UrL5+Z7
    Z4FmDXO+1/1XybTo+X2i+QDnqTKMlOFgRPzDC7RIAUMytxq9uf8SbZZIrqmUUBjsTPGvk6yltQKFmkKQOqLL6+wEarw7/IWyKfTN0LJYAmYZymDT0tPwVoN2
    mGyjezVcICvN6ylOJQMtKp0CxOdau/47FTfqdmIAJUC/Y6hG6jCBGwCMOFWXGlTlI27u4iKjInD1+fCFy39HdzeztwXKYSoKHK8CVa9DaRPKrnvNmbbFF/2U
    8NW0jH5EulVX4gj/jLfkvy34rP4BC+VGGCKamjc8p0Q5rhAhRERh4UDsVsio9AF11zzKqq3kWh3v/bLggefxsL8LHLfzkoa4girySwGyS9zom4bb9b1xkwpe
    MmfqQ5O89WfzJvSNkCmuQaG/vJPQ7D8CLCBDX5VWtRdwBfD2+L2QaTORfdIQ7EDZAki/3Y0MkCG36U/cGaa8rzyMVogq7/SVRqVZrwRKKWFDovFMk9vFheyW
    wD1VeAL0k8x+4Lu22WpZrE7WD+uETbpuYTNIFx4A2lHpM7mT0rT01QZZuXZ3Z1rF27IWxeGapKaxJVYhTh2dPg0tiGVUe7Jfa9u0ivpyUkszG6CsR1bToVAo
    mkLhTnni8bi8=
    [INF] framework.signatures.0.uuid : e93ebd09-85f5-46b6-bfc1-c7f06cf0b8a5
    [INF] framework.signatures.length : 1
    [INF] framework.summary : Ext JS
    [INF] framework.type : framework
    [INF] framework.version : 5.1.0.47
    [INF] repo.local.dir : C:\Users\Misiu\bin\Sencha\Cmd\repo
    [INF] system.java.net.useSystemProxies : true
    [INF] theme.base.names : ext-theme-base,ext-theme-neutral,ext-theme-neptune
    [INF] theme.base.packages : E:\Dashboard\Front\ext\packages\ext-theme-base,E:\Dashboard\Front\ext\p
    ackages\ext-theme-neutral,E:\Dashboard\Front\ext\packages\ext-theme-neptune
    [INF] workspace.build.dir : E:\Dashboard\Front/build
    [INF] workspace.cmd.version : 5.1.0.13
    [INF] workspace.config.dir : E:\Dashboard\Front\.sencha\workspace
    [INF] workspace.dir : E:\Dashboard\Front
    [INF] workspace.packages.dir : E:\Dashboard\Front/packages
    [INF] workspace.theme.dir : E:\Dashboard\Front/packages/${args.themeName}
    Here I also have mix of slashes and backslashes.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Couldn't find a template, but here's a thread and a video that might help:
    http://www.sencha.com/forum/showthread.php?287329
    http://vimeo.com/105354843

    Update: Started looking at this thread yesterday and just noticed your recent post. Glad to see you are making progress. Hopefully someone with VS experience can has some insight.

  4. #4
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    260

    Default

    Thanks for links
    especially vimeo link!

    I am able to build my application using "sencha app build testing" and everything is fine, but now I want to integrate that with my ASP MVC5 application, It's not about VS. it's more about Sencha cmd configuration.

    After test build my application structure looks like this:


    After starting my application from VS and going to http://localhost:56479/Front/build/testing/Dashboard/ I can see my application working:


    but I need it to work from http://localhost:56479
    My only option for now was changing paths in microloader like so:

    PHP Code:
    <script type="text/javascript">
    var 
    Ext Ext || {};
    Ext.manifest Ext.manifest || "./Front/build/testing/Dashboard/app.json";//build path
    ...and rest of file 
    and inside app.json I had to change two sections:

    "js":[
    {
    "path":"./Front/build/testing/Dashboard/app.js"
    }
    ],
    "css":[
    {
    "path":"./Front/build/testing/Dashboard/resources/Dashboard-all.css"
    }
    ]
    Isn't there an option this can be done automatically?
    Every time I refresh by build I need to update app.json manually.

    Do I need microloader anyway? Can I just include app.js and css from build folder directly to my ASP page?
    I tried that but I get error:
    Uncaught TypeError: Cannot read property 'baseUrl' of undefined
    Can I disable microloader and just include css and app.js? That would be best solution for VS integration.

  5. #5
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    260

    Default

    I have temporary fix for now
    I build production build and copied script tag (containing Ext.manifest and Ext.Boot) into my ASP page, next I changed script a bit:

    PHP Code:
    <script type="text/javascript">
    var 
    Ext Ext || {};
    Ext.manifest = {
               
    "js": [{ "path""./Front/build/production/Dashboard/app.js" }],
               
    "css": [{ "path""./Front/build/production/Dashboard/resources/Dashboard-all.css" }]
    };
    var 
    Ext Ext || {};
    Ext.Boot Ext.Boot || (function (f)...
    </script> 
    This way I can rebuild using Sencha Cmd and run applications with VS.
    Ideally I would like app.json to contain correct paths, but I don't know where and how to configure it.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •