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

Fixing missing semicolon issue using WebStorm

TPodolak, ,

Recently in the company I work for, we’ve been trying to improve Javascript code quality. After hooking up JSlint into our build script, it turned out that the most common issue with our code is missing semicolon at the end of statements. Fixing all warnings manually would be very boring task, that is why I started searching for alternative solution. Fortunatelly once again, WebStorm came for the rescue. As you probably know WebStorm has it’s own code inspection tool which indicates problems with code. However except that, this tool can also fix these problems automatically. Here is a little demonstration. Let us start with simple code.

In the listing above, there are two lines with missing semicolon (in function getView). Let fix them using Webstorm code inspection tool.
First of all, we have to make sure that appropriate inspection options are selected. In order to do that, let’s choose “Settings” from menu “File”. In the opened window, go to “Settings” and select options presented in the picture below.
options
In the next step, from menu “Code” choose “Inspect code”
InspectCode
In the opened window, we can change inspection profile or inspection scope, but usually we can go with default settings
InspectCodeWindow
After inspection is done, at the bottom of the screen you will see results
InspectionResult
Now, we can quickly fix them by using context menu and clicking “Terminate statement”
InspectionResultMenu
Here is the result of fixing operation
missing semicolon

Fixing missing semicolon issue using WebStorm

Fluent Nhibernate – automappings

TPodolak, , , 6 Comments

1. Introduction

Writing mappings for models in large application is quite boring task. Fortunatelly, Fluent NHibernate provides possibility for automatic mapping creation – so called automappings.

2. Creating database and model

In order to show you, how to configure automappings in Fluent NHibernate, let’s create simple database along with model classes. The database structure is presented in the picture below.
DBDiagram
Model classes which represent database tables look this way

3. Automappings configuration

Having our database and models prepared, now we can create and configure SessionFactory to use automappings.

As You can see I used the static AutoMap.AssemblyOf method. This method takes a generic type parameter from which Fluent NHibernate can deduce which assembly to look in for mappable entities. From now all classes defined in the assemlby of Project are mapped using build-in convention.

4. Mapping only specified classes

Mapping all classes from specyfic assembly may not be very useful. That is why, we need to “tell” Automapper which classes should be mapped. It can be achieved by creating custom configuration class which implements IAutomappingConfiguration interface or which is subclass of DefaultAutomappingConfiguration. IAutomappingConfiguration interface has quite a lot of functions, that is why I decided to craete class which inherits from DefaultAutomappingConfiguration and override only one method – ShouldMap

As You can see by overriding ShouldMap function,I specified that only classes which inherit from ModelBase class should be mapped. To use our new configuration, we need to pass an instance of it to AutoMap setup

5. Defining custom conventions

It is rather obvious that default automapping conventions may not come along with our database naming conventions. Fortunately we can create custom conventions(which override default ones), and pass them to AutoMap configuration. Here are examples of conventions I use IClassConvention – gives us access to properties and functions which allow us to change a default table name format for our entities.

IIdConvention is used for altering default identity conventions.

IPropertyConvention – allows us to modify properties mappings (lazy load, nullability,length etc)

IReferenceConvention – allows us to modify entities relationship convention

IHasManyConvention – allow us to modify default has-many relationship convention

In order to use new conventions we need to pass them into AutoMap configuration.

6. Overriding mappings

Sometimes it is necessary to slightly modify entity mapping. It can be achieved by creating class which implements IAutoMappingOverride interface

Override method gives us access to all actions known from fluent mappings. After creating class map, we have to call function UseOverridesFromAssemblyOf in our automapping configuration

7. It works

Here just couple of screens from NHibernateProfiler with basic queries
InsertIntoTask
InsertIntoUser
InsertIntoProject
SelectFromTask
Source code for this post can be found here

Fluent Nhibernate – automappings

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

StringBuilder – removing trailing characters

TPodolak, ,

Today just quick tip about StringBuilder
I used to remove last character(s) from StringBuilder using Remove method.

However, recently I’ve came accross even simpler solution. You just need to lessen the Length property of StringBuilder, in order to get rid of last characters

StringBuilder – removing trailing characters