Extjs 5.1.0 Checkbox of GridPanel deselect event not working. checkboxmodel deselect not working

I think, this is a bug in Extjs 5.1.0 for CheckboxModel selectionchange doesn't fire when unselect rows.

Add below code where you define selModel:

selectWithEventMulti: function(record, e, isSelected) {
            var me = this;

            if (!e.shiftKey && !e.ctrlKey && e.getTarget(me.checkSelector)) {
                if (isSelected) {
                    me.doDeselect(record); // Second param here is suppress event, not "keep selection"
                } else {
                    me.doSelect(record, true);
                }
            } else {
                me.callParent([record, e, isSelected]);
            }
        },

After adding this above code, your selModel should be like this:

this.selModel = new Ext.selection.CheckboxModel( {
         allowDeselect: true,
         checkOnly: false,
         pruneRemoved: false,
         ignoreRightMouseSelection: true,
         injectCheckbox: 0,

    // ** Newly added code to fix bug
    selectWithEventMulti: function(record, e, isSelected) {
            var me = this;

            if (!e.shiftKey && !e.ctrlKey && e.getTarget(me.checkSelector)) {
                if (isSelected) {
                    me.doDeselect(record); // Second param here is suppress event, not "keep selection"
                } else {
                    me.doSelect(record, true);
                }
            } else {
                me.callParent([record, e, isSelected]);
            }
        },
   
// *************************
        showHeaderCheckbox: true,
         listeners: {
            deselect: function( obj, record, index, eOpts ) {
               alert("check box deselect");
            },
            select: function( obj, record, index, eOpts ) {
               alert("check box select");
            }
         },

Reference: http://www.sencha.com/forum/showthread.php?295764

Extjs 5.1 GridPanel plugins: 'gridfilters' and listeners example

Example contains multiSelect, plugins, checkchange and grid panel listeners.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Extjs 5.1 Grid Panel</title>
    <link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
    <script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>
    <script>
Ext.onReady(function(){
 console.log("I am ready now");

 Ext.define('Student',{
 extend: 'Ext.data.Model',
 fields: ['id','name','mobile']
 });

    var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
autoLoad: true,
data:[
{status: true, id:'1', name:'Binod', mobile:'0000059257'},
{status: false, id:'5', name:'Ishan', mobile:'0002887325'},
{status: true, id:'3', name:'Akshu', mobile:'00351070277'},
{status: false, id:'4', name:'Sanjay', mobile:'999988885'},
{status: true, id:'2', name:'Zambia', mobile:'8888999997'}
]

});


Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 200,
multiSelect: true,
title: 'Student Records',
plugins: 'gridfilters',
listeners:{
 selectionchange: 'rowclickedevent',
 rowclick: 'rowevent'
},
columns:[
//{xtype: 'checkcolumn', listeners :{check: 'checkchangeEvent'},text: 'Status', filter: 'string', dataIndex:'status', width: 50},
{
xtype: 'checkcolumn',
text: 'Status',
dataIndex: 'status',
flex: 1,
sortable: false,
listeners:{
checkchange:function(cc,ix,isChecked){
alert("Check box is clicked and value is : "+isChecked);
}
}
     },
{text: 'Roll Number', filter: 'string', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1}
],



dockedItems: [{
        xtype: 'pagingtoolbar',
        store: studentStore,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }],

checkchangeEvent : function(  cc,ix,isChecked ){
 alert("Check box is clicked and value is : "+isChecked);
},

rowevent : function(c, record, tr, rowIndex, e, eOpts){
   alert("row click number :"+record.length);
},

rowclickedevent : function(c, selected, eOpts){
 alert("selectionchange selected number :"+selected.length);
}

});


});

</script>
</head>
</html>

ExtJs 5.1 GridPanel Plugin gridfilters Example Getting Start

Here we will use plugins: 'gridfilters', for adding filter functionality in GridPanel.
This plugins: 'gridfilters', is new plugin has been added in ExtJS 5.1 for filter to reduce a lot of codes.

Use this plugins: 'gridfilters', in create/define during Ext.grid.Panel and then add filter: 'string', in each column to get this filter functionality.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Extjs 5.1 Grid Panel</title>
    <link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
    <script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>
    <script>
Ext.onReady(function(){
 console.log("I am ready now");

 Ext.define('Student',{
 extend: 'Ext.data.Model',
 fields: ['id','name','mobile']
 });

    var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
autoLoad: true,
data:[
{status: true, id:'1', name:'Binod', mobile:'0000059257'},
{status: false, id:'5', name:'Ishan', mobile:'0002887325'},
{status: true, id:'3', name:'Akshu', mobile:'00351070277'},
{status: false, id:'4', name:'Sanjay', mobile:'999988885'},
{status: true, id:'2', name:'Zambia', mobile:'8888999997'}
]

});


Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 200,
title: 'Student Records',
plugins: 'gridfilters',
columns:[
{xtype: 'checkcolumn', text: 'Status', filter: 'string', dataIndex:'status', width: 50},
{text: 'Roll Number', filter: 'string', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1}
],



dockedItems: [{
        xtype: 'pagingtoolbar',
        store: studentStore,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }]

});


});

