Differences

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

Link to this comparison view

ext-js [08/08/2018 12:56]
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 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 29: Line 41:
 You can only use “classic” extjs classes in the classic folder, & “modern” (touch) classes in the modern folder. 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 ===== ===== Multiple builds =====
 in app.json there's a default config for builds : in app.json there's a default config for builds :
Line 85: Line 222:
 ); );
 </code> </code>
 +
 +===== Pushnotifications =====
 +
 +[[ext-js:push|ExtJs 6.6 Push Notifications]]