Ext JS 6

• Download and Install Sencha Cmd 6
• Download and unzip the Ext JS 6 SDK (remember the path)

sencha upgrade

The framework should be asked for : it needs to be downloaded using the support account by Torsten or Anthony.
Unpack the framework in an easy to use folder like

~/ExtJS/ext-6.0.0/

Maven Web Project :
folder structure create /src/main/webapp/static if not available.

We create the application inside this static folder.

Open your terminal or console window and issue these commands

sencha -sdk /path/to/ext6 generate app <APPNAME> <APPNAME>
cd <APPNAME>
sencha app watch

This will generate a skeleton app, sencha app watch will check for any changes made to css or js.

Open your terminal or console window and issue these commands *inside* the app folder :

sencha app install --frameworks ~/Downloads/ExtJS/
sencha app watch

This will allow you to work with the ext project, sencha app watch will check for any changes made to css or js.

Open your terminal or console window and issue these commands *inside* the app folder :

sencha app upgrade ~/Downloads/ExtJS/ext-6.6.0/
sencha app watch

Desktop code usually goes into <APPNAME>/classic/src, stylechanges in <APPNAME>/classic/sass
Mobile/Tablet code usually goes into <APPNAME>/modern/src, stylechanges in <APPNAME>/modern/sass
Code which is universal (like models & stores) can be defined in <APPNAME>/app

You can only use “classic” extjs classes in the classic folder, & “modern” (touch) classes in the modern folder.

change the mainview in app.js to load the login view

/*
 * This file launches the application by asking Ext JS to create
 * and launch() the Application class.
 */
Ext.application({
    extend: 'Beraterchat.Application',

    name: 'Beraterchat',

    requires: [
        // This will automatically load all classes in the Beraterchat namespace
        // so that application classes do not need to require each other.
        'Beraterchat.*'
    ],

    // The name of the initial view to create.
    mainView: 'Beraterchat.view.login.Login'
});

Ext.Viewport.setActiveItem(Ext.create('CLASSNAME', {}));

Ext.Viewport.setActiveItem(Ext.Viewport.down('PREVIOUSXTYPE'));
Ext.Viewport.remove(viewtoremove);

Models are GLOBAL like this, I only define a store like this if it's used in more then 1 view.

Ext.define('Merke.model.Category', {
    extend: 'Ext.data.Model',

    fields: [
        {
            type: 'auto',
            name: 'id'
        },
        {
            type: 'string',
            name: 'name'
        },
        {
            type: 'int',
            name: 'assignType'
        },
        {
            type: 'string',
            name: 'type'
        }
    ],
    
    /*proxy: {
        type: 'rest',
        url: '/categories',
        headers: {
            'accept': 'application/json'
        },
        writer: {
            clientIdProperty: 'clientId'
        },
        reader: {
            rootProperty: 'data'
        }
    }*/
    proxy: {
        type: 'ajax',
        url: Global.serverUrl + '/chat',
        extraParams: {
             action:'getChatMessages',
        },
        headers: {
            'accept': 'application/json'
        },
        writer: {
            clientIdProperty: 'clientId'
        },
        reader: {
            rootProperty: 'data'
        }
    }

});

Stores are GLOBAL like this, I only define a store like this if it's used in more then 1 view.

Ext.define('Merke.store.Category', {
    extend: 'Ext.data.Store',
    alias: 'store.category',
    
    config: {
        requires: ['Merke.model.Category'],
        model: 'Merke.model.Category',
        remoteSort: true
    }
});

viewmodels (class or config) can be used to make binding of data easier :

viewModel: {
   data: {
      myId: 1337,
      myCustomerId: 666
   },
   stores: {
      textstore: {
         type: 'chatmessagestore',
         filters: [{
                        id: 'beraterId',
                        property: 'beraterId',
                        value: '{myId}'
                    }, {
                        id: 'mandantId',
                        property: 'mandantId',
                        value: '{myCustomerId}'
                    }]
      }
   }
}

{
   xtype: 'list',
   bind: {
       store: '{textstore}'
   }
}

in app.json there's a default config for builds :

"builds": {
        "classic": {
            "toolkit": "classic",
            "theme": "theme-triton",
            "sass": {
                "generated": {
                    "var": "classic/sass/save.scss",
                    "src": "classic/sass/save"
                }
            }
        },

        "modern": {
            "toolkit": "modern",
            "theme": "theme-material",
            "sass": {
                "generated": {
                    "var": "modern/sass/save.scss",
                    "src": "modern/sass/save"
                }
            }
        }
    },

It's possible to add customer specific builds, just copy modern or classic + add your extra config (pwa overrides for example).
making a build with the newly defined build is then

sencha app build <customer>

Modern global CSS variables : https://docs.sencha.com/extjs/6.6.0/modern/Global_CSS.html
Classic global CSS variables : https://docs.sencha.com/extjs/6.6.0/classic/Global_CSS.html

The simplest styling using variables & mixins. Add a “var” folder under “sass”, make a file called Application.scss.
Overriding $base-color goes a long way .

To change a button's color it's recommended to make use of the mixins
(example of classic mixins, note usage of different button uis depending on position which is a classic thing) :

@include extjs-button-small-ui(
$ui: 'action',
$glyph-color: #000,
$color: #000,
$inner-border-width: 0,
$border-color: #F7C000,
$background-color: #F7C000
);

@include extjs-button-toolbar-small-ui(
$ui: 'mandantselect',
$glyph-color: #000,
$color: #000,
$inner-border-width: 0,
$border-color: #eeeeee,
$background-color: #eeeeee
);

ExtJs 6.6 Push Notifications