extJS - Open Architect
Try it out here
- 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
- 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
- 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
- View all components in a Hierarchical Tree View
- Select Tree Node to Edit Config/Events or Delete the Component via Context Menu
- View Preview in Browser, Phone and Tablet Views
- 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!