Chapter 13. Class system foundations

This chapter covers

  • Understanding prototypal inheritance
  • Developing your first extension
  • Working with plug-ins
  • Exploring the Ext JS class loader

Every Ext JS developer faces challenges where reusability is an issue. Often a component must appear more than once within the application’s lifetime. Without mastering certain techniques, you could end up with what’s known as “function soup,” or unmaintainable code. This is why we’ll focus on the concept of reusability with the use of framework extensions and plug-ins.

In this chapter, you’ll learn the basics of extending (subclassing) with Ext JS. You’ll begin by learning how to create subclasses with JavaScript, and you’ll see what it takes to get the job done with the native language tools. This knowledge will give you the foundation to refactor your newly created subclass in order to use the Ext JS class system.

Once you’re familiar with creating basic subclasses, we’ll focus our attention on extending Ext JS components. You’ll learn the basics of framework extensions, and you’ll solve a real-world problem by extending the grid panel widget.

Next, you’ll see that though extensions solve problems, they can create inheritance issues when similar functionality is desired across multiple widgets. Once you understand the basic limitations of extensions, you’ll convert your extension into a plug-in, where its functionality can easily be shared across the grid panel and any of its descendants.

13.1. Classic JavaScript inheritance

13.2. Inheritance with Ext JS

13.3. Extending Ext JS components

13.4. Plug-ins to the rescue

13.5. Dynamically loading classes with the Ext JS loader

13.6. Summary