====== Ext JS 6 ======

===== Setup =====
  * Download and Install Sencha Cmd 6
  * Download and unzip the Ext JS 6 SDK (remember the path)

==== Use the latest CMD version ====
<code>sencha upgrade</code>
==== Framework commercial version ====
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
<code>~/ExtJS/ext-6.0.0/</code>
===== ExtJS in java web projects =====
Maven Web Project :\\
folder structure ''create /src/main/webapp/static if not available''.\\
\\
We create the application inside this static folder.

===== To start a new Ext JS project =====
Open your terminal or console window and issue these commands
<code>sencha -sdk /path/to/ext6 generate app <APPNAME> <APPNAME>
cd <APPNAME>
sencha app watch</code>
This will generate a skeleton app, ''sencha app watch'' will check for any changes made to css or js. 
===== To take over an existing Ext JS project =====
Open your terminal or console window and issue these commands *inside* the app folder :
<code>sencha app install --frameworks ~/Downloads/ExtJS/
sencha app watch</code>
This will allow you to work with the ext project, ''sencha app watch'' will check for any changes made to css or js.

===== To update an existing EXTJS project =====
Open your terminal or console window and issue these commands *inside* the app folder :
<code>sencha app upgrade ~/Downloads/ExtJS/ext-6.6.0/
sencha app watch</code>

===== Editting an application =====
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.

===== Setting loginscreen =====
change the mainview in app.js to load the login view

<code>/*
 * 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'
});</code>
===== Adding another view to the viewport =====
<code>Ext.Viewport.setActiveItem(Ext.create('CLASSNAME', {}));</code>

===== Remove current view and show previous view =====
<code>Ext.Viewport.setActiveItem(Ext.Viewport.down('PREVIOUSXTYPE'));
Ext.Viewport.remove(viewtoremove);</code>
===== Model =====
Models are GLOBAL like this, I only define a store like this if it's used in more then 1 view.
<code>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'
        }
    }

});
</code>
===== Store =====
Stores are GLOBAL like this, I only define a store like this if it's used in more then 1 view.
<code>Ext.define('Merke.store.Category', {
    extend: 'Ext.data.Store',
    alias: 'store.category',
    
    config: {
        requires: ['Merke.model.Category'],
        model: 'Merke.model.Category',
        remoteSort: true
    }
});</code>
===== ViewModel =====
viewmodels (class or config) can be used to make binding of data easier :
<code>viewModel: {
   data: {
      myId: 1337,
      myCustomerId: 666
   },
   stores: {
      textstore: {
         type: 'chatmessagestore',
         filters: [{
                        id: 'beraterId',
                        property: 'beraterId',
                        value: '{myId}'
                    }, {
                        id: 'mandantId',
                        property: 'mandantId',
                        value: '{myCustomerId}'
                    }]
      }
   }
}</code>

===== List of data =====
<code>{
   xtype: 'list',
   bind: {
       store: '{textstore}'
   }
}</code>
===== Multiple builds =====
in app.json there's a default config for builds :
<code>"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"
                }
            }
        }
    },</code>
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
<code>sencha app build <customer></code>
===== Styling an application =====
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) :
<code>
@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
);
</code>

===== Pushnotifications =====

[[ext-js:push|ExtJs 6.6 Push Notifications]]