jnesis-team

Ionic 5 is available 🎉🚨

Version 5.0 of Ionic (Magnesium) is available since February 11th. This new major version of the framework comes with a lot of evolutions. What has really changed compared to the previous version? Are the good practices of version 4 still up to date with this new version? What effort must be made to migrate an application from version 4 to version 5?

What’s going to change in Ionic 5?

Lots of new features and enhancements, but no major disruptions.
This is indeed what it appears from the announcement of Ionic on their blog and the consultation of the list of changes – changelog – available on github.
In addition, there will be backward compatibility of api from version 4 to version 5, which will make it even easier to migrate an application from version 4 to version 5, which is great news!

As an official partner of Ionic, Jnesis has decided to analyse the main changes. Among the main improvements of Ionic version 5, we can therefore note the following :

  • the suppression of Events in favour of rxjs observables/observers
  • new default colors are available for Ionic 5
  • the “mode” attribute of an element now applies to itself as well as to all its children
  • There are no more icons specific to Android or iOS. However, new options are available to customize the appearance of the icons
  • the styles have been reviewed:
    • replacement of attributes by classes
    • change in the media queries
    • the activated class has been replaced by ion-activated
    • some global CSS properties have been updated
  • some components have been modified (Action Sheet, Anchor, Back Button Card Split Pane, Button FAB Button Item Menu Button Tabs, Controllers, Header / Footer, List Header, Menu, Nav Link, Radio, Searchbar, Segment, Segment Button, Select Option, Skeleton Text)

How to migrate an application from version 4 to the latest version?

Unlike the migration from version 3 to version 4, which included very important changes in the structure of the framework, the migration from version 4 to version 5 is much less cumbersome.
Before upgrading the application to version 5, it is recommended to update the application to the latest version 4, then to correct all the js warnings present in the application (warnings in version 4 not corrected will generate errors in version 5).

Once the warnings have been corrected, run the following command:

npm i @ionic/angular@latest --save

Most of the adaptations are then visual (color updates, custom CSS properties, icons or styles in the components).

Don’t hesitate to contact us if you wish to be supported by real ionic experts in your migration process or to carry out a preliminary audit…

Ionic 3 to 4 migration

Migration of an ionic 3 mobile application to ionic 4

Ionic logo

Why do an ionic migration?

Ionic 4 was released in January 2017 and offers many evolutions compared to version 3.

To point out just a few:

  • The framework has been completely rebuilt from scratch using standard Web APIs, and each component is packaged as a web component*.
  • Unlike Ionic 3, the routing system allows you to have urls and to pass parameters to them, which simplifies navigation, especially for progressive web applications (progressive web app or PWA).
  • Upgrade of Angular (from version 5 to version 8), and upgrade of RxJS (from version 5 to version 6), with all their new features.

*This new version therefore has many advantages. It is now possible, thanks to the web components, to create a component on an Ionic application, and to reuse it for example in an Angular application (or vice versa!).

In addition to these new features, a regular upgrade of an application or software is always a good practice, as it allows to solve compatibility and security issues and to take advantage of the latest features of the framework. Application performance is also increased by more than 50%, especially on the initial application loading time.

Ionic Angular 4 vs Ionic Angular 3

How to proceed?

Creation of the application with Ionic 4

As the structure of the different folders has greatly evolved, the best way to initialize the migration of Ionic 3 to 4 is to create a new application with the version 4 of Ionic with the command line interface.

interface en ligne de commande d'Ionic

Ionic then recommends copying the contents of the various static elements, including application styles, services or configuration files to the new folders provided in version 4.

Component Migration

The migration of a component takes place in several steps. First, we need to update the view – the html file, its style – then we update the business logic.

Visual migration

The two biggest challenges are then to migrate all the components of version 3 to version 4.

For example, the migration of a single button is as follows: Button migration

<button ion-button>Bouton</button> // Ionic 3
<ion-button>Bouton</ion-button> // Ionic 4

For some data-related components, migration may require a much greater effort, especially for form migration with ion-input.

But the migration, even for a single button, does not stop here! Due to the creation of real web components, the style of the buttons is applied in a different way : this is the shadow DOM

This brings many advantages: it is possible for example to apply specific styles to a single node of the DOM, without affecting the rest of the application. It is important to take this into account when migrating components because the inside of the shadow root is no longer reachable by external CSS selectors.

