Sencha package for both classic and modern

Question

Is it possible to create a package more likely a framework package for a modern(phone) and classic(desktop) theme? My question is similar to this one. I tried creating a package with a classic folder (following this post package.json) then I tried to use Ext.require to call and render views on-demand.

Code:

let command = Ext.String.format(
        '{0}.classic.src.view.{1}.{2}View',
        namespace,
        screen.toLowerCase(),
        screen
      );
      Ext.require(command, function () {
        console.log('hello');
        xtype = screen.toLowerCase() + 'view';
        if (!menuview.getStore()) {
          console.log(
            'Store not yet available from viewModel binding for ' + screen
          );
          return;
        }

        if (!centerview.getComponent(xtype)) {
          centerview.add({
            xtype: xtype,
            itemId: xtype,
            heading: node.get('text'),
          });
        }

        centerview.setActiveItem(xtype);
        menuview.setSelection(node);
        vm = me.getViewModel();
        vm.set('heading', node.get('text'));
      });

Let's say I have a DashboardView.js on my package, and when I tried to call that on Ext.require, it fails to load the file. I am wondering what am I missing to render my views on-demand.

Hoping to find an answer here. Thanks!

Answer 1

This is called a universal application. There is a really detailed guide showing how you structure and build your application. You end up with two apps... one is classic and one is modern... but you can have shared files like controllers and viewmodels. You can also do this just with modern and use profiles to change xtypes based on phone, tablet or PC. Universal App Guide

You can generate a default starter application that build the directory structure and also the build scripts. It is really very nice. This is the crux behind the model view controller. YOu put the data is the viewModel, the rules/events are in the viewController and all your view classes can be based on the device. This will build a universal app sample.

sencha -sdk /home/XXX/sencha-sdks/ext-7.3.0 generate app --ext MyApp ./MyApp

if this is in /home/XXX/work/MyApp enter this into your browser:

To run the classic app: /home/XXX/work/MyApp/index.html?profile=classic

To run the modern app: /home/XXX/work/MyApp/index.html?profile=modern

Not sure if this answers your question.... I hope it does.