DEFINE { Mysite, {VIEW: { Ext JS },MODEL: { Drupal },STORE: { Drupal },TITLE: “

”}};

// @Presenter: Eugene Heng

Theming Drupal with

Sencha Ext JS

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.

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

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

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.

DrupalSite

nodes.json

Dir

file

file

file

file

B

A

C

My Drupal pagemysite.php

Request content

Request page

Ext JS code

Ext JS <-> Drupal, using services module

ServicesModule

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

CustomModule

CT2.json

Data 1

Data 2

Model 1 JS

Model 2 JS

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

CustomModule CT2.json

Data 1

Data 2

Model 1 JS

Model 2 JS

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.

File Layout for Ext Module

• Custom Module

• Ext JS File Layout

/

Demo

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?

What is Next?Extend Ext module to support Sencha Touch code generation.

Other possible extension: Integrated with Services API?