The other effect of the switch to web components is that styles applied in version 3 may not necessarily work in version 4 because the render tree is modified. This is probably the longest part of a migration to Ionic 4; the button, stylized with a red color in version 3, will no longer work after the migration:

<style>
.red-button {
background-color: red;
}
</style>

<button ion-button class="red-button">Red button</button> // Ionic 3 code - the button will be red
<ion-button class="red-button">Boutton with the default color</ion-button> // Ionic 4 code - the button won't be red

The generated DOM for version 3: 

The generated DOM for version 4 :

For this basic example, we use for version 4 the custom properties of the component:

<style>
.red-button {
background-color: red;
}
</style>

<button ion-button class="red-button">Red bouton</button> // Ionic 3 code - the button is red
<ion-button class="red-button">button with the default color</ion-button> //Ionic 4 code - the button is red

Business Logic Migration

Now that the application’s visuals are consistent with version 3, we make sure that the business logic still works. There are many changes in version 4 of Ionic, especially in the application lifecycle.

The application lifecycle represents different functions that are performed at different stages of application loading. In Ionic 4, the different existing methods are shown below:

For example, the ionViewDidLoad() method has been replaced by the method supported by Angular ngOnInit(). If Ionic code migrated to version 4 is executed in the ionViewDidLoad() method, it will no longer be executed, without generating an error! This example shows that it is important to pay special attention to all points of the migration.

In any case, a general reading of the whole code is required in order to check if the methods of each component are still maintained by the new versions of Ionic, Angular, RxJS…

Best practices

Even if the goal of a migration is not to rewrite the business logic code, we sometimes find ourselves forced to adapt source code that uses functions or plugins that are deprecated or no longer supported by new versions of Ionic nor Angular/RxJS.

This is for example the case of the RxJS throw function which was used to record errors for each HTTP request: this method was therefore duplicated for each request.

In the new versions of Angular, HttpInterceptor is used, which greatly simplifies HTTP error handling, as it records the errors of all application requests in a single function for the entire application.

Migration of cordova plugins to capacitor

Cordova plugins provide access to hardware components of Android and IOS devices. They allow for example to access the camera or GPS coordinates. Migration can be a relatively tedious task because some plugins, developed by the community, are not compatible with Ionic version 4.

For example, we have replaced the cordova-plugin-ionic-webview plugin that zooms into an image with multi-touch with the ionic-img-viewer component that is not a cordova plugin.

With Ionic 4, the Ionic team strongly advises to migrate cordova to capacitor which is an open source solution developed by the Ionic team. With this new framework, plugins will be more PWA / web oriented, unlike cordova plugins which are generally only compatible on iOS and Android. Moreover, cordova is a project maintained by volunteers, and it has recently had difficulties keeping up with the latest changes in native platforms as iOS and Android are constantly undergoing changes, be it new operating system updates or new hardware.

Since the end of 2019, the Apple store says it will soon no longer accept applications that use UIWebView, the webview historically used by cordova. Even though this webview has not been used by cordova for a very short time now, there are still references in some cordova plugins that may prevent a future submission to the Apple app store.

Capacitor uses by default the WKWebView webview which is the webview recommended and not deprecated by Apple.

Our experience feedback

After completing migrations without any particular bottlenecks, we can highlight the following points: 

  • The clearer and more organized the business logic is, the faster the migration will be
  • The more the best practices of version 3 are respected, the faster the migration will be
  • Starting from a new Ionic 4 application will always be more efficient than trying to upgrade one by one the different modules via the package node manager.

→ The official migration guide is available on Ionic’s official website

 

don’t hesitate to contact us if you wish to be supported by real ionic experts in your migration process or to carry out a preliminary audit…

jnesis is celebrating is 10th anniversary in Lisbon

Between 2 Ionic and Sencha projects, the members of the Jnesis France team went on a trip to Lisbon to celebrate the 10th anniversary of JNESIS. It is therefore with a lot of ideas and good cheer that the group returns from Portugal to continue to innovate and offer you their services.

 
Previous
Next

But what is ionic by the way?

web or native? or better both with ionic?

First of all, these applications are intended to offer the best of both worlds, web and native, with a shorter development time (time-to-market), and without undergoing the complexities associated with each OS. This is the promise of ionic.

By the way, these are above all web applications that benefit from a unique and especially generic technologic stack: HTML + CSS + JS, regardless of the type of device (desktop, mobile…) and regardless of the operating system (Android, iOS, Windows…).

