ucan-ext-js-kitchen-sink/app/desktop/src/view/home/HomeView.js

my-ext-gen-app description for Ext JS app MyExtGenApp

Ext.define('UCANSink.view.home.HomeView', {
  extend: 'Ext.Panel',
  xtype: 'homeview',
  controller: 'homeviewcontroller',
  viewModel: {
    type: 'homeviewmodel'
  },


  requires: [
    'Ext.carousel.Carousel'
  ],

  cls: 'cards',
  shadow: true,
  layout: {
    type: 'vbox',
    align: 'stretch'
  },
  defaults: {
    cls: 'demo-solid-background',
    flex: 1
  },

  tbar: [{
    xtype: 'button',
    text: 'Zurück',
    handler: function() {
      let carousel = Ext.ComponentQuery.query('carousel[cls~=carousel-tutorial]')[0];
      carousel.previous();
    }
  }, {
    xtype: 'spacer'
  },{
    xtype: 'combobox',
    cls: 'tut-box',
    width: 300,
    value: 'Template installieren',
    bind: {
      store: '{tutorialStore}',
    },
    displayField: 'name',
    listeners: {
      change: function(a, value) {
        let carousel = Ext.ComponentQuery.query('carousel[cls~=carousel-tutorial]')[0];
        carousel.setActiveItem(value)
      }
    }
  }, {
    xtype: 'spacer'
  },
    {
      xtype: 'button',
      text: 'Weiter',
      handler: function() {
        let carousel = Ext.ComponentQuery.query('carousel[cls~=carousel-tutorial]')[0];
        carousel.next();
      }
    }],
  items: [{
    xtype: 'carousel',
    viewModel: true,
    cls: 'carousel-tutorial',
    items: [
      {
        margin: 20,
        html: '<p>Zunächst muss das Package Template heruntergeladen werden' +
            ' <a href="desktop/resources/settings.zip">(Download Link)</a>.</p>' +
            '<p>Danach kann das Template über die IDE (IntelliJ) unter File/Manage IDE Settings/Import Settings... importiert werden.</p>' +
            '<img src="desktop/resources/screenshots/import.png">' +
            '<p>Die heruntergeladene Datei auswählen und importieren.</p>',
        cls: 'card',
      },
      {
        margin: 20,
        html: '<p>Nachdem das Paket installiert wurde, kann dieses folgendermaßen angwendet werden.</p>' +
            '<img src="desktop/resources/screenshots/paketerstellen.png">' +
            '<p>Dabei gibt es zu beachten, dass der Hauptordner zum erstellen der Templates ausgewählt werden muss.</p>',
        cls: 'card',
      }, {
        margin: 20,
        html: '<p>Danach müssen die Template Parameter gesetzt werden.</p>' +
            '<img src="desktop/resources/screenshots/paketerstellentext.png">' +
            '<p><b>HINWEIS: </b>Einige Namenskonventionen müssen eingehalten werden. <br><br> ' +
            '<b>File name:</b> CamelCase <br>' +
            '<b>NPM NAME:</b> Alles klein und verbunden mit - <br>' +
            '<b>VERSION:</b> X.X.X </p>',
        cls: 'card',
      },
      {
        margin: 20,
        html: '<p>Einige Einstellungen müssen danach noch manuell angepasst werden.</p>' +
            '<img src="desktop/resources/screenshots/appjson.png">' +
            '<p><b>HINWEIS: </b>In das App.json rquires muss der zuvor angegebene File name eingetragen werden <br><br> ',
        cls: 'card',
      }, {
        margin: 20,
        html: '<p>Jetzt noch die UCANComponentList.json bearbeiten dann sollte alles funktionieren.</p>' +
            '<img src="desktop/resources/screenshots/complist.png">' +
            '<p><b>HINWEIS: </b>Der packaName ist der gewählte File name. <br><br> ',
        cls: 'card',
      },{
        margin: 20,
        html: '<p>Die Komponente welche man schreiben möchte findet man in den Packages unter local (siehe Screenshot).</p>' +
            '<img src="desktop/resources/screenshots/src.png">' +
            '<p><b>HINWEIS: </b>Hier können auch mehrere Komponenten mit mehreren eigenen xtypes erstellt werden.<br><br> ',
        cls: 'card',
      },{
        margin: 20,
        html: '<p>Für das Beispiel, welches in der UCAN Sink angezeigt wird, erstellt das Template automatisch die passenden Ordner in der view unter src/view/componentDetail/examples/packageName</p>' +
            '<img src="desktop/resources/screenshots/examp.png">' +
            '<p><b>HINWEIS: </b>Der Controller und das Viewmodel können für ausgiebigere Beispiele verwendet werden.<br><br> ',
        cls: 'card',
      }],
    listeners: {
      beforeactiveitemchange: function(comp) {
        let comboBox = Ext.ComponentQuery.query('combobox[cls~=tut-box]')[0];
        comboBox.setValue(comp.getActiveIndex());
      }
    }
  }],
});