Using third-party plugins (non-native plugins)

Exclusive offer: get 50% off this eBook here
Sencha Architect App Development

Sencha Architect App Development — Save 50%

Develop your own Ext JS and Sencha Touch application using Sencha Architect with this book and ebook

$17.99    $9.00
by Loiane Groner | September 2013 | Open Source Web Development

In this article by Loiane Groner, author of Sencha Architect App Development, we will learn about third-party plugins. Plugins are a huge help when we want to develop something that is not available within the Sencha API. The plugins that are supported natively already come as an option in Sencha Architect, but there are a lot of plugins that are shared by other developers that we can find on Sencha Forums.

(For more resources related to this topic, see here.)

We want to focus on a particular case here, because we have already seen how to add a new property, and for some components, we can easily add the plugins or features property, and then add the plugin configuration. But the components that have native plugins supported by the API do not allow us to do so, like for instance, the grid panel from Ext JS:

We can only use the plugins and features that are available within Sencha Architect. What if we want to use a third-party plugin or feature such as the Filter Plugin? It is possible, but we need to use an advanced feature from Sencha Architect, which is "creating overrides". A disclaimer about overrides: this has to be avoided. Whenever you can use a set method to change a property, use it. Overrides should be your last resource and they should be used very carefully, because if you do not use them carefully, you can change the behavior of a component and something may stop working. But we will demonstrate how to do it in a safe way!

We will use the BooksGrid as an example in this topic. Let's say we need to use the Filter Plugin on it, so we need to create an override first. To do it, select the BooksGrid from the project inspector, open the code editor, and click on the Create Override button (Step 1). Sencha Architect will display a warning (Step 2). We can click on Yes to continue:

The code editor will open (Step 3) the override class so we can enter our code. In this case, we will have complete freedom to do whatever we need to on this file. So let's add the features() function with the declaration of the plugin and also the initComponent()function as shown in the following screenshot (Step 4):

One thing that is very important is that we must call the callParent()function (callOverriden()is deprecated already in Ext JS 4.1 and later versions) to make sure we will continue to have all the original behavior of the component (in this case the BooksGridclass). The only thing we want to do is to add a new feature to it.

And we are done with the override! To go back to the original class we can use the navigator as shown in the following screenshot:

Notice that requires was added to the class Packt.view.override. BooksGrid, which is the class we just wrote. The next step is to add the plugin on the class requires. To do so, we need to select the BooksGrid, go to the config panel, and add the requires with the name of the plugin (Ext.ux.grid.FiltersFeature):

Some developers like to add the plugin file directly as a JavaScript file on app.html/index.html. Sencha provides the dynamic loading feature so let's take advantage of it and use it! First, we cannot forget to add the uxfolder with the plugin on the project root folder as shown in the following screenshot:

Next, we need to set the application loader. Select the Application from the project inspector (Step 5), then go to the config panel, locate the Loader Config property, click on the +icon (Step 6), then click on the arrow icon (Step 7). The details of the loader will be available on the config panel. Locate the paths property and click on it (Step 8). The code editor will be opened with the loader path's default value, which is {"Ext": "."}(Step 9). Do not remove it; simply add the path of the Ext.uxnamespace which is the uxfolder (Step 10):

And we are almost done! We need to add the filterable option in each column we want to allow the user to filter its values (Step 11): we can use the config panel to add a new property (we need to select the desired column from the project inspector first—always remember to do this). And then, we can choose what type of property we want to add (Step 12 and Step 14). For example, we can add filterable: true(Step 13) for the id column and filterable: {type: 'string'}(Step 15 and Step 16) to the Name column as shown in the following screenshot:

And the plugin is ready to be used!

Summary

In this article we learned some useful tricks that can help in our everyday tasks while working with Sencha projects using Sencha Architect. Also we covered advanced topics such as creating overrides to use third party plugins and features and implement multilingual apps.

Resources for Article:


Further resources on this subject:


Sencha Architect App Development Develop your own Ext JS and Sencha Touch application using Sencha Architect with this book and ebook
Published: July 2013
eBook Price: $17.99
Book Price: $29.99
See more
Select your format and quantity:

About the Author :


Loiane Groner

Loiane Groner lives in São Paulo, Brazil and has over eight years of software development experience. While at university, she demonstrated great interest in IT. She worked as an assistant teacher for two and a half years, teaching algorithms, data structures, and computing theory. She represented her university at the ACM International Collegiate Programming Contest – Brazilian Finals (South America Regionals) and also worked as Student Delegate of SBC (Brazilian Computing Society) for two years. She won a merit award in her senior year for being one of the top three students with better GPAs in the Computer Science department and also graduated with honors.

She has worked at multinational companies such as IBM. Her areas of expertise include Java SE, Java EE, and also Sencha technologies (Ext JS and Sencha Touch). She is now working as Software Development Manager at a financial institution, where she manages overseas solutions. She also works as an independent Sencha consultant and coach.

Loiane is also the author of Ext JS 4 First Look and Sencha Architect App Development, Packt Publishing.

She is passionate about Sencha and Java, and is the leader of CampinasJUG/SouJava Campinas (Campinas Java Users Group) and coordinator of ESJUG (Espirito Santo Java Users Group) , both Brazilian JUGs.

She also contributes to the software development community through her blogs: http://loianegroner.com (English) and http://loiane.com (Portuguese-BR), where she writes about IT careers, Ext JS, Sencha Touch, Sencha Architect, Java, and general development notes and also publishes screencasts.

If you want to keep in touch, you can find Loiane on Facebook (https://www.facebook.com/loianegroner) and Twitter (@loiane).

Books From Packt


Sencha MVC Architecture
Sencha MVC Architecture

Sencha Touch Cookbook, Second Edition
Sencha Touch Cookbook, Second Edition

Sencha Touch Cookbook
Sencha Touch Cookbook

Sencha Touch Mobile JavaScript Framework
Sencha Touch Mobile JavaScript Framework

Sencha Touch 2 Mobile JavaScript Framework
Sencha Touch 2 Mobile JavaScript Framework

Instant Sencha Touch [Instant]
Instant Sencha Touch [Instant]

Creating Mobile Apps with Sencha Touch 2
Creating Mobile Apps with Sencha Touch 2

 Ext JS 4 Web Application Development Cookbook
Ext JS 4 Web Application Development Cookbook


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
t
S
7
B
B
Y
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software