This is the famous write once, run anywhere

But these applications are also able to take advantage of the native experience. Applications are integrated, reliable and above all interoperable with native equipment and services such as:

  • GPS geolocation
  • camera
  • strong authentication by fingerprints or face recognition,
  • a payment API for example

So, hybrid or Progressive Web App ?

Ionic as future proof as the web

https://ionicframework.com/

It is interesting to note that whatever standard best suits your needs, ionic provides you with a suitable solution. Thus, you can choose to develop Mobile Hybrid applications or Progressive Web Applications (PWA).

But then, what type of applications to choose? Jnesis is there to guide you because the universal solution does not exist. Nevertheless, let’s give you some insights.

Hybrid application

First of all and to put it simply, a hybrid application is a web application converted to a native application. It may therefore be published in the respective public or private app stores, or distributed directly (Android only).

It should be noted that the field of hybrid applications has evolved very rapidly in recent years. Where Adobe PhoneGap was still the only option a few years ago to convert Web applications, the Apache Cordova Open Source version has since given birth to multiple implementations. But with ionic capacitor, ionic goes further and goes beyond the framework of the native mobile. This way your web applications will be able to run in any environment: Native desktop, Progressive Web App (PWA)….

Finally, thanks to the plugins offered by ionic / capacitor, the application will be able to integrate with the vast majority of native equipment and services.

Progressive Web Application (PWA)

More recently, Progressive Web Applications (PWA) have appeared. They are not converted into native applications but take advantage of the new features of modern web browsers that now offer secure gateways to the hardware and services of the device.

Above all, these are web applications that behave like mobile applications, so they are more engaging than traditional web applications and appear fully integrated.

To summarize here are some of the characteristics of PWAs (non-exhaustive list): 

  • work totally offline (store information and perform some basic processing)
  • accessible via shortcuts and application libraries
  • appear totally headless (without a graphical browser interface) and start with a splash screen (home screen) like any native application
  • receive server notifications (push notifications)
  • access the camera, GPS,…

Which javascript framework for Ionic ?

ionic applications hybrides

If ionic privileged angularjs at its origin, one of ionic’s strengths today is its total independence from the web framework. Its integration with the Web Components standard makes the developments totally web framework agnostic:

An all-in-one development toolkit

Whenever possible, Jnesis first priority are vertical solutions because they offer you an immediate return on investment (ROI).

On Ionic applications, we focus on efficiency thanks to the continuous integration.

Finally, thanks to Ionic Studio, developers can also take advantage of an integrated development environment.

 

Choose to work directly with an official ionic partner

jnesis partenaire ionic officielJnesis is one of ionic’s official partner in Europe, with a strong technical know-how around ionic development and associated services, but also back-end (java, node.js, ..)

Feel free to contact us for any request for development, training, coaching or consulting. Our teams of ionic specialists will be happy to answer you.

To not miss any of our news, follow us on  linkedin jnesiset

 

Looking at working with THE Ionic official partner for France and Switzerland?

Ionic and Jnesis are now partners

 

Ionic and Jnesis are now partners

We are proud to annouce Jnesis is now the official Ionic partner for France and Switzerland. This is the outcome of an extensive assessment of our development team by Ionic. Ionic is a leader in the development of cross-platform mobile applications (iOS, Android and Windows Phone).

As an Ionic partner, we now offer a complete range of services in regards to this technology:

  • full development or in cooperation with your teams of your mobile Ionic application
  • code auditing
  • architecture design of your mobile project integrated with existing Information Systems
  • consulting

In case you need to know more about Ionic, it is a technical solution that allows developing efficiently a mobile application with one single codebase and deploy it into Android Google Play, iOS App et Windows Phone stores.

But you still take advantage of the built-in sensors and services offered by the device like for example the GPS, the camera or strong authentication by fingerprint or face recognition.

It saves you rewriting the application for the different platforms. This is the well-known principle of “write once, run anywhere”.

Planning to develop an cross-platform mobile application?

We are looking forward you sharing with us your mobile projects and strategy. Our team will be with you from the design of your application to the deployment and delivery.

Jnesis official trusted partner of ionic

 

Jnesis official trusted partner of Ionic

Check us out on the official Ionic partner website (yes we are the green spot located in France!), on the Jnesis website and on the social networks (twitter & linkedin).

How to take advantage of Font Awesome 5 in your Ext JS 6 applications?

Objective

