Differences

This shows you the differences between two versions of the page.

--- ext-js [08/08/2018 10:23]
Anthony Arents [Editting an application]
+++ ext-js [19/11/2018 12:04] (current)
Anthony Arents [ExtJS in java web projects]
@@ Line 4: / Line 4: @@
   * 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
@@ Line 10: / Line 23: @@
 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 :
@@ Line 24: / Line 36: @@
 ===== 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''
+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]]