1. DEFINE { Mysite, {
VIEW: { Ext JS },
MODEL: { Drupal },
STORE: { Drupal },
TITLE: “
”}};
// @Presenter: Eugene Heng
Theming
Drupal with
Sencha Ext JS

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

4. Sencha Model-View-Controller (MVC) File
Structure
• Model – View – Controller (MVC)
Framework
• View: Graphical UI
• Model: Data Structure
• Store: Data Source
• Controller: Logic
• http://docs.sencha.com/extjs/4.2.1/
#!/guide/application_architecture

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.

9. File Layout for Ext Module
• Custom Module
• Ext JS File Layout
/

10. Demo

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?