Support classic/modern Ext Apps

[pdugas]

If we omit the -classic option to "sencha generate app", we get Sencha's new unified application which want's to get different manifest files; classic.json or modern.json. They also add some logic to their index.html to set Ext.manifest which is then used throughout the generated bootstrap.js. I wonder if you'd considered a way to support this new style app instead of limiting use only classic apps.

[sgehrig]

That should work already out of the box if you configure two different builds

tq_ext_js_application:
    app_path: %kernel.root_dir%/app/workspace
    builds:
        classic:
            development:
                build_path:  build/development/MyApp
                microloader: /bootstrap.js
                manifest:    /classic.json
                app_cache:   ~
            production:
                build_path:  build/production/MyApp
                microloader: bootstrap.js
                manifest:    classic.json
                app_cache:   cache.appcache
        modern:
            development:
                build_path:  build/development/MyApp
                microloader: /bootstrap.js
                manifest:    /modern.json
                app_cache:   ~
            production:
                build_path:  build/production/MyApp
                microloader: bootstrap.js
                manifest:    modern.json
                app_cache:   cache.appcache

Configuration could be more concise for that use case, so I'll keep this issue open.

[pdugas]

I see. How do I switch between builds?

On Mon, Dec 7, 2015 at 4:13 PM, Stefan Gehrig [email protected]
wrote:

That should work already out of the box if you configure two different
builds

tq_ext_js_application:
app_path: %kernel.root_dir%/app/workspace
builds:
classic:
development:
build_path: build/development/MyApp
microloader: /bootstrap.js
manifest: /classic.json
app_cache: ~
production:
build_path: build/production/MyApp
microloader: bootstrap.js
manifest: classic.json
app_cache: cache.appcache
modern:
development:
build_path: build/development/MyApp
microloader: /bootstrap.js
manifest: /modern.json
app_cache: ~
production:
build_path: build/production/MyApp
microloader: bootstrap.js
manifest: modern.json
app_cache: cache.appcache

Configuration could be more concise for that use case, so I'll keep this
issue open.

—
Reply to this email directly or view it on GitHub
#3 (comment)
.

Paul Dugas / [email protected] / 404-904-2024

[sgehrig]

Just use the method used by plain Ext JS applications as well:

var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
    Ext.manifest = tags.desktop ? '{{ extjsManifestPath('classic')|e('js') }}' : '{{ extjsManifestPath('modern')|e('js') }}';
}

[pdugas]

I obviously have much to learn.

Thanks for the time.

Paul

On Tue, Dec 8, 2015 at 3:36 AM, Stefan Gehrig [email protected]
wrote:

Just use the method used by plain Ext JS applications as well:

var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = tags.desktop ? '{{ extjsManifestPath('classic')|e('js') }}' : '{{ extjsManifestPath('modern')|e('js') }}';
}

—
Reply to this email directly or view it on GitHub
#3 (comment)
.

Paul Dugas / [email protected] / 404-904-2024

[mrmv]

@sgehrig Looks like you made a typo on the builds description, for production the microloader should say microloader.js instead of bootstrap.js.

The config in full (based on the sencha example app) would be:

tq_ext_js_application:
    app_path: '%kernel.root_dir%/../MyApp'
    builds:
        classic:
            development:
                build_path:  build/development/MyApp
                microloader: /bootstrap.js
                manifest:    /classic.json
                app_cache:   ~
            production:
                build_path:  build/production/MyApp
                microloader: microloader.js
                manifest:    classic.json
                app_cache:   cache.appcache
        modern:
            development:
                build_path:  build/development/MyApp
                microloader: /bootstrap.js
                manifest:    /modern.json
                app_cache:   ~
            production:
                build_path:  build/production/MyApp
                microloader: microloader.js
                manifest:    modern.json
                app_cache:   cache.appcache

Switching builds (including using query strings) would need

        var Ext = Ext || {};
        Ext.beforeLoad = function (tags) {
            var s = location.search,  // the query string (ex "?foo=1&bar")
                profile;
            // For testing look for "?classic" or "?modern" in the URL to override
            // device detection default.
            //
            if (s.match(/\bclassic\b/)) {
                profile = 'classic';
            }
            else if (s.match(/\bmodern\b/)) {
                profile = 'modern';
            }
            else {
                profile = tags.desktop ? 'classic' : 'modern';
                //profile = tags.phone ? 'modern' : 'classic';
            }
            if (profile == 'classic') {
                Ext.manifest = '{{ extjsManifestPath('classic')|e('js') }}';
            }
            else if (profile == 'modern') {
                Ext.manifest = '{{ extjsManifestPath('modern')|e('js') }}';
            }       
            else {
                Ext.manifest = tags.desktop ? '{{ extjsManifestPath('classic')|e('js') }}' : '{{ extjsManifestPath('modern')|e('js') }}';
            }
            // This function is called once the manifest is available but before
            // any data is pulled from it.
            //
            //return function (manifest) {
                // peek at / modify the manifest object
            //};
        };

[sgehrig]

@mrmv: Thanks for your comment. Seems that you're right!