EXTJS: Disable row selection on grid

In a grid, there already is a selection model present. Grid panels use Ext.selection.RowModel by default.

But if there is a requirement to disable the selection model, here is what you can do.

 Ext.create('Ext.grid.Panel', {  
   renderTo: document.body,  
   store: userStore,  
   width: 400,  
   height: 200,  
   title: 'Application Users',  
   columns: [{  
     text: 'Name',  
     width: 100,  
     sortable: false,  
     hideable: false,  
     dataIndex: 'name'  
   }, {  
     text: 'Email Address',  
     width: 150,  
     dataIndex: 'email',  
     hidden: true  
   }],  
   listeners: {  
     beforeselect: function() {  
       return false;  
     }  
   }  
 });  

The below piece of code in the listener does the trick. It returns false because of which no action happens on click of any row.

 beforeselect: function() {  
   return false;  
 }  

Happy coding :)

EXTJS: Disable required object validation on load

For one of my applications, I have a combo box. The combo box contains a list of values. This should be present on save. 

So, to put it simply, I added allowBlank: false to the combobox.

But on load, the field is validated and since it is empty, then it is shown having an error. This is usually not a good experience for users.

This is what that can be done to fix the issue:

1. Add a label separator as * for the users to understand that this is a mandatory field. 


2. On save, check for the availability of the combo box value.

 if (this.getComboBoxObject().getValue() != null && this.getComboBoxObject().getValue() != "") {  
      // do required operation  
 } else {  
      this.getComboBoxObject().markInvalid("Missing required field(s)");  
      return;  
 }  

 return  

will prevent any further processing on the method.

On click of Save/Submit button in the page, 





this is how the combo box would be validated. The same logic can be applied to any object in the form.

Happy coding :).

EXTJS: ItemSelector to restrict selections

EXTJS has some wonderful features called MultiSelector and ItemSelector.
These selectors allow the user to select multiple values in a given list of values.

I had a requirement to restrict the number of selected values to 1.

EXT JS has a simple solution for this problem:

In the itemselector xtype, set

 maxSelections: 1  

This above line will help you set the number of values that can be selected in the selector. If the selected number of values does not match the maxSelections value, then validation will fail.