In this blog article, we will see how we at Jnesis we proceed to integrate Font Awesome 5 to our Ext JS 6 applications.

What is Font Awesome 5 ?

Font Awesome 5 has been released in Decembre 2017. It offers many new features compared to the version 4. Among others :

  • New icons
  • 4 new character sets : solid (fas), regular (far), light (fal) and brand (fab) instead of a single one for the version 4 (fa)
  • Still a GPL (free) version but also a chargable PRO version coming with the light (fal) icon and sometimes the the regular (far) icon
  • Still the option to control the style of a character using CSS but also now using SVG

How does your Ext JS application run Font Awesome?

It depends on the selected theme. It could be a theme using natively the Font Awesome package integrated to Ext JS (packages/font-awesome) as for example the default Ext JS 6 theme Triton, cf theme-triton/package.json:

"requires": [
        "font-awesome",
        "font-ext"
],

or by opposition a theme that can optionally use Font Awesome like the Neptune theme. In this case the requires is done within your application app.json file:

"requires": [
        "font-awesome"
],

Unfortunately Ext JS 6 is shipped with Font Awesome 4.7 so we will have to adapt our application to take advantage of Font Awesome 5.

In the context of this blog article, we created a sample application called MyApp generate through a standard Sencha Cmd command:

sencha generate app

The application uses both the the classic and modern toolkits (universal) and runs the default theme: triton.

It is composed of an standard icon also available in Font Awesome 4.7 called fa-user and a new icon available in Font Awesome 5 called fa-glasses.

We will use the fa-user icon in its 3 different flavors: solid, regular et light.

When using Font Awesome 4.7 only, here is what we get:

Note that the fas, far and fal prefixes are “ignored” with Font Awesome 4.7 and fa-glasses  is unknown.

Move to Font Awesome 5 – Fast track

Download the file font-awesome-531.zip here

Unzip the content into your application or workspace in a new folder called packages/local/font-awesome-531.

Update your application app.json file to use font-awesome-531 in place of font-awesome.

"requires": [
        "font-awesome-531"
],

Rebuild, let’s get started!

With the Triton theme, our solution still allows using Font Awesome 4 icons.

The character fal fa-user (PRO) won’t be found but the equivalent caracter from Font Awesome 4 will be used instead.

Warning, if it has been the Neptune theme, our solution no longer allows using Font Awesome 4 icons.

The character fal fa-user (PRO) won’t be found and nothing will replace it.

 

Chargable version of Font Awesome 5 (PRO)

Even if we haven’t actually tried to integrate this icon set so far, the procedure should(hopefully) be very similar:

  • Add additional font files the resources/font folder (EOT, TTF, WOFF, SVG and WOFF2), see last section of this blog article.

Additional notes and limitations

  • Don’t use the x-fa prefix that precised the font type
  • Only the Triton theme still allows using the Font Awesome 4 icons in combination with the version 5 ones
  • glyphs font families will be the following ones:
    • ‘Font Awesome Free’
    • ‘Font Awesome Brands’
    • [Probably something like ‘Font Awesome Pro’] for the chargable PRO version

Exemple :

{
    title: 'glyph alipay xf642@\'Font Awesome 5 Brands\'',
    glyph:'xf642@\'Font Awesome 5 Brands\'',
    bind: {
        html: '{loremIpsum}'
    }
}

What does the package contain?

If you really don’t want to use our package or just want to do it by yourself and better understand what the package contains, here are some more details.

The procedure consist in adding Font Awesome 5.3.1 to the workspace or the application in form of a new package.  We will call this package font-awesome-531.

This new package will REPLACE the reference to the former one called font-awesome. However, this is not going to be a one to one full replacement when using Triton, we’ll make sure our new package also integrate the version 4.7 of Font Awesome, characters of both Font Awesome versions will remain usable when using triton.

  • generate the font-awesome-531 package at the worskspace OR application level
