Differences

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

Link to this comparison view

ext-js [09/08/2018 11:09]
Anthony Arents [Remove current view and show previous view] 		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 Install Sencha Cmd 6
   * Download and unzip the Ext JS 6 SDK (remember the path)   * 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 ===== ===== To start a new Ext JS project =====
 Open your terminal or console window and issue these commands Open your terminal or console window and issue these commands
Line 10: Line 23:
 sencha app watch</code> sencha app watch</code>
 This will generate a skeleton app, ''sencha app watch'' will check for any changes made to css or js.  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 ===== ===== To take over an existing Ext JS project =====
 Open your terminal or console window and issue these commands *inside* the app folder : Open your terminal or console window and issue these commands *inside* the app folder :
Line 56: Line 68:
 <code>Ext.Viewport.setActiveItem(Ext.Viewport.down('PREVIOUSXTYPE')); <code>Ext.Viewport.setActiveItem(Ext.Viewport.down('PREVIOUSXTYPE'));
 Ext.Viewport.remove(viewtoremove);</code> 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 ===== ===== ViewModel =====
 viewmodels (class or config) can be used to make binding of data easier : viewmodels (class or config) can be used to make binding of data easier :
Line 65: Line 145:
    stores: {    stores: {
       textstore: {       textstore: {
-         url: 'https://myserver.de/suite/chat',+         type: 'chatmessagestore',
          filters: [{          filters: [{
                         id: 'beraterId',                         id: 'beraterId',
Line 142: Line 222:
 ); );
 </code> </code>
 +
 +===== Pushnotifications =====
 +
 +[[ext-js:push|ExtJs 6.6 Push Notifications]]