Speed Up Your Ext JS 6.5 Development with Sencha Visual Studio Plugin

Sencha Visual Studio Plugin is popular among Ext JS developers using .Net, and we have seen more than 10,000 downloads from the Visual Studio Marketplace and the Sencha Support Portal. We’re pleased to announce that Visual Studio Plugin 6.0.6 is available, and it supports Ext JS 6.5 and Sencha Cmd 6.5.

You can download the new version from one of the following places:

• Ext JS Pro and Premium customers: Download the plugin from the Support portal
• Download the plugin from Visual Studio Gallery
• Try it for free today*
  *Note: when you receive the Ext JS free trial confirmation email, you can choose to download Visual Studio plugin only, if you already have Ext JS.

What’s New

Support for Ext JS 6.5 and Cmd 6.5 within Visual Studio Plugin

Visual Studio Plugin now provides support for Ext JS 6.5 and Cmd 6.5. Ext JS 6.5 delivers some amazing capabilities for the Modern toolkit with new components including Dialog, Date Panel as well as Virtual Store to manage and seamlessly scroll through massive datasets.

Cmd 6.5 provides support for dynamic package loading to deliver a smooth loading experience in large applications. With Cmd 6.5 you can create Ext JS applications using the latest advances in JavaScript standards ECMAScript 2015 (or ES6). With Visual Studio Plugin, you can use the template for an ASP.NET application using Web API along with an Ext JS 6.5 application. You can also use the template for a standalone Ext JS Web Site, which can be added to ASP.NET projects. Based on community input, we have updated the Visual Studio Plugin project template to serve json files correctly from IIS.

App Watch within Visual Studio Plugin

Sencha Cmd provides a great environment for development and debugging. The app watch command watches your application’s source code for changes and rebuilds the necessary outputs to support “dev mode”. Now from Visual Studio, you can open an app watch window from the menu: View > Other Windows > Sencha App Watch. You just select the Ext JS app and click on ‘start’ to run Sencha Cmd’s app watch process.

The App Watch window provides an option to enable Fashion during the watch session. Combining Fashion and Sencha App Watch creates a rapid mode to compile theme and inject up-to-date CSS into your running page. This means you don’t have to reload to see theme changes, and you instead see these updates in near real time directly in the browser. You can use Sencha Themer to theme Ext JS apps visually and without writing Sass code.

The App Watch window also provides an option to enable Inspector during the watch session. This will add the necessary code to the application in order to connect with Sencha Inspector using the default address.

Consistent Code Completion and Code Navigation

Visual Studio Plugin uses Ternjs for code completion, and you get a consistent code completion experience inside the IDE for:

• Config, method, and property names for all Ext JS 6.5 and user classes
• Alias properties such as xtype, controller, viewModel, and layout
• Event names and listeners objects
• Controller methods in listeners
• Properties from the ViewModel in bind configs

You can easily navigate code to framework, custom, and parent classes by using the F12 shortcut key and get Context-sensitive help by using the F1 shortcut key. You can easily see the plugin log file for any issues with code completion in Visual Studio. In Solution Explorer, just right click on Solution Node, and in the context menu select “Open Sencha Log File”.

Next Steps

For more details, please read the docs. Try it out and share your experience in the comments below or ask questions in the Visual Studio Plugin forum. We hope you enjoy building great apps with Ext JS 6.5 and Visual Studio Plugin.