Extjs 4.1.1

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

Extjs 4.1.1 – multiselectable datepicker

TPodolak, , 2 Comments

Recently, I have been given a task to make extjs datepicker allowing for selection of multiple dates. Unfortunately afters hours of searching for some build-in function, it turned out that this kind of functionality is not supported by default. Finaly, I decided to extend datepicker by creating component called highlightableDatePicker. I started from creating a class which inhierits from Ext.picker.Date. First draft of class looked this way

In this class I created additional function highlightDates which is responsible for highlighting dates. Moreover, I added some additional config elements:

  • selectedDates – object keeping track of dates which should be selected
  • clsHighlightClass – css class defining selected cell style

The most important part of HighlightableDatepicker class is function highlightDates which is responsible for highlighting dates. The body of this method looks like this

As You can see, this function simply compares date in cell with dates stored in selectedDates. If there is a match, cell style is modified by adding extra CSS class into class attribute of cell (see addCls function of Extjs), otherwise CSS class responsible for highlighting is removed. Having defind highlightDates function,I also had to attach an event handler to select event, in order to modify collection of selected dates. This handler looks this way

The final step to make this control work is to attach event handlers and call highlightDates function during initialization of component.

Please, notice that highlightDates is called after component is rendered, because there is no rendered cells before that moment. Entire code listing is presented below

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

Extjs 4.1.1 – multiselectable datepicker

Extjs 4.1 – zmiana stylu konkretnej komórki w gridzie

TPodolak, ,

Witam Dzisiejszy post nie będzie związany z platformą .NET, lecz z javascriptowym frameworkiem Extjs w wersji 4.1. Jako, że ostatnio w pracy poświęcam dużo czasu na pisanie w wyżej wymienionej technologii postanowiłem zaprezentować, w jaki sposób zmienić styl konkretnej komórki w gridzie. Zacznijmy od przygotowania danych do wyświetlenia – zdefiniujmy zatem stora, który będzie przechowywał informacje mające zostać zaprezentowane na gridzie.

Następnie podepnijmy stora pod grida w wersji podstawowej – bez zmiany stylu konkretnych komórek.

W celu zmiany parametrów poszczególnych komórek grida posłużymy się tzw. rendererem. Renderer jest to funkcja, której zadaniem jest modyfikacją komórek w danej kolumnie grida. Dzięki rendererowi możemy nie tyko zmienić zawartość komórki, ale również przypisać jej osobny styl lub klasę CSS. Myślę, że renderer można porównać do conwertera znanego z technologii WPF. Funkcję renderera podłączymy pod ostatnią kolumnę. Kod po modyfikacjach będzie wyglądał w następujący sposób:

Zauważmy, że funkcja renderer przyjmuje kilka parametrów. Najważniejsze z nich to

  • value – wartość wyświetlona w komórce grida
  • metaData- obiekt dający nam dostęp do parametrów komórki (np. tdCls)
  • record – record grida

W moim przypadku na podstawie wartości wyświetlanej w komórkach kolumny “Change”,określam czy dana komórka powinna być czerwona czy zielona. Wygląd grida przed oraz po zastosowaniu renderera przedstawiają poniższe screeny
Before
zmiana stylu

Extjs 4.1 – zmiana stylu konkretnej komórki w gridzie