extJS - Open Architect

extJS - Open Architect is a WYSIWYG extJS Editor for Ext JS Javascript Components, built using extJS MVVC Architecture. It is a drag and drop supported editor with tons of features!

Try it out here

Features:

Component Pallete

  • 50+ extJS Modern Components - leveraging doxi JSON
  • Grouped by Type
  • Text Search By Name / Alias
  • Drag and Drop to Editor - Can be dropped on any Container on the UI
  • Detailed Component Information about each component - Opens up a Dialog with details about the component
  • Capability to add more Components to the Library - If in the data format provided as per doxi JSON

WYSIWYG Editor

  • Drop Components from Pallet - Supports Multiple Containers on UI
  • Resize Components and Change Layout - Be it Flex, hbox or any supported layout!
  • Select Component By Clicking on the Component
  • Supports Editing Config – Live Preview on Screen
  • Supports Pre-Defined Templates - Select template on page load and it will draw the View as per the template. User can edit it thereafter

Component Editor

  • extJS Grid based UI with View Model architecture - Edit Config and Event Mapping of each Components and all those which it extends
  • Provides contextual editing for Config – Dropdown / Textbox / Number Field - based on property data type
  • Contextual Documentation for each Config and Events - Opens up a dialog for details of each Config and Events

Project Inspector

  • View all components in a Hierarchical Tree View
  • Select Tree Node to Edit Config/Events or Delete the Component via Context Menu

Live Preview

  • View Preview in Browser, Phone and Tablet Views

Code Generation

  • Generates Code for View, Controller and ViewModel – Ready to Copy Paste
  • Binds Event Listeners of each Component Directly to Controller Code

How we built it

The entire application is built using Sencha npm tools using MVVC Architecture.

Challenges we ran into

Being new to extJS, it was a good learning curve. To build the UI in real-time was a neat feature provided by extJS and we could built our WYSIWYG Editor leveraging it, but to make it work via MVVC Architecture was challenging, but great fun.

Also, some of the components required a Enterprise/Pro license and so we could not get them going. Needed to research more on it, but time ran out. We believe that if we get our extJS project to add the required components, it is a small task to add them from doxi JSON.

What's next for extJS - Open Architect

We found extJS to be a very robust framework and would be excited to use it in our commercial projects. And for that, we need a WYSIWYG Editor and here it is! Also, this editor was built in less than 3 weeks and so time ran out to add more functionalities like:

  • Support for Classic Components
  • Support for extReact and other libraries
  • Pro/Commercial Licensed components
  • Support for UI Theme Changing

and many more!

Built With

  • extjs
Share this project:

Updates