</script>
</head>
</html>

Now if you click on any column, you will get filter functionality.

ExtJs 5.1 GridPanel Basic Example Getting Start

Found some changed while migrating my product from Extjs 4 5o Extjs 5.1, so thought to share with you all.
Here below is very basic example of GridPanel:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Extjs 5.1 Grid Panel</title>
    <link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
    <script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>
    <script>
Ext.onReady(function(){
 console.log("I am ready now");

 Ext.define('Student',{
 extend: 'Ext.data.Model',
 fields: ['id','name','mobile']
 });

    var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
autoLoad: true,
data:[
{status: true, id:'1', name:'Binod', mobile:'0000059257'},
{status: false, id:'5', name:'Ishan', mobile:'0002887325'},
{status: true, id:'3', name:'Akshu', mobile:'00351070277'},
{status: false, id:'4', name:'Sanjay', mobile:'999988885'},
{status: true, id:'2', name:'Zambia', mobile:'8888999997'}
]

});


Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 200,
title: 'Student Records',
columns:[
{xtype: 'checkcolumn', text: 'Status', dataIndex:'status', width: 50},
{text: 'Roll Number', dataIndex:'id', width: 100},
{text: 'Name' , dataIndex:'name', width: 100},
{text: 'Mobile' , dataIndex:'mobile', flex: 1}
],

dockedItems: [{
        xtype: 'pagingtoolbar',
        store: studentStore,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }]



});


});

</script>
</head>
</html>

Here dockedItems has been used for pagination.

GWT app engine Missing required argument 'module[s]'

If you get this exception while deploying your project into google app engine.
Then:
http://stackoverflow.com/questions/8628429/google-app-engine-missing-required-argument-modules

When creating a new Google Web Application project, there are 2 options, Google Web Toolkit and Google App Engine which can be selected. I was selecting both so the project which was being created was a GWT project. So while running it was expecting a gwt module and related configuration file.

The solution was to not select "Google Web Toolkit" when creating a new Google Web Application Project.

To disable Google Web Toolkit for your created project, just do like this: 1. select project, right click, and select "Property" 2. Toggle down "Google", select "Web Toolkit" tab, and uncheck "Use Google Web Toolkit". 3. Delete your project in Run configuration. And run again. You will find it never asks for "modules" anymore.

Liferay admin detection, community admin, Organization admin

If you see any portlet, it used to have four button 1. Preference 2. Maximise 3. Minimise 4. Close.
Only those user who has admin privilege, can see those button or will have able to change preference.

If user has community admin/owner, organization admin/owner, they can also see those button on their respective page. So, there are many combination like
user will not have admin privilege but have community admin then which kind of button they can see.

Now, if you have to developer one button and condition is that only admin(super admin, comminity admin, organization admin) can see that button, then before showing
that button, you have to whether logged in user has admin facility or not.

Liferay has given one API by which you can easily find out, use below code:

public boolean isUserLiferayAdmin(){
      PortletContextImpl portletContext = (PortletContextImpl)context;
      ThemeDisplay themeDisplay= (ThemeDisplay)portletContext.getRequest().getAttribute(WebKeys.THEME_DISPLAY);
      PermissionChecker permissionChecker = themeDisplay.getPermissionChecker();
      Long groupId = themeDisplay.getLayout().getGroupId();
      boolean isAnyLiferayAdmin = false;
       try {
   isAnyLiferayAdmin = GroupPermissionUtil.contains(permissionChecker,groupId, ActionKeys.MANAGE_LAYOUTS);
    }catch (Exception e1) {
     isAnyLiferayAdmin = false;
    }
      return isAnyLiferayAdmin;
   }


you can write this method in BaseComponent.java, so all the user defined portlet can user this method.

Other way is also there to determine admin previlages:

try{
    List roles = user.getRoles();
    String isAdmin  = "false";
    for(Role role:roles){
    if(role.getName().equals("Administrator")) {isAdmin = "true";break;}
    }
   session.setAttribute("USER_GROUP",isAdmin);
  }catch(Exception e){
   log.error("Not able to fetch Liferay user group info");
  }

java.lang.NullPointerException at javax.ws.rs.core.MediaType.valueOf(MediaType.java:119)

Very small post, actually I got this error (java.lang.NullPointerException at javax.ws.rs.core.MediaType.valueOf(MediaType.java:119)) while hitting REST web service. I searched a lot and spent all most one day but could not get reason behind it.

Finally one got solution, so thought to share with you, it may be helpful some time.

Jersey uses the thread context class loader to load such classes. Perhaps you can do the following:

Thread .currentThread ().setContextClassLoader(this.getClass().getClassLoader()); 

Put the above line code, just before you hit the REST.

For Example:
Thread .currentThread ().setContextClassLoader(this.getClass().getClassLoader());
webResource = client.resource("your REST server URL");
client.addFilter(new HTTPBasicAuthFilter("serverUserName", "serverPassword"));

if (response.getStatus() != 200) {
   throw new RuntimeException("Failed : HTTP error code : " + response.getStatus());
}

String output = response.getEntity(String.class);

If you some other solution, then please share.

Thanks.

Binod Suman