Differences

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

--- ext-js [09/08/2018 10:48]
Anthony Arents [Adding another view to the viewport]
+++ 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 53: / Line 65: @@
 <code>Ext.Viewport.setActiveItem(Ext.create('CLASSNAME', {}));</code>
-===== Adding remove current view and show previous view =====
+===== 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 :
@@ Line 112: / Line 222: @@
 );
 </code>
+===== Pushnotifications =====
+[[ext-js:push|ExtJs 6.6 Push Notifications]]