Popup window dancing issue

In my application, there was once an issue where in after continuous movement of mouse over a popup window, the mouse down and mouse up event is not triggered.

In such a case, even if the mouse has not been clicked, on mouse movement, the pop up window also moves along with it. This is the dancing popup issue. :) . This term has been coined by me. 

So what should you do in such a case?
This is what I did:

1. Check for the button of the mouse clicked
2. Check for the event: 

    window.event.button  
   

3. If the left button is clicked, then the value = 1
4. If right button is clicked, then the value = 3

Now this worked for me, only in IE 9 and below.

For chrome I checked the below value to be equal to 1:

 event.buttons  

Only if these values equaled 1, then the popup window was moved, i.e. the x and y coordinates along with top and left values were changed.

So together, we can frame the check in the following way:

 var mouseClickValue = (Util.isIE() ? window.event.button : evt.buttons);  
 if (mouseClickValue) {  
   // move the pop up window  
 }  

I will add the fix required for IE 11 and above, very soon. 
Watch this blog for more :)

Hope this fix helps!! Happy coding!!

EXTJS: Get response from store sync operation

EXTJS sync operation is usually used to synchronize the Store with its Proxy. This asks the Proxy to batch together any new, updated and deleted records in the store, updating the Store's internal representation of the records as each operation completes. [ref. EXTJS store sync() API]

The sync operations can happen over REST calls. In case of a REST call, if the sync operations fails, how to achieve the response? Here is the way:

 store.sync({  
   success: function(batch, operations){  
      Ext.msg.Alert("store sync successful");  
   },  
   failure: function(batch, operations){  
      var response = rec.operations[0].error.response;  
      var responseText = JSON.parse(response.responseText);  
      var errorMessage = responseText.message;  
   }  
 });  

Happy coding :)

EXTJS: sync operation multiple requests fired

Let me start with an example. Here is my sample model.

Ext.define('ExampleApp.model.Property', {
    extend: 'Ext.data.Model',
    idProperty: 'name',
    fields: [
        {name: 'name', type: 'string'},
        {name: 'value', type: 'string'}
    ],
    autoLoad: false,
    proxy: {
        type: 'rest',
        url: {sampleURL},
        batchActions: true, //batch all requests into one request
        reader: {
            type: 'json',
            rootProperty: ''
        },
        writer: {
            type: 'json',
            encode: false,
            writeAllFields: true,
            allowSingle: false //even if single object send it as an array
        }
    }
});

Here is my sync operation:

 var store = this.getExampleStore();  
 var newRecord = Ext.create('ExampleApp.model.Property');  
 var propertyName = rec.name;  
 var propertyValue = rec.value;  
 newRecord.set("name", propertyName);  
 newRecord.set("value", propertyValue);  
 store.add(newRecord);  
 store.sync({  
   success: function(batch, operations){  
      Ext.msg.Alert("store sync successful");  
   },  
   failure: function(batch, operations){  
      store.rejectChanges();  
   }  
 });  

To avoid the multiple requests for sync to be fired, here is the fix:

 batchActions: true 

This one config will not allow multiple requests to be fired. But all the new records added would be sent as a single request. But, what if you want only the last added record to be sent to the server. Consider this scenario: The record first added may have failed. You change the record data and add it to the store again. batchActions: true will send all the records as a batch. So all the previous records will also be sent.

 store.rejectChanges(); 

In the failure callback method of the sync operation, I called the above method, that removes all the records added till now. Hence only 1 record in the store remains to be sent to the server.

Happy coding :)

Debugging JSP

We all know how to do debugging in javascript. Add a break point and reload the page. When the control comes to the break point, the debugger starts and you can continue to debug your application from there on.

What about JSP??

It is very simple :)

Add this word: 

 debugger  

before the line from where you wish to start the debugging.
Open the developer toolbar, usually opens by pressing F12 in your browser.
Once the control reaches this point, the current loaded request and page (VMXXX) will open in the sources tab and you can start debugging in JSP.

Happy coding :)

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.