1. Ext Designer is a UI builder for Ext JS that allows rapidly arranging and configuring Ext JS components visually. It generates first-class Ext JS components that can be exported and used in an IDE or browser.
2. The Designer workflow involves creating and configuring components and data stores, exporting to disk, importing into an IDE, and implementing business logic and behavior.
3. Advanced configuration techniques in Designer include function-type component configurations, adding plugins, and integrating user extensions, while still leveraging the visual design capabilities of Designer.
5. What is Ext Designer?
ā¢ User Interface Builder for Ext JS
ā¢ Rapidly arrange and conļ¬gure Ext JS components visually
ā¢ Great for quickly prototyping UIs
ā¢ Generates ļ¬rst-class Ext JS components
ā¢ So simple, a salesman your grandmother could use it
Written in Ext JS, running in an embedded WebKit browser
6. Designer Interface
Project Component/Store
Component Toolbox Active Component Flyout Menu
Trees
Design Canvas
Component Conļ¬gurations
Toggle Design/Code Mode Export/Preview Actions
7. Project Workļ¬ow
1. Create/Conļ¬gure 2. Export Project to Disk
3. Import/Open Files in IDE
Components and
Data Stores
4. Implement Business Logic &
Behavior
5. Rinse & Repeat as Necessary
14. Transform
Convert to related components
- TextField => TextArea
- Column => NumberColumn
- Panel => FormPanel
Transfers applicable
conļ¬gurations
Great for quick changes to UI
15. Duplicate
Copy a component
- All conļ¬gurations
- Be careful of uniqueness
(id)
Becomes a sibling
Great for repetitive
components
- e.g., Back-to-back
ComboBox
16. Quick Set
Type in values
JSON style
Great for fast typers
Convenient
- Filter/Set box focused on cmp.
select
- Already ļ¬ltering...
17. Promote to Class
ā¢ Ability to subclass within Designer
ā¢ Promote child items to top-level
components
ā¢ Top level components are rendered to
canvas
Work on individual components
ā¢ Fundamental for Advanced
Component Conļ¬guration
18. Comps can be
Top-level arranged and
comps are used in the UI
exported and still be
exported
23. Example: Grid Column Renderer
Make the column top-level (Promote
ā¢ Drag a grid out onto the canvas
to Class)
ā¢ Promote individual column to a class
Add function conļ¬g to
implementation ļ¬le
30. Integrating UXās
Designer cannot currently show nor conļ¬gure UX
components
Still need to design UI layouts to account for a UX
Add a placeholder component
- BoxComponent
- TextField or TextArea
Assign a ref to the placeholder
Replace the component dynamically in implementation ļ¬le
31. Add a User Extension
Ext.Component
replaceWith override
32. Conclusion
Any problem in that 20% can be solved w/ implementation.
Solving a problem may require advanced Ext JS knowledge, but
almost always is a minute task.
We can and should reap the beneļ¬ts of the Designer when
applicable.
Every version of the Designer will bring more from the IDE and
Browser under its own wing, closing the gap further.
Advanced Techniques <==> Getting around what Designer can&#x2019;t do at the moment.
Advanced Techniques <==> Getting around what Designer can&#x2019;t do at the moment.
Advanced Techniques <==> Getting around what Designer can&#x2019;t do at the moment.
Real quick itemization of what Designer is and does
It&#x2019;s so simple, that it can&#x2019;t do &#x201C;everything&#x201D;. But we can work around that reality and still benefit from what the Designer does give us.
top level components are exported as javascript classes, but we don&#x2019;t have to sacrifice our UI design in order to break down our component hierarchy into individual classes.
Sample of exported component
Sample of exported component
top level components are exported as javascript classes, but we don&#x2019;t have to sacrifice our UI design in order to break down our component hierarchy into individual classes.
Designer gets us most of the way there in creating our UIs, but there are some problems that lie outside of the Designer GUI. That doesn&#x2019;t stop us from making full use of the Designer and what it has to offer. As these limitations close up, this dark green will continue to approach that 100% marker. We can overcome any limitation with a little bit of elbow grease.
Note we&#x2019;re not speaking about issues outside of UI creation (i.e. implementation and behavior) as those issues are (for now) outside of the product&#x2019;s scope and don&#x2019;t apply...as important as they are.
Yes, there are more limitations that what&#x2019;s listed...we know. But we&#x2019;re hitting the big ones today and you can apply the same strategy on all others. Designer will evolve and bring more under its umbrella in time.
Somewhat a contrived example, as TemplateColumns are almost always a better choice. However, this illustrates that we can promote a grid column to an exported class, and then add a function-type config to it in the implementation file.
Somewhat a contrived example, as TemplateColumns are almost always a better choice. However, this illustrates that we can promote a grid column to an exported class, and then add a function-type config to it in the implementation file.
scenario 1 - like any other plug-in...just add it to the plugins array config
scenario 2 - a sub-component won&#x2019;t have a ref until after initComponent, so you can add the plug-in and initialize it in the same step. This is the tricky scenario, but in reality is as simple as calling the private initPlugin method.
This is a community contributed helper method to handle easily replacing placeholder components in any container. Using the configured ref, you can call replaceWith on the placeholder in initComponent and swap it with the UX you wish to load. Simple and elegant workaround.
More info on the Designer, and where to seek help.