plugin

Extjs – vertical header in grid and locked columns

TPodolak, , , 3 Comments

A while ago I wrote an article where I described how to create a plugin, which can flip header of Ext.panel.Grid vertically. I’ve been using this plugin for a couple of months in a company I work for, however in the last week it turned out that this extension does not work for grid with locked columns. After digging into Extjs source code I found out that when You use locked columns, the grid is created as a combination of two grids: normalGrid and lockedGrid. Therefore it is necessary to apply vertical-header plugin to these two grids separately. In order to do that, I improved this extension to detect if grid has locked columns or not. The main change is in init function which now looks that way

In the first step I check if columns are locked. The method for do that is pretty straightforward

Afterward I do create two instances of vertical-header plugin and initialize them with appropriate partial grid (lockedGrid or normalGrid). Entire code listing is presented below

vertical header
Source code for this post can be found here

Extjs – vertical header in grid and locked columns

Extjs – vertical header in grid

TPodolak, , , 1 Comment

Extjs doesn’t provide us with any build-in mechanism for flipping text vertically in grid’s header. Fortunately we can achieve this effect by using a mixture of CSS rules and some javascript code. In order to make code more reusable, I’ll write it as a plugin for grid. Let’s start from creating CSS rules responsible for text rotation

.x-column-header .x-column-header-text is a selector for header text in every Extjs grid. It is obvious that we want only certain grids to have vertical headers, that is why I extended selector with additional custom class .v-vertical-header-grid. Having CSS class prepared, now we can write actual plugin.

At the very beginning .v-vertical-header-grid class is added to the grid. Thanks to this, CSS selector created in the first step is able to select text in header. At this point text is rotated, however it can’t fit into header – its size didn’t change. That is why in function handleAfterLayout I manually measure text height using Ext.util.TextMetrics and change height of header.Solution presented above works fine in IE10, Opera, Firefox and Chrome. There were some problems in IE9, however extending CSS class with these rules

did the trick. Here is the result
vertical header
Source code for this post can be found here
There is a problem with this plugin and locked columns, please see the updated version of this plugin here

Extjs – vertical header in grid

Extjs 4.1.1 – validatable grid

TPodolak, , , , 5 Comments

In this post I will present a simple plugin to Ext.panel.Grid which displays validation errors on a grid. The validation mechanism is based on the model validation – useful feature of Extjs framework. Let’s start from creating a simple model:

As we can see, this model has a validation field where we can define a validation mechanism for every field in our model. In this example the lastname field is required, I use build in Extjs validator of the presence type. More build-in validation types might be found here. Of course, it is possible to define custom validation types, simple example can be found on StackoverflowHaving defined model validation, let’s create ValidatableGridplugin. The main function of ValidatableGrid plugin is function called validate which is attached to grid component. This function looks this way;

This function iterates through every model in grid’s store and runs validation method. As a result, we get a validationResult object which holds information about errors of model. This object has a function isValid which returns true if there is no errors or false otherwise. Having checked the model, we have to show errors on the grid. In order to do that, we have to find a cell, in which invalid field is displayed using getCellByPosition function. In the last step, we only have to modify CSS classes of cell. That is why, I added x-form-invalid-field class to show red line in cell and also data-errorqtip class to show validation error tooltip. The entire listing looks this way;

here is example of usage;

and the result
validatable grid
Source code for this post can be found here

Extjs 4.1.1 – validatable grid

Extjs 4.1.1 – multiselectable datepicker as plugin

TPodolak, , , , 2 Comments

A couple of weeks ago I wrote a post about creating a mutiselectable datepicker. The idea of creating this component was to use the object inheritance. Today, I would like to show how to create a multiselectable datepicker as a plugin to Ext.date.Picker. The code responsible for selecting dates is almost the same, the only thing which must be changed is the component initialization and access to the datepicker component. In order to make a plugin to any Ext.Component class, you must implement the init method which takes as argument a reference to the component – so let’s change the existing code to meet this requirement. We need to rename initComponent function to init. In addition to, we should delete the extend property from our code. After these changes the init function looks like this:

Please notice, that the init function takes as an argument the datepicker component – and from now on this is our only way to access this component. The rest of the code also requires some modifications – it’s necessary to change all references to the datepicker (from the variable me to me.datePicker). The entire code listing is presented below.

Here is example of usage;

and the result
multiselectable datepicker
Source code for this post can be found here

Extjs 4.1.1 – multiselectable datepicker as plugin