Ext JS Designer README

This Visual Studio Code extension is an entry in the Mission: Open Architect Hackathon (https://www.sencha.com/mission-open-architect/)

The Ext JS Designer Extension is installed from the Visual Studio Extension Gallery.

To install the Ext JS Designer Extension:

1 - make sure you have the latest version of Visual Studio Code installed.
The installer is available here: https://code.visualstudio.com/download

2 - Once installed, start Visual Studio Code, you should see the following (click where indicated):

3 - Install the Ext JS Designer Extension.
- In the 'Search Extensions in Marketplace' textbox, enter marc-gusmano
(then, follow the steps in the screen shot below):

4 - After the extension is installed, a dialog will appear, click 'Create' button:

5 - After button is pressed, a sample project will be loaded: (an overview page will be displayed)

6 - Click on any 'View' file: (a designer window will display)

In this Sencha Hackathon entry, the following are enabled:

• Modern Toolkit
• Views created from the 'Ext JS Designer test project'
• Ext JS project files ending in View.js (like SimpleView.js)
• Sencha cmd generated app view (specifically app/view/main/list.js) (see below)
• Open Tooling app View Packages (see below)

Key Features implemented in the Ext JS Designer VSCode Extension:

• Built as VSCode Custom editor Extension
• Can integrate with current Sencha VSCode Plugin
• Use of AST (NO metadata!!) - see https://astexplorer.net/
• Modular design (folder structure, Web Components)
• Sencha ExtWebComponents and Custom Web Components for UI elements
• Uses Ext JS Documentation output (DOXI) for properties, methods, events and integrated documentation

In the Design Editor

• Re-arrange design and code panes
• Hover over design pane to identify components
• Select a component in design view to show context areas
• Context editing of selected components in design pane
• Visual Drag and Drop of Ext JS Components onto design pane
• Property editing

Using Sencha tools to generate a starter application

• Sencha cmd generated app view (specifically app/view/main/list.js)
  • sencha generate app --ext -modern moderncmd ./moderncmd
  • open /app/view/main/list.js
• Open Tooling app View Packages
  • ext-gen app -a -t moderndesktop -n ModernApp
  • open app/desktop/src/view/personnel/Prrsonnel.js