1. Learn the difference between Classic and Modern
Before putting pen to paper or finger to keyboard is it important to have a clear understanding of the difference between the “Classic” and “Modern” toolkits. Classic is the new name of what is traditionally considered Ext JS and is it intended for use in desktop applications. Modern is the new name for Sencha Touch and is for use on mobile applications. By adding Sencha Touch into Ext JS Sencha have provided us with the ability to build what they call “universal” applications. Universal applications have different views for both Modern and Classic but importantly these views share common logic, meaning that all the heavy lifting only needs to be written once. It is important to be clear on what you are building before you start so you can generate the correct project structure. If you are unsure about your roadmap always err on the side of caution and generate a universal application.
2. Avoid IDs
You should never be tempted to give your components IDs. If you use an ID there may only ever be a single instance of this component, this will catch you out when you try to reuse a component. If you think you need an ID on a component you should use an ItemId, these need only be unique only within the component’s immediate container.
3. Avoid Using Ext.getCmp
In order to use Ext.getCmp to find components you will need to give them an ID, which as we found out in tip 2 is a bad idea. If you structure your applications correctly and apply the principles of Object Oriented (OO) design properly then you shouldn’t have a problem getting access to your components when you need them. Check out Ext.Component in the docs for some better alternatives, including up and down. Ext.ComponentQuery is also available, though is best used sparingly as it is quite slow.
4. Avoid Using the ownerCt Property
Don’t rely on the ownerCt property to get a component’s parent. Chances are if you want to access the component’s parent within its code then the code shouldn’t be there. The code should likely be in the parent itself. This is a similar thing to using Ext.getCmp (above).
5. Name Your xtypes Carefully
Beware of duplicates! A good rule of thumb is to name your xtypes the same as your class, including namespaces, so you can track down the actual class definition very easily.
6. Don’t Edit the Framework Code
Yes, delve into it, read it, test it, learn from it – but don’t edit it! If you start making changes to the core library, whether it is the JS or CSS, you are planting a ticking time-bomb into your application. When you come to upgrade to a newer version all those changes will be lost and you will have to traipse through trying to figure out where things are broken!
If you want to alter the behaviour/look of the framework then go for it but do it by overriding the class (be it a JS class or a CSS class) or method in a separate script file. By doing this you can remove it if necessary and keep track of it when it comes to reviewing those changes when new versions are released.
7. Always Have the Docs Open
The API documentation is your best friend – it should be your first port of call when running into problems or when trying something new. They are well laid out and easy to navigate, so make use of them. Remember to check the correct docs for the toolkit you are using!
8. Explore Sencha Cmd
Sencha Cmd is the glue that binds your Sencha Ext JS applications together. Sencha Cmd is used at every stage of your project from creating the initial structure right through to generating builds. As the cornerstone of Ext JS application it is important to become familiar with what Sencha Cmd does and how it does it. A good place to start is the Sencha Cmd Docs.
9. Use the power of MVVM
Since Ext JS 5 Sencha have not only supported the use of MVC but also Model-View-ViewModel or MVVM. The updated pattern leverages the architectural benefits of MVC (separation of functional responsibilities) but also provides the additional advantages of data binding. This leaves us with the Model and framework performing as much work as possible, which is very powerful as we are minimising application logic that directly manipulates the View. The Ext JS Docs provide a great in depth introduction to application architecture.
10. Learn about binding
Binding in Ext JS is an essential tool to learn and take advantage of. By using binding we can create much clear code that can do much more. You can find out the power of binding by following this guide produced by Sencha.
11. Build it Up Gradually
It’s all too easy to get too excited about a project and dive right in, create half a dozen components and then open the browser and give it a try. If it doesn’t work it can be very difficult to move backwards and find the culprit. We suggest creating things a stage at a time. That way you can gradually build it up and be sure each piece works as you want.
If you’re trying to create DataView, for example, you may wish to add a number of features. You may want to allow new items to be added to it and animate new items in. To do this first you should get the new items adding in correctly and then move on to animating them. If you try to do everything at once something is likely to go wrong.
12. Reuse Your Code
If you find yourself writing the same code again and again (think masking elements while loading, response/error handling code etc) then wrap that stuff in a function in a way that makes it generic and reuse it. Save yourself the time, effort and RSI – you’ll thank yourself when you decide to change it and have to change hundreds of copies.
13. Do Not Not Overnest Components
This hugely common mistake found in new Ext JS developers’ code is the overnesting of Panels. Think carefully about your structure and remember that components such as FormPanels, GridPanels and TabPanels all extend the Panel class so don’t need to be wrapped in another Panel. They can be placed wherever their more generic parents can and be configured with the same options.
14. Be Careful of Spaghetti Code/Scope
Don’t define all your components in one big file or all inline – it will be a nightmare to debug and your scope will be all over the place. Make things easy and split each component definition into its own file and extend the base class to add your configuration and extra methods and behaviours. This way you can simply instantiate these components where you need them keeping things nice and tidy and loosely coupled.
If you don’t want to extend base classes all the time then using Factory Methods is another option.
15. Try Not to Nest Functions
Don’t define functions within functions (within functions…within functions…). You may think your doing some good code reuse but your just creating a scoping and organisation nightmare. Trying to follow that sort of nesting is not pleasant, so spare a thought for your co-workers who might have to debug it.
16. Always use Developer Tools
Keeping Developer Tools open is essential when doing any kind of web development. Get to know the developer tools inside out and make use of the powerful debugging tools that they provide. It’s easy to forget that, at the ground level, all Ext is doing is generating markup and these tools will give you an insight into what’s happening in the black box. If you learn how to use these tools properly and how to debug your JS effectively you will save yourself a huge amount of time.
Once you have masted the standard features of Developer Tools you may want to try out App Inspector which has been created by Sencha Labs to make debugging Ext JS even easier.
17. Make it a White Box
Use your new found Developer Tools knowledge to break into the Ext JS Framework rather than always stepping over those calls. It’s incredible how much you can learn and how easily you can find a problem by stepping into a framework method, not to mention the hours of stress trying to figure out a problem.
18. Test on All Browsers
Although Ext JS takes care of 99% of cross browser issues always remember to test your application across all the browsers – especially IE/Edge! The usual IE CSS issues are common when creating custom data views and JS errors such as rogue commas will bring your application to its knees.
If you have any of your own tips or best practises please leave us a comment and we’ll add them to the list!
19. Make use of themes
Sencha provide a host of Ext JS themes out the box. These are great for getting you started but once you’re up and running why not try create your own theme which extends from one of these. By creating your own theme not only will you will be able to give your application a unique look and feel but you will also be able to easily change the appearance of your components across you application with a single set of styles.
You can find out more about creating your own theme by visiting the Sencha Docs.
20. Use Fashion
Sencha Cmd version 6 introduced a new feature to theming called “Live Update”. Live Update uses Fashion to compile and inject CSS into your page as you create it in your IDE. This is a great time saver as you no longer have to refresh your browser to see you style changes. Fashion will become especially useful as the number of pages in your application grows!