Grid

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:

Ext.define('CustomerModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id',  type: 'int'},
        { name: 'lastname', type: 'string' },
        {name: 'firstname',type:'string'}
    ],
    validations: [{type: 'presence', field: 'lastname', message:'Required field'}]
});

Ext.define('CustomerModel', {

extend: 'Ext.data.Model',

fields: [

{name: 'id', type: 'int'},

{ name: 'lastname', type: 'string' },

{name: 'firstname',type:'string'}

validations: [{type: 'presence', field: 'lastname', message:'Required field'}]

});

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;

validate: function(){
       var me = this, view = this.getView(),isValid = true;
       var columnLength = me.columns.length;
       me.getStore().each(function(record,idx){
           //remove existing validation errors
           for (var j = 0; j < columnLength; j++) {
               var cell = view.getCellByPosition({row: idx, column: j});
               cell.removeCls(me.clsInvalidField);
           }
           var validationResult = record.validate();
           if(!validationResult.isValid()){
               isValid= false;
               for(var i =0;i < validationResult.items.length;i++){
                   for (var j = 0; j < columnLength; j++) {
                       var cell = view.getCellByPosition({row: idx, column: j});
                       if(validationResult.items[i].field == me.columns[j].dataIndex){
                           cell.addCls("x-form-invalid-field");
                           cell.set({'data-errorqtip': validationResult.items[i].message});
                       }
                   }
               }
           }
       })
       return isValid;
   }

validate: function(){

var me = this, view = this.getView(),isValid = true;

var columnLength = me.columns.length;

me.getStore().each(function(record,idx){

//remove existing validation errors

for (var j = 0; j < columnLength; j++) {

var cell = view.getCellByPosition({row: idx, column: j});

cell.removeCls(me.clsInvalidField);

}

var validationResult = record.validate();

if(!validationResult.isValid()){

isValid= false;

for(var i =0;i < validationResult.items.length;i++){

for (var j = 0; j < columnLength; j++) {

var cell = view.getCellByPosition({row: idx, column: j});

if(validationResult.items[i].field == me.columns[j].dataIndex){

cell.addCls("x-form-invalid-field");

cell.set({'data-errorqtip': validationResult.items[i].message});

}

})

return isValid;

}

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;

Ext.define('ValidatableGrid', {
    grid:null,
    init: function (grid) {
        var me = this;
        me.grid = grid;
        me.grid.validate = me.validate;
    },

   validate: function(){
        var me = this, view = this.getView(),isValid = true;
        var columnLength = me.columns.length;
        me.getStore().each(function(record,idx){
            //remove existing validation errors
            for (var j = 0; j < columnLength; j++) {
                var cell = view.getCellByPosition({row: idx, column: j});
                cell.removeCls(me.clsInvalidField);
            }
            var validationResult = record.validate();
            if(!validationResult.isValid()){
                isValid= false;
                for(var i =0;i < validationResult.items.length;i++){
                    for (var j = 0; j < columnLength; j++) {
                        var cell = view.getCellByPosition({row: idx, column: j});
                        if(validationResult.items[i].field == me.columns[j].dataIndex){
                            cell.addCls("x-form-invalid-field");
                            cell.set({'data-errorqtip': validationResult.items[i].message});
                        }
                    }
                }
            }
        })
        return isValid;
    }
})

Ext.define('ValidatableGrid', {

grid:null,

init: function (grid) {

var me = this;

me.grid = grid;

me.grid.validate = me.validate;

validate: function(){

var me = this, view = this.getView(),isValid = true;

var columnLength = me.columns.length;

me.getStore().each(function(record,idx){

//remove existing validation errors

for (var j = 0; j < columnLength; j++) {

var cell = view.getCellByPosition({row: idx, column: j});

cell.removeCls(me.clsInvalidField);

}

var validationResult = record.validate();

if(!validationResult.isValid()){

isValid= false;

for(var i =0;i < validationResult.items.length;i++){

for (var j = 0; j < columnLength; j++) {

var cell = view.getCellByPosition({row: idx, column: j});

if(validationResult.items[i].field == me.columns[j].dataIndex){

cell.addCls("x-form-invalid-field");

cell.set({'data-errorqtip': validationResult.items[i].message});

}

})

return isValid;

}

})

here is example of usage;

Ext.QuickTips.init();

var store = Ext.create('Ext.data.Store', {
    model: 'CustomerModel'
});
store.add([{
    id: 1,
    firstname: 'John'
}, {
    id: 1,
    firstname: 'Mat'
}, {
    id: 1,
    firstname: 'Kate',
    lastname:  'Smith'
}, {
    id: 1,
    firstname: 'Richard',
    lastname:  'Smith'
}, {
    id: 1,
    firstname: 'Nick'
}]);

vGrid = Ext.create('Ext.grid.Panel', {
    store: store,
    plugins: [Ext.create('ValidatableGrid')],
    columns: [ { text: 'Id', dataIndex: 'id' },
               { text: 'First name', dataIndex: 'firstname' },
               { text: 'Last name', dataIndex: 'lastname' }]});

vGrid.validate();

Ext.QuickTips.init();

var store = Ext.create('Ext.data.Store', {

model: 'CustomerModel'

});

store.add([{

id: 1,

firstname: 'John'

}, {

id: 1,

firstname: 'Mat'

}, {

id: 1,

firstname: 'Kate',

lastname: 'Smith'

}, {

id: 1,

firstname: 'Richard',

lastname: 'Smith'

}, {

id: 1,

firstname: 'Nick'

}]);

vGrid = Ext.create('Ext.grid.Panel', {

store: store,

plugins: [Ext.create('ValidatableGrid')],

columns: [ { text: 'Id', dataIndex: 'id' },

{ text: 'First name', dataIndex: 'firstname' },

{ text: 'Last name', dataIndex: 'lastname' }]});

vGrid.validate();

and the result

Source code for this post can be found here

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.

Ext.create('Ext.data.Store', {
    storeId:'itemsStore',
    fields:['name', 'email', 'change'],
    data:{'items':[
        { 'name': 'LCD PLAYER',    "change":100  },
        { 'name': 'DVD PLAYER', "change":-20  },
        { 'name': 'CD PLAYER',   "change":23   },
        
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.data.Store', {

storeId:'itemsStore',

fields:['name', 'email', 'change'],

data:{'items':[

{ 'name': 'LCD PLAYER', "change":100 },

{ 'name': 'DVD PLAYER', "change":-20 },

{ 'name': 'CD PLAYER', "change":23 },

]},

proxy: {

type: 'memory',

reader: {

type: 'json',

root: 'items'

}

});

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

Ext.create('Ext.grid.Panel', {
    store: Ext.data.StoreManager.lookup('itemsStore'),
    columns: [
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Change', dataIndex: 'change'}
    ],
    height: 200,
    width: 400,
    forceFit:true,
    renderTo: Ext.getBody()
});

Ext.create('Ext.grid.Panel', {

store: Ext.data.StoreManager.lookup('itemsStore'),

columns: [

{ header: 'Name', dataIndex: 'name' },

{ header: 'Change', dataIndex: 'change'}

height: 200,

width: 400,

forceFit:true,

renderTo: Ext.getBody()

});

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:

Ext.create('Ext.grid.Panel', {
    store: Ext.data.StoreManager.lookup('itemsStore'),
    columns: [
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Change', dataIndex: 'change', renderer: function(value, metaData, record, row, col, store, gridView){
            if(value>0)
              metaData.tdCls = 'price-rise'
            else
              metaData.tdCls = 'price-fall'
                  
             return value;
        }}
    ],
    height: 200,
    width: 400,
    
    renderTo: Ext.getBody()
});

Ext.create('Ext.grid.Panel', {

store: Ext.data.StoreManager.lookup('itemsStore'),

columns: [

{ header: 'Name', dataIndex: 'name' },

{ header: 'Change', dataIndex: 'change', renderer: function(value, metaData, record, row, col, store, gridView){

if(value>0)

metaData.tdCls = 'price-rise'

else

metaData.tdCls = 'price-fall'

return value;

}}

height: 200,

width: 400,

renderTo: Ext.getBody()

});

.price-fall  {
    background-color: red !important;
    
}
.price-rise {
    background-color: #B0FFC5;
    color:green;
}

.price-fall {

background-color: red !important;

}

.price-rise {

background-color: #B0FFC5;

color:green;

}

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

.NET BLOG

.NET, C# blog

Extjs 4.1.1 – validatable grid

Extjs 4.1 – zmiana stylu konkretnej komórki w gridzie