2. Sencha Ext JS
• JavaScript application framework for building interactive web
applications
• Improve user interaction for your website by providing attractive
graphical interface.
• Complement to core Drupal Theming: some of the graphical Interfaces
(“widgets”) are not provided by Drupal core.
• From same organisation creating Sencha Touch.
3. GUI in Sencha Ext JS
• http://www.sencha.com/products/extjs/examples/
Ext JS includes a set of GUI-based form controls (or "widgets") for use within web applications:
• text field and textarea input controls
• date fields with a pop-up date-picker
• numeric fields
• list box and combo boxes
• radio and checkbox controls
• html editor control
• grid control (with both read-only and edit modes, sortable data, lockable and draggable
columns, and a variety of other features)
• tree control
• tab panels
• toolbars
• desktop application-style menus
• region panels to allow a form to be divided into multiple sub-sections
• sliders
• vector graphics charts
- “Ext JS” from Wikipedia
5. Common Setup for Drupal with Ext JS
• Ext JS as Client Side Frontend providing the GUI
• Drupal as Server Backend supplying the content
• Drupal page can be embedded within Ext JS Panel as HTML
page.
Drupal
Site
nodes.json
Dir
file
file
file
file
B
A
C
My Drupal
page
mysite.php
Request content
Request page
Ext JS code
6. Ext JS <-> Drupal, using services module
Services
Module
MySQL
Controllers JS
?
Store 1 JS
Model JS
REST
(JSON)
Views
JS
Content
Type 1
Content
Type 2
CT1.json
?
Store 2 JS
B
A
C
Dir
file
file
file
file
Custom
Module
CT2.json
Data 1
Data 2
Model 1 JS
Model 2 JS
7. Ext Module
EXT
Module
MySQL
Controllers JS
?
Store 1 JS
Model JS
REST
(JSON)
Views
JS
Content
Type 1
Content
Type 2
CT1.json
?
Store 2 JS
B
A
C
Dir
file
file
file
file
Custom
Module
CT2.json
Data 1
Data 2
Model 1 JS
Model 2 JS
8. Ext Module Functionalities
• Loading of the Ext JS library files.
• Automatic generation of JS code for Ext Model and Store definitions.
• A RESTful services API providing Create, Read, Update and Delete
(CRUD) operations for all Models and Stores.
• Generation of MVC JS files according to JS files structure declared in
custom module.
11. Questions
• Do I need Ext JS on my Drupal site?
• Is Drupal Ext Module necessary for my site?
• How easy will it be to integrate Ext JS on my Drupal site?
• I am a Drupal developer, what other tools do I require?
12. What is Next?
Extend Ext module to support Sencha Touch code
generation.
Other possible extension: Integrated with Services
API?