On behalf of Sencha and the entire Architect team, I’m proud to announce the release of Sencha Architect 3.1. It comes with many new features, most notably Ext JS 5 support. Within the short period since the Ext JS 5 release, we have added support to bring Sencha Architect to parity with all the new features offered by Ext JS 5. We want to thank all the participants of the Sencha Architect 3.1 Early Access Program (EAP) for their invaluable input.
Table of Contents
Ext JS 5 Support in Sencha Architect
The biggest update in Sencha Architect 3.1 is the addition of Ext JS 5 support. Ext JS 5 offers many new and exciting features: Touch support, architectural improvements (MVVM), responsive configs, and component upgrades, to name a few. All of these features are now supported by Sencha Architect.
MVVM Architecture Support
Ext JS 5 introduced support for MVVM architecture, with ViewControllers tied directly to the Views. To support this new approach, Sencha Architect 3.1 automatically generates a ViewController for every view that you create. Also with the new MVVM approach, a ViewModel coordinates changes between Model’s data and the View it represents, using a technique called “two-way data binding.” Sencha Architect 3.1 automatically generates a ViewModel as well for every view that you create. We encourage you to use ViewModels and ViewControllers. Note that if you are upgrading an existing Ext JS 4.2.x app, Sencha Architect 3.1 will continue to use the MVC structure you are accustomed to, but it will also allow you to leverage the MVVM functionality.
Routing Support
We have added support for the newly introduced routing feature in Ext JS 5, which allows you to implement “deep linking” within your applications by translating your application’s URL into controller actions and methods. Sencha Architect 3.1 offers a very simple interface to designate URLs on which to fire functions.
Touch-Optimized Charts Support
Ext JS 5 added a new high-performance and touch-optimized charting package (built on top of Sencha Touch charts) that offers support for interactions (pan, zoom, etc.) as well as some new chart types and enhancements to existing chart types.
There are significant differences between this new charting package and the older Ext JS 4 legacy charts. Due to the differences, Sencha Architect 3.1 can’t auto-update your charts, instead it asks you to replace them using the new charts package. Note that Sencha Architect 3.1 does not support the use of the legacy charts, even though its available as a standalone package with the Ext JS 5 framework. That said, we have made every effort to provide helpful migration information for updating to the new charts package.
Migrating Ext JS 4.2.x Applications to Ext JS 5.0.x
One of our main goals with Sencha Architect 3.1 was to make the migration of Ext JS 4.2.x applications (built using the previous versions of Sencha Architect) as simple as possible. 
To upgrade your application, simply open your Ext JS 4.2.x project in Sencha Architect 3.1, right-click on the Library node under Resources, and click Upgrade to Ext JS 5.0.x. Remember, Ext JS supports both the new MVVM and the previous MVC architectures, and it is not mandatory to switch to MVVM from MVC for your existing applications. Sencha Architect 3.1 will not automatically convert your MVC code to MVVM, but it will enable you to get started with the new MVVM architecture along with your existing MVC structure.
Sencha Cmd 5 in Sencha Architect 3.1
The latest Sencha Cmd 5.0.x integration with Sencha Architect 3.1 also offers a number of optimizations to make Sencha Architect and Cmd work faster and better, together.
Sencha Architect 3.1 leverages the Sencha Cmd ‘sencha app watch’ functionality to automatically digest and recompile the changes to your application by continuously monitoring for changes. With Sencha Cmd 5.0.x, Sencha Architect 3.1 can now deploy its own lightweight web server. This is especially helpful for users that are doing proof-of-concept projects or are just getting started and do not have a server environment set up. You can find the configurations for the web server under Preferences -> Web Server, where you can enable or disable it, and designate a port number.
Other Improvements in Sencha Architect 3.1
Improved Project Inspector
We’ve greatly enhanced the project inspector in Sencha Architect 3.1 to make it easier to navigate, and to load large projects faster. The new project inspector even shows the namespaces as folders (a highly requested feature by our users), which is incredibly helpful when trying to organize your classes. The inspector now has two tree panels that sit side by side. The left pane shows every top level class and the right pane shows all details of the selected class.
Visualization for Linked Instances
Sencha Architect has always allowed you to re-use existing views as building blocks to compose other views. We call this feature linked instances. When hand-coding this would be the same as writing a subclass and then re-using that class. Simple and DRY (http://en.wikipedia.org/wiki/Don’t_repeat_yourself).
When we expanded the single pane inspector to two panes it was obvious that we would need to change the way we visualized the relationships between classes. We are drawing bezier curves with SVG from each instance of the class in the detail inspector to where the class is defined.
The reverse connection can also be shown by clicking the linked instance icon in the main panel. It will list every instance of where this class is being used.
Helper Tool
We have added a “Helper” tool to provide common use cases that will support your development. The initial implementation of the ‘Helper” contains a data UI builder. We plan to enhance this feature in future releases of Sencha Architect.
Theming Enhancements
Sencha Architect 3.1 provides a new feature for theming called “Quick Themes.” Quick Themes, which work just like custom themes, allow quick modifications to Neptune and Neptune Touch (default Ext JS themes) by simply modifying a few variables. Users save time by not having to customize every single component. A Quick Theme can always be converted to a regular custom theme, if you need more detailed customization. Other areas where Theming got some enhancements are: speed, autocomplete for SCSS variables, gradient selectors, and font selectors.
Editor Enhancements
The editor experience in Sencha Architect 3.1 has been enhanced to allow inline editing within classes. Users can now see the full context of their classes as they edit properties, create functions, and/or add comments.
Thank You
Adding Ext JS 5 support to Sencha Architect was a huge task, and we sincerely appreciate the comments and feedback from our Early Access Program (EAP) participants. We are very excited about this release and would like to hear about your experiences. Please give us your feedback in the Sencha Architect 3.x forum, so we can improve it further.
THIS IS FANTASTIC! THANK YOU :D
Excellent…..that’s it we were waiting…..thanks a lotn
Hi, been waiting for this upgrade. Is the first graphic correct? VM and VC mixed up?
@Andrew Jackson – Your right, the text overlaid on the graphic is incorrect. Thanks, we’ll get this fixed.
Hi,
How do we get this? Will it update at app start up or do we download from the https://staging.sencha.com/products/architect/download page?
Cheers
@Andrew Jackson – You can download on the products page. Architect 3.1 has the ability to run side by side with Architect 3.0 as long as you install it in different directories. But to be clear once you upgrade a project from 3.0 to 3.1, you will not be able to open that project again in 3.0.
@Andrew Jackson – the graphic has been fixed. Thanks for the catch!
Congratulations on SA release. I am excited.
What about the support for controller inheritance? and how about assigning custom properties to config? for example: Assigning a customStore property to Grid’s store config using the Property window
@shreeraj –
Custom properties can be added by typing them in and then clicking the “Add” button in the configuration grid. If you have problems with it please open a thread on the Sencha Architect Q&A forums and will help you out.
https://staging.sencha.com/forum/forumdisplay.php?117-Sencha-Architect-3.x-Q-amp-A
As to controller inheritance, you can do this by including a raw JS Resource but there is no direct support in the controller toolbox item. You can also accomplish similar functionality by using a mixin. We welcome your feedback in the Q&A section and can continue the discussion.
Hi,
Great news, I’m going to evaluate it this weekend.
First question:
I must admit that it start to be very very confusing for us users to determine which product to choose from Sencha touch or Ext JS 5?Can you help tell what are the differences if there are any left? When should I choose touch and when should I use Extjs 5?
Second Question:
In the touch framework there is something called a Carousel, it allows us to slide between windows.
When I look at the tabs feature of extjs it looks very very similar, except that the carousel moves when i click on the tab. Is the slide on touch feature also comming to the tabs object?
That would be cool because it would allow us to have a second way to navigate through those tabs. So when you slide from right to lefton the tabs content , then it would select the next Tab
Is that possiblefor the next release? Or is it already possible now?
@Sebastien –
I think there are three key differentiators between Ext JS 5 and Sencha Touch: device support, browser requirements and their stock components.
Ext JS 5 covers the low-end IE8, desktop environments and now extends to supporting touch-enabled devices like laptops and tablets. Ext JS 5 does not explicitly support phones. Sencha Touch was created to support phones and it extends to devices like tablets but has limited multi-input support. Sencha Touch also requires CSS3 features that were not available in IE until version 10. This use of CSS3 is essential for performance on less powerful devices.
Choosing between Ext JS 5 and Sencha Touch typically boils down to the first two: devices and browsers. In the case of tabs vs carousels we have discussed this as potential features for future releases of Ext JS. Even though Ext JS 5 does not provide carousels at this time, in the interim you can build those interactions without too much difficulty.
Hi,
Please let me understand as im totally new to sencha. Is this a tool similar to phprunner?? Can i connect it to mysql database? Does it work under standard apache?
Thanks people!
@Don Griffin
So if I want to develop a touch gui for Android 4.4 Tablets, which framework should I choose? Because tablets are an extension of Both products?
Also this differentiation of both products is dissipating with the facts that phones behave more like tablets since IOS7 and android Kitkat
Software developers are trying to merge there mobile and desktop platforms:
See what Microsoft did with windows 8 and what google die with android (they had two different versions, one for tablets Android 3 and one for phones Android 4, but they merged them together in Android 4.1 to become one product)
“google chrome desktop” and “google chrome android” also just merged together since this year (there are only small differences that are also dissapearing)
I just saw the newly published usage numbers of Tablets and Phones:
http://thenextweb.com/google/2014/07/31/android-reached-record-85-smartphone-market-share-q2-2014-report/
85% has become google android!!
10% is IOS from Apple
5% are others
Is this something that you will consider when creating support for Android?
ExtJS 5 Upgrade Training…
You can get ExtJS 4.x to 5.x upgrade training from Sencha soon, coming up in the USA, Melbourne, Hong Kong, New Zealand, and others… check out sencha.com/training/ for more details
So just to be clear, auto upgrade hasn’t gone out yet? Any eta on auto?
@Dawesi – We will continue to follow the practice of putting out installers first, waiting a week or two to iron out any issues that may be encountered by the early adopters and then prompting users for an update.
@Girish – Ext JS does support the browsers that you mentioned. Sencha Touch is for mobile browsers. If you are having specific problems please post on our forums so that we can help troubleshoot your issues.
Sencha 3.1 Architech does not support IE11, Chrome, Opera, Saphari.
I am able to open 3.1 application only at firefox..
What should be approach to handle this situation… I really like new 3.1 features but it comes with browser incompatibility….:(
Girish
Note that MVVM has come out for ext js the coding becomes more difficult when you have to maintain a sencha touch interface because 2.3 is based on MVC.
Are there plans to upgrade touch also to support MVVM?
Thanks for this, we’ve posted the translated Japanese version of this blog here: http://www.xenophy.com/sencha-blog/11381
Also, this is the Japanese Sencha Meetup Group: http://www.meetup.com/Japan-Sencha-User-Group
thanks you