Styling a Grid Panel Row based on column value in Extjs (Extended JavaScript)

Adding a style class to a particular row in the grid is quite easy.
You can use the viewConfig property of grid panel.
If you wish to style your rows differently based on different values of a particular record value, here is an example of how to achieve it.


    viewConfig: {
        //Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('Type');
            if (c == 'TYPE 1') {
                return 'childRow';
            } else if (c == 'TYPE 2') {
                return 'parentRow';
            }
        }
    },
   
    <style>
    .childRow{
        background-color: #C0C0C0;
    }

    .parentRow{
        background-color: white;
    }
    </style>

Display Progress Status using Ext.MessagesBox in extjs(Extended JavaScript)

You can show progress status using the Ext.MessageBox.
Such message boxes can be used to show processing of data at the backend.
The below code is an example of to display it. You can set the timeout as per the time you wish the user should wait.

Ext.MessageBox.show({
                       msg: 'Processing Data.. Please wait',
                       progressText: 'Loading...',
                       width:350,
                       wait:true,
                       waitConfig: {interval:250},
                       icon:'ext-mb-download'
                      
                });
                setTimeout(function(){
                   Ext.MessageBox.hide();
                }, 2000);

Styling the text of a column in the Grid in Extjs(Extended JavaScript Library)

If you want to style a particular column, say for example you want the text in a column to appear bold or you want it to color the text,the renderer function of the grid column can be used.
In the renderer function you can apply style to the value(text) of the column and return it.
Here is an example of how to do it :-

 {header: "Name", width:75, dataIndex: 'Name',align:'right',hideable:false, sortable: true,
  renderer: showBold}   
 
  function showBold(val, meta, record, rowIndex, colIndex, store){
       return '<span class= "bold-display"' + val + '</span>';      
  }
 
  Ofcourse you have the style defined in the styleClass
  <style>
    .bold-display{
        font-weight:bold;
    }
  </style>
 
  You can define certain conditions as well in the renderer function based on the requirement.

Open a Extjs Window with text area on click of image / button to save the long information or description

If you have rendered an image or button in column of the grid panel and you want to open a pop up in the form of extjs window onclick of  it.
The window contains an input text area which will allow the user to fill the data.
This text needs to be saved for the field associated with that column.
The following is the code which demonstrates the above mentioned description.




{header: "header", width:110, dataIndex: 'dataField',
                            xtype:'actioncolumn',
                              items: [{
                                 icon:'<image path>',
                                 style: {
                                      marginLeft: '5px'
                                 },
                                 handler: function(grid, rowIndex, colIndex) {
                                    var rec = grid.getStore().getAt(rowIndex);
                                    var descText = rec.get('dataField');
                                    openPopup(descText,rowIndex,rec);
                                 }
                              }]
                         },



       /*
        ** Open Window with text area
        */
        function openPopup(description,rowInd,record){
            var win = new Ext.Window({
                modal       : true,
                height      : 250,
                width       : 260,
                plain       : true,
                border      : false,
                resizable   : false,
                maximizable : false,
                draggable   : true,
                closable    : true,
                closeAction : 'destroy',
                title       : 'Title', 
                autoScroll  : true,
                buttonAlign : 'center',
                items: [{
                    xtype: 'textarea',
                    id :  'textAreaId',
                    value: description,
                    name: 'testing',
                    height: 184,
                    width: 248
                }],
                buttons: [{
                    text     : 'Submit',
                    onClick : function () {
                        // SAVE ACTION
                        try{
                            record.set('<reqd field from store>',Ext.getCmp('textAreaId').getValue());
                            win.destroy();
                        }catch(e){
                            win.destroy();
                        }
                    }                   
                }]
            }).show();

        }

Display checkboxes for selected rows using CheckBoxModel in Extjs(Extended javascript Library)

Using CheckBoxModel in Extjs , displays check boxes for all rows of a grid by default.
What if you wanted to disable or hide the check boxes for specific row(s)?

Well this can be done using the renderer function of Ext.selection.CheckboxModel.

   sm = new Ext.selection.CheckboxModel({
              
                checkOnly : true,
                renderer : function(val, meta, record, rowIndex, colIndex, store,view){
                        if( NOT REQUIRED CONDITION){   
                            return null;   
                        }else{
                            meta.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
                            return '<div class="' + Ext.baseCSSPrefix + 'grid-row-checker">&#160;</div>';
                        }  
                    }
   });

The above code will simply hide the checkboxes for the specific unwanted rows.

 

Tooltip not working for items in Extjs(Extented Javascript Library) ?

Did you ever face an issue that even when you define the Tooltip text for an item( image, button etc), the text simply doesn't work.

Well, the reason behind this is that you have forgotten the following line

Ext.tip.QuickTipManager.init();
You have to initialize the Ext.tip.QuickTipManager  before using the tooltip.

Upper and Lower limit for numeric fields as xtype in Extjs(Extended JavaScript Library)

Use of xtype as numberfield.

This code helps you with upper and lower limit values for the numeric fields enabling user to scroll through any range of numeric value

Numeric input values for this field can have upper and lower limits.

This can be set as follows:-

{header: "Quantity", width:70, dataIndex: 'Quantity', sortable: true,                    

                             editor: {

                                xtype:'numberfield',

                                minValue: 1,

                                maxValue: 100,

                                allowBlank:false

                             }

                         }

Extjs(Extended JavaScript Library) Column with sub-columns

Here’s another post which will help you categorize your columns. Given below is an example of discount and its sub types like: Percent discount and flat discount. This code can be used for many other sub divisions.

A single column can be divided into 2 sub-columns in extjs. A property having two modes of inputs can be divided into 2 columns , yet under one main column.

Here's the code :-

{

                             text : "Discount",

                             columns:[

                                         {   

                                                header: "%", width:40, dataIndex: 'discountPercent', sortable: true

                                         },

                                         {

                                             header: "Flat", width:55, dataIndex: 'flatDiscount', sortable: true

                                         }

                             ]

  }