sencha generate package font-awesome-531
  • Copy ext/packages/font-awesome/sass/etc/all.scss into font-awesome-531/sass/etc (Should be replacing an empty file actually)
  • Copy ext/packages/font-awesome/sass/src/all.scss into font-awesome-531/sass/src
  • Create a new fonts folder within packages/local/font-awesome-531/resources
  • Copy all files within ext/packages/font-awesome/ressources/fonts/ into font-awesome-531/resources/fonts in order to also have  Font Awesome 4 icons in the new package.
  • Download Font Awesome 5.3.1 here
  • Copy all file from fontawesome-free-5.3.1-web/webfonts into packages/local/font-awesome-531/resources/fonts (EOT, TTF, WOFF, SVG and WOFF2)
  • Copy sass files from fontawesome-free-5.3.1-web/scss into font-awesome-531/sass/etc
  • Update font-awesome-531/sass/src/all.scss as follows:
  • // All rule-generating imports go here vs in etc/all.scss so that they will
    // cascade after the framework rules.  This ensures that where the framework provides
    // a default icon, but also provides an iconCls to override it (for example tree icons)
    // the fa rules will override the framework ones (assuming specificity of fa rules is
    // the same or greater than the framework rules)
    @import "../etc/regular.scss";
    @import "../etc/solid.scss";
    @import "../etc/brands.scss";
    @import "../etc/_variables";
    @import "../etc/_core.scss";
    @import "../etc/_larger.scss";
    @import "../etc/_fixed-width.scss";
    @import "../etc/_list.scss";
    @import "../etc/_bordered-pulled.scss";
    @import "../etc/_animated.scss";
    @import "../etc/_rotated-flipped.scss";
    @import "../etc/_stacked.scss";
    @import "../etc/_icons.scss";
     
    // The "x-fa" class should be used in Ext JS applications instead
    // of "fa".  The "fa" class sets some properties that may collide
    // with theme properties, whereas "x-fa" sets only the font-family.
    .#{$prefix}fa:before {
        font-family: 'FontAwesome' !important;
    }
     
    .far {
        font-family: 'Font Awesome 5 Free' !important;
        font-weight: 400;
    }
    .fas {
        font-family: 'Font Awesome 5 Free' !important;
        font-weight: 900;
    }
    .fab {
        font-family: 'Font Awesome 5 Brands' !important;
    }
    //Override fa-content
    @function fa-content($fa-var) {
      @return "#{ $fa-var }";
    }

    Update package.json of the new package as follows by replacing the “sass” code bloc and adding the “resources” code bloc in order for font-awesome-531 to be added to the build resources):

"sass" : {
    "namespace": "FontAwesome531",
    "etc": [
        "${package.dir}/sass/etc/all.scss"
     ],
    "var": [
        "${package.dir}/sass/var"
    ],
    "src": [
        "${package.dir}/sass/src",
        "${package.dir}/sass/src/all.scss"
    ]
},
"resources": [{
    "path": "${package.dir}/resources",
    "output": "shared"
}]
  • And finally update your aplication app.json file to reference font-awesome-531 in place of font-awesome
"requires": [
        "font-awesome-531"
],

Sencha Community Days kick-off!

Schnitzel, Kartoffeln Salat und ... Wasser
Schnitzel, Kartoffeln Salat und … Wasser

The first day already over at the Sencha Community Days taking place the 10th and 11th of April 2019 à Karlsruhe, Germany.

The event attracted over 100 developers, an amazing success!

Atanas Popov and Marc Gusmano introduced the event with a keynote orientied to Quality, Support and Innovation. Besides, they gratified the event by the unveil of Ext JS 7 and other exciting news!
Sencha has also gone into further details on expected new products like Web Components or Sencha Studio.

Attendants were very enthousiastic with this opening!

Subsequently, our team attended to countless interesting speeches. Adrian Teodorescu who is a former developer of the Ext JS framework demonstrated many tips and tricks related to the Ext JS Grid. Jnesis Labs is looking forward to experiment them as soon as we are back to France. After that, it was Tanay Pant‘s turn to impress the attendance with their speech on Big Data.

We also enthousiastically discovered the latest evolutions on Ext React and the modern toolchain.

But the Sencha Community Days is not only a set of high-level conferences, people also have the opportunity to participate to workshops on topics like Testing for instance.

This first day at the Sencha Community Days has also been full of interesting meetings. We had awesome moment chatting with other attendants and speakers coming from all around the world.

See you tomorrow!

Jnesis is looking forward speaking about Facebook’s GraphQL and Ext JS tomorrow the 11th of April at 13h30. Thomas will begin his speech with a comparative analysis between REST and Facebook GraphQL. Then, he will go into deeper details showing us how to take advantage of GraphQL in Ext JS applications. We are looking forward meeting you there tomorrow!

Meet us at the Sencha Community Days!

The 2019 edition of the Sencha Community Days will take place the 10th and 11th of April in Karlsruhe, Germany.

It is a unique opportunity to get the latest news on the Ext JS ecosystem. It is the ideal place to meet the community and to share each other’s experience of the “Sencha tools”.

Community members as well as Sencha itself are going to hold more than 20 speeches. The attendance will have the opportunity to hear about varied and often cutting egde topics. We are already excited by speeched on “Reactive Programming with RxJS” and “ExtJS and machine learning” for instance.

The Jnesis team is also looking forward to speaking on the second day around the Facebook GraphQL technology. We will show how to integrate GraphQL with Ext JS. You are all welcome to our conference entitled “Facebook’s GraphQL – REST in peace?“.

Besides, we are looking forward to meeting our partner Bryntum. During the conference, Mats Bryntse will introduce the latest evolutions of their Gantt Chart component.

Sencha will focus on the latest and rich news led by the exciting new Ext React and Ext Angular releases. We will have the opportunity to see how Angular JS and React front-end developers can take advantage of the unparalleled component library of Ext JS.

This event promises to attract a significant attendance thanks to the participation of many famous speakers from all over the world so come and join us there! Don’t miss it, the Sencha Community days is going to be the biggest international event held on Sencha technologies since the SenchaCon 2016 in Las Vegas.

Don’t you know Jnesis? Jnesis is since 2013 the official and unique Sencha partner for France and Switzerland.

A button in the header of an Ext JS grid action column

In this post, we are going to create a button in the header of an Ext JS grid action column.

The facts

In order to display and manipulate large sets of data, there is a UI scheme that is often used by us developers: a grid to display the data, bound to a form to add or edit records.

There are several ways of doing this. For example, a toolbar above or beneath the grid:

What we are going to study here, is a completely integrated UI solution. It will include a button inside an action column header. While the cells of that column will contain the edition and deletion action icons.

That way you will have a lean and modern design, compared to the previous UI.

The issue

Ext JS grid columns already have the capability of having items in their the header via the items config :

xtype: 'grid',
  columns: [{
    items: [{
      xtype: 'button',
      iconCls: 'x-fa fa-plus',
      ui: 'default-toolbar'
   }]
  }, ...]
}

The issue here is that this way of doing it will not work for action columns xtype: 'actioncolumn'

Indeed, the items property for that kind of column is meant to set their cells icons configuration.

{
  xtype: 'grid',
  columns: [{
    xtype: 'actioncolumn',
    items: [{
      iconCls: 'x-fa fa-pencil' // config of icons in the column cells
      }, {
      iconCls: 'x-fa fa-trash'
      }]
   }, ...]
}

The solutions

  • Use a template column

The first solution would be to use a templatecolumn. This type of column easily helps us displaying an Ext JS template inside its cells.
In this case, it would really be straightforward to create the tags displaying those icons via a HTML template. The troubles we would have to face with the itemsconfig of an actioncolumn would then disappear:

{
  xtype: 'grid',
  columns: [{
    xtype: 'templatecolumn',
    items: [{
      xtype: 'button',
      iconCls: 'x-fa fa-plus',
      ui: 'default-toolbar'
    }],
    tpl: '<span class="x-fa fa-pencil"></span><span class="x-fa fa-trash"></span>'
  }]
}

Nevertheless, it might become painful to handle click on each icon individually, the icons enabled/disabled state or let them have their own tooltip all along the grid rows.
The actioncolumn component, via isActionDisabled, handler() or getTip(), facilitates those kind of interactions in a dynamic way. To get to this, you would have to manually code those different behaviours for a column of type templatecolumn.

  • Create a plugin for the action column

The second solution, which is cleaner and more modular, would be to create a plugin that may be applied to any actioncolumnof our application. This plugin will be provide a way to configure a button located in the header.
As a consequence we will keep all the features of the default actioncolumnwhile getting to the expected result.

  • How to create the plugin

An Ext JS class which extends Ext.AbstractPlugin:

