Extjs 4.1.1

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 – drag-and-drop between tables

TPodolak,

Extjs framework provides us with two helper classes responsible for performing drag-drop operation:

  • Ext.dd.DragZone

    • The most important element of this class is getDragData function, which provides data for drag operation.
    It is necessary for this method to return object with ddel property containing DOM element, from which draging operation was originated.

  • Ext.dd.DropZone

    • This class has two important methods. The first one is getTargetFromEvent which informs if drop operation should be performed. The other one is onNodeDrop which is responsible for actual drop operation.

Having covered the basics, let’s try to implement drag-drop operation. Let’s start from creating simple container with two tables.

In the next step we will create DragZone and DropZone.

As You cas see DragZone was created on the right table. I want to be able to drag only td elements, that is why function getDragData returns null, if drag operation was originated from other HTML element. Extjs will take care of showing approperiate animation, if drag-drop is available. I also overrode getRepairXY method, which is responsible for providing X and Y coordinates for animation, which is fired in case of invalid drop off. The code responsible for handling drop operation is a little bit more complicated. After creating a DropZone from left table, I ovverode getTargetFromEvent method, so as to drop could be performed only to td elements of table. What is more, using onNodeEnter and onNodeOut methods I changed target elements of the drop, to show user where given element will be placed. Actual drop is performed in onNodeDrop method, in my case I just replace HTML node form original one to dropped.
Here is a result:
drag-and-drop
Entire code listing looks like that:

Source code for this post can be found here

Extjs – drag-and-drop between tables

Extjs – Changing style of items in dropdownlist

TPodolak, ,

I’ve recently been asked to create ComboBox with custom styled drop-down list. Colors of items of drop-dow list should be picked based on values of record bounded to given item. After reading some post on Extjs forum, I decided to overwrite default template of drop-down list.

As You can see I decided to use XTemplate, which (to the contrary to Template) allows to call user defined function. Function getClass from XTemplate will be called for each element in ComboBox’s store. The result of this function will be inserted into class attribute of div element, which is resposible for displaying single item in drop-down list. Please notice, that in order to maintain ability to select items from drop-down list, it is necessary to specify x-boundlist-item class in template.
Here is example of usage

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

Extjs – Changing style of items in dropdownlist

Extjs 4.1.1 – how to fix row resize phenomena

TPodolak, ,

Recently I’ve encountered annoying problem with extjs grid. After hiding columns with long wrapped text, height of rows was dramatically increased. Here are some screens presenting this particular situation. Grid with all columns shown;
problembeforeshow
and grid with one column hidden
row resize
The code responsible for rendering this grid is shown below

After some digging, it turned out that Extjs hides columns by setting their width to 0px. In order to solve this problem and preverse text wrap in cells, I implemented small workaround. Let’s start from creating CSS class which disables word wrapping in grid cells.

Next, we have to start listening for two events

  • columnhide
  • columnshow

In handlers of these events, we have to modify tdCls property of hidden column – add noWrap class, if column is hidden and delete this class otherwise.

From now hiding and showing columns works fine
fixedAfterHide
Entire code listing is presented below

Extjs 4.1.1 – how to fix row resize phenomena

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