Download pdf - Sencha IDE Plugins

Copyright ©2015 Sencha


Sencha IDE Plugins Improve Developer Productivity

http://docs.sencha.com/ide_plugins/index.html

Stefan Stölzle Sr. Solutions Engineer, Asia Pacific

! [email protected]

" me_stoe

http://docs.sencha.com/ide_plugins/index.html

mailto:[email protected]?subject=

https://twitter.com/me_stoe


http://docs.sencha.com/ide_plugins/jetbrains_ide_plugin.html

http://docs.sencha.com/ide_plugins/jetbrains_ide_plugin.html


Any of these JetBrains Products • IntelliJ 14.1+ • WebStorm 10+ • PHPStorm 9+ • RubyMine 7.1+ • PyCharm 4.5+

Sencha Cmd 4+ (optional) Sencha Framework SDK (non-minified)

• Ext JS 4+ • Touch 2+

JetBrains IDE Plugin


Key Features • Project Creation • Code Completion • Code Inspection • Refactoring • Template Creation • Code Navigation • Code Generation • Spellchecking

JetBrains IDE Plugin


• create new projects • Ext JS App • Sencha Workspace

Project Creation


• Configs • Xtypes • Methods • Properties • Class Names • Event Names • CSS Classes • Stores • Models

• View Controllers • View Models • Layouts • View References • Controller

Methods • etc...

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

Code Inspection


• Move file/classautomatically keeps namespace in sync with directory structure

• Rename file/classautomatically keeps class name in sync with file name

Refactoring


• Classes • Views • View Models • View Controllers • Models • Controllers • Stores

Template Creation


• run sencha app watch directly from the IDE

• create a run configuration (or two if it is a universal app) automatically on app creation

Run Configuration


Demo


http://docs.sencha.com/ide_plugins/visual_studio_ide_plugin.html

http://docs.sencha.com/ide_plugins/visual_studio_ide_plugin.html


Works w/ MS Visual Studio 2015 • Enterprise • Professional • Community Edition


• Ext JS 4.2+ • Touch 2.1+

Visual Studio Plugin


Key Features • IntelliSense • Toolkit Identification • Definition Lookup • Code Creation • Run Configuration

Visual Studio Plugin


• properties and methods on instances of Ext JS components

• keys in config objects passed into constructors, Ext.create, Ext.define, Ext.widget, and object literals with xtype or xclass

• xtypes and other aliases • event names in listeners objects,

and on, mon, un, and mun methods

IntelliSense


• When using Ext JS (Ext JS 6+ only), the plugin automatically includes suggestions from the correct toolkit (classic or modern) depending on the location of current file being edited. This also applies to single toolkit applications based on the toolkit defined in the app.json file.

Toolkit Identification


• class name • xtypes and other type aliases • methods and properties • config keys • events

right-click and select Go to Definition (or use the standard F12 shortcut key)

Definition Lookup


• Classes • Views • View Models • View Controllers • Models • Controllers • Stores

Code Creation



Run Configuration


Demo


http://docs.sencha.com/ide_plugins/eclipse_ide_plugin.html

http://docs.sencha.com/ide_plugins/eclipse_ide_plugin.html


Works with • Eclipse Luna • Eclipse Mars

Operating Systems • Windows 7 or higher (64 or 32 bit) • Mac OSX • Linux (64 bit only)


• Ext JS 4.2+ • Touch 2.1+

Eclipse Plugin


Key Features • Wizard Creation • Code Completion • Open Definition • Documentation Lookup • Run Configuration

Eclipse Plugin


• Ext JS App(for existing Eclipse projects)

• Ext JS App Project (will create a new Eclipse Project)

• Ext JS Workspace(for existing Eclipse projects)

• Ext JS Workspace Project(will create a new Eclipse Project)

• Ext JS Class • Ext JS Package • Ext JS View Package

Wizard Creation


• Configs • Xtypes • Methods • Properties • Class Names • Event Names • CSS Classes • Stores • Models

• View Controllers

• View Models • Layouts • View

References • Controller

Methods • etc...

Code Completion


• Extend the Eclipse JavaScript editor, and allows to open up the defining source code for various elements/properties within Ext JS and Touch classes.

• Will open up user-generated source code in addition to Ext JS and Touch SDK source code.

• Inside a project that has the Sencha Nature, move the cursor to where you want to open the definition, and press ⇧ + F3.

Open Definition


• Allows to open up Sencha API documentation relevant to the code being edited from within the IDE.

• When editing a JavaScript file inside a project that has the Sencha Nature, move the cursor to appropriate element, and press the F1 key. The appropriate Sencha API documentation will open in a new external browser window.

• If no relevant API documentation can be found, it will default to the API documentation root for the version of the SDK found in your application. (e.g. https://docs.sencha.com/extjs/6.0/6.0.0-classic/)

Documentation Lookup

https://docs.sencha.com/extjs/6.0/6.0.0-classic/



• create a run configuration (or two if it is a universal app) automatically on app creation

Run Configuration


Demo


Q & A


! [email protected]

" me_stoe




Thank YOU


! [email protected]

" me_stoe