Ext.define('MyApp.plugin.ActionColumnHeaderButtonPlugin', {
  extend: 'Ext.AbstractPlugin',
  alias: 'plugin.actioncolumnheaderbuttonplugin',
  actionColumnHeaderId: null,
  config: {
    buttonConfig: null
  }

The alias will let us easily identify the plugin we want to add later to our column.
We give it a property to also identify our button’s container inside the target column header.
Finally, we create a button configuration which will be implemented when we declare our plugin on the column.

  • How to initialize it

As for any plugin, by overriding the abstract function init(), we can get the component on which the plugin is set and interact with it.
We link the plugin to the component on which it is set.

this.setCmp(cmp);

Then, we listen to the viewready event of the grid. (We will talk later about what is happenning when this event is fired).

var ownerGrid = cmp.getView().ownerGrid;
ownerGrid.on('viewready', this.onViewReady, this);

Then we create a unique identifier based on the id of the column itself.

this.actionColumnHeaderId = cmp.getId() + '-actioncolumnheaderCt';

And finally, we inject a HTML block having the identifier created earlier as its id, inside the header of the column. That way we will easily have access to it among the different functions exposed by the plugin.

cmp.setText('<div id="' + this.actionColumnHeaderId + '"></div>;');

Below the complete code of our plugin init()function:

init: function (cmp) {
    this.setCmp(cmp);
    var ownerGrid = cmp.getView().ownerGrid;
    ownerGrid.on('viewready', this.onViewReady, this);
    this.actionColumnHeaderId = cmp.getId() + '-actioncolumnheaderCt';
    cmp.setText('<div id="' + this.actionColumnHeaderId + '"></div>');
}
  • Let’s add our button at the creation time of the grid

Once the grid is rendered, it fires a viewready event, which we make our plugin listen to.
When this event is fired, we create the button from the buttonConfig we set previously:

var button = Ext.create('Ext.button.Button', this.getButtonConfig());

Then we just inject this component inside the container we added at the plugin initialization:

button.render(view.el.down('#' + this.actionColumnHeaderId));

The complete code of our onViewReady() function:

onViewReady: function (view) {
  var button = Ext.create('Ext.button.Button', this.getButtonConfig());
  button.render(view.el.down('#' + this.actionColumnHeaderId));
}
  • Let’s set the plugin of our column
columns: [{
  xtype: 'actioncolumn',
  plugins: [{
    ptype: 'actioncolumnheaderbuttonplugin',
    buttonConfig: {
      iconCls: 'x-fa fa-plus',
      handler: 'onAddButtonClick'
    }
  }],
  items: [{
  iconCls: 'x-fa fa-pencil'
  }, {
  iconCls: 'x-fa fa-trash'
  }]
}]

This way, we will be able to have access to every property and function available for the differents items of the actioncolumn, while setting a button in its header.

You can get the whole (and a bit adjusted) code and its result by going to this fiddle.

Rowediting plugin customization in ExtJs

The facts

Among the plugins that the Ext JS ecosystem has to offer, one is a particularly useful one: the rowediting plugin. This plugin extends the functions of the grids by individually allowing the edition of each line as a whole.

This is an economic and user-friendly alternative to cellediting, the development of an edition form or the usage of the very restrictive property grid.

But how to customize this plugin? What about for instance modifying the layout of the action buttons by replacing text with icons?

The plugin is not open to such customization, this requires an override.

Implementation should therefore be done following these steps:

  • setting up the store, the grid and the different functionalities (adding items into the store for example)
  • applying the rowediting plugin to the grid
  • customizing of the plugin

As often in software development, that seems straightforward, but this required extra tricks.

What didn’t happen as expected:

  • a problem displaying the plugin buttons.
  • if the grid is empty, and items are manually added in its store, the edition of some lines is an issue since the buttons are partially hidden by the grid header.

Défaut d'affichage des boutons

 

Our solution

We were not the first trying to achieve this, the discussion here even led to a ticket on the Sencha side. The following thread on the Sencha forum was very helpful to solve the problems we faced: https://www.sencha.com/forum/showthread.php?305665-RowEditing-Buttons-not-visible

It only required the addition of a minHeight on the grid and everything was fine.

The customization of the buttons requires:

  • an override of the class constructor :  Ext.grid.RowEditorButtons
  • adding properties on the Ext.grid.RowEditor class override

Note that the useButtonText property is used to indicate that we don’t want to use the text, we want to display icons instead.

The saveBtnIconCls and cancelBtnIconCls properties are used to populate the iconCls property of the targeted button. These buttons are customizable as shown in the example below:

plugins: {
    rowediting: {
        clicksToMoveEditor: 1,
        autoCancel: false,
        useButtonText: false,
        saveBtnIconCls: 'fa fa-check green-color',
        cancelBtnIconCls: 'fa fa-times red-color'
    }
}

And the final rendering is:

Rowediting with buttons customization

The source code is available on our github here