Extjs Tutorial For Beginners: 10 Things I Wish I’d Known Earlier

ExtJS or Extended JavaScript is a comprehensive JavaScript framework developed by Sencha for building comprehensive web and mobile applications. Today, you can use more than 140+ UI components like calendars, grids, trees, lists, forms, menus, toolbars, panels, windows, and hundreds of different extensions. So are you someone who is looking to build stunning web and mobile UIs using ExtJS? Then stop for a while and read through my introspection about what I wish I had known before starting this awesome journey.

Why do I need to know JavaScript and OOP?

To get started with ExtJS, you need basic HTML, CSS, and JavaScript programming. But, it is really helpful if you have a general idea of object-oriented programming (OOP) concepts and how to reuse code with them.  Especially if you come from a different programming background like C, C++, or Java, learning Javascript will make things much clearer when working with Ext Js. Finding an ExtJs tutorial for beginners is really helpful.

Ext Js takes a Javascript first approach to reuse code with classes, similar to HTML elements and containers. So if you do not understand OOP concepts in Javascript, make sure to brush up your skills with some ebooks, tutorials, or online courses.

Why is Sencha Cmd important?

Sencha Cmd is the tool that automates your Sencha Ext JS applications from creating your initial project structure to generating deployable apps. Therefore, it is imperative to know about Sencha cmd, what it does and how to use it. Make sure to read through the Sencha Cmd to get familiar with it before starting development.

How can I speed up the development?

If you want to spend less time on manual coding and accelerate your development, consider using Sencha Architect so that you can build UIs using drag and drop features. The code that automatically generates is optimized for high performance, and you can avoid errors you do when coding manually. 

How can I use the MVC design pattern?

With a basic understanding of Javascript and OOP concepts, understanding Javascript design patterns is also important. Ext Js uses Model View Controller (MVC) design pattern from which its project structure has been formulated. Although it is not a must to use, I recommend better organizing your project structure. To work with MVC, know where to place your code for your UI, data, and the controller logic in your application. Therefore, it is good to know how  MVC works together to create a working web application in Ext Js. 

Where to use the MVVM design pattern?

Another design pattern you must be aware of is MVVM which stands for Model–View–ViewModel. Unlike MVC, the execution entry point of MVVC is the view, and it separates the development of UI using a mark-up language. The ViewModel uses the data binding technique to coordinate changes between the data model and the view. So know where to use MVC and MVVM based on what you will develop.

Is implementing routing at the beginning a good idea?

If you are using forward and back buttons for your website users, you will need to support routing in your application. You can use routing to track the state of your application, but it is not for storing session data. You can also create deep links to directly access a specific page or component of your application. If you do not use routing initially, it will be harder to refactor your code to support routing at the end. Therefore, make sure to know how routing concepts work and decide and determine your routes from the early stages of your project. 

Can I overuse Ext.getCmp method? 

You can use the ‘Ext.getCmp’ method to find components, passing the component’s ID, but you will realize that this method has limitations.   Use this method if there is only a single instance of your component, and reusing components can put you into trouble.  If you properly use Object-Oriented (OO) design concepts, you can easily access your components when you need them.  

What is the right place to look at when I have any problems?

Suppose you want to know everything about Ext Js from installation to deployment. In that case, The Sencha documentation is the right place to look aIt is very easy to use and navigate, consisting of so many tutorials for you to get started. t. Do not waste time first by searching through other internet forums if you encounter any problem with your code. The documentation should be your first place to visit, and keep it open in your tabs every time you work on Ext ed.

Why should I avoid overnesting components and functions? 

One of the common mistakes you might make as an Ext JS beginner is the overtesting tab Panels. It will add extra DOM nodes, make your code complex, and cause poor performance. Think about the code structure and OOP concepts when working with Ext Js. For example, the Panel class has subclasses like TabPanel, FormPanel, GridPanels, which you can extend, and there is no need to declare nested components. Also, avoid defining functions within functions even if you think you are reusing code.  You can use Sencha Inspector as a debug tool and spot these kinds of mistakes you make while coding.

How can I build custom themes?

When you start styling your applications, you can use Sencha Ext JS default themes out of the box. You can also build custom themes to provide your application with the look and feel you want. Refer to the Sencha Themes to know how you can do that. However, if you do not want to write extra code for your custom themes, then the Sencha Themer is the right tool you should use. Not only does it support Ext  Js, but you can also add styles to your  ExtAngular and ExtReact apps without having to write code, saving a lot of your development time. 

Ready to get started with amazing apps with Ext Js?

Sencha Ext Js is a powerful web application framework where you have everything to build stunning web and mobile apps on any modern device. This tutorial has discussed ten things you should know before starting your journey. Be familiar with all the powerful tools Sencha provides to reduce your development time and, by all means, avoid common coding mistakes before they affect your application performance. 

Head over and find out more about building amazing web apps with Ext JS!