Sencha Plugins & Tools

Stefan Stölzle

Sr. Solutions Engineer, Asia Pacific

stefan@sencha.com

@me_stoe

Sencha Plugins & Tools

Sencha IDE Plugins

Supports Ext JS 4+ & Touch 2+ (non-minified versions)

Supports commercial JetBrains IDEs (IntelliJ 14.1, WebStorm 10, etc...)

No additional dependencies

Works with custom classes and overrides in addition to framework

No update required when upgrading the framework

JetBrains IDE Plugin

Code Completion

Code Inspection

Refactoring

Template Creation

Code Navigation

Code Generation

Spellchecking

JetBrains IDE Plugin – Features

Configs

Methods

Properties

Class Mames

xtypes

Event Names

CSS Classes

Stores

Models

View Controllers

View Models

Layouts

View References

Controller Methods

JetBrains IDE Plugin – Code Completion

Manages requires/uses arrays

Flags references to unknown classes and aliases

Flags classes when names do not match directory structure or file names

Flags references to missing controller methods referenced in view components

Provides quick fixes for all of the above

JetBrains IDE Plugin – Code Inspection

Move file/class – automatically keeps namespace in sync with directory structure

Rename file/class – automatically keeps class name in sync with file name

JetBrains IDE Plugin – Refactoring

Classes

Views

View Models

View Controllers

Models

Controllers

Stores

JetBrains IDE Plugin – Template Creation

Demo

One more thing …

One more thing …

Fashion

Accelerates building Ext JS 6 applications and themes

Near real-time WYSIWYG theming

Eliminates Ruby dependency

Fashion

JavaScript-based theme compiler based on Sass and Compass

JavaScript API for writing custom functions

Compiles *.scss files and passes much of the “sass-spec”

Language extensions to enable tooling

Fashion

Compiler produces a JavaScript function

@mixin ($foo, $bar) {

@if $foo {

@debugger;

}

...

}

Fashion

Demo

Sencha Inspector

Debugging Sencha Apps

Inspect Component Tree

Inspect Data Stores

Inspect Layouts

Inspect Events

Inspect MVC

Sencha Inspector

Works on Sencha’s Object Model, not the Rendered DOM

Inspect Themeing

Modify SASS

Live in Browser

Sencha Inspector

Works on*

Sencha Inspector

* requires  setup

Demo

Win a WebStorm Personal License

Q & A