Sunday, March 15, 2015

Java Difference between NoClassDefFoundError VS ClassNotFoundException in Java

** Difference between NoClassDefFoundError VS ClassNotFoundException in Java **

Both exception due to missing classes in classpath.

First we will see : NoClassDefFoundError 

Class Car{

}

Class Demo
{
  public static void main(String[] args){
   Car car = new Car();
 }

}

e:\Binod> javac Demo.java
It will create Demo.class and Car.class
Now you go and delete Car.class
Now
e:\Binod>java Demo
You will get below exception:
Exception in thread "main" java.lang.NoClassDefFoundError: Car
        at Demo2.main(Demo.java:9)
Caused by: java.lang.ClassNotFoundException: Car
        at java.net.URLClassLoader$1.run(URLClassLoader.java:366)
        at java.net.URLClassLoader$1.run(URLClassLoader.java:355)


*******  Now we will see ClassNotFoundException ********

ClassNotFoundException is a checked Exception derived directly from java.lang.Exception class and you need to provide explicit

handling for it while NoClassDefFoundError is an Error derived from LinkageError.

public class Demo {
  public static void main(String[] args) {
try {
Class check = Class.forName("Car");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
}

Make sure Car.class should not be there in classpath.
e:\Binod> javac Demo.java
It will create Demo.class only
e:\Binod>java Demo
This time, you will get below exception:

java.lang.ClassNotFoundException: Car
        at java.net.URLClassLoader$1.run(URLClassLoader.java:366)
        at java.net.URLClassLoader$1.run(URLClassLoader.java:355)
        at java.security.AccessController.doPrivileged(Native Method)
        at java.net.URLClassLoader.findClass(URLClassLoader.java:354)

NOTE:
ClassNotFoundException comes in java if we try to load a class at run-time using with
Class.forName() or
ClassLoader.loadClass() or
ClassLoader.findSystemClass() method
and requested class is not available in Java.


Wednesday, February 25, 2015

ExtJS Editable grid panel, extjs - Altering data in Ext.data.Model, Ext JS simple grid example with editable column, ExtJS Grid Edit Tutorial: Edit Data with an Ext JS Grid, ExtJs Simple Grid - Edit Column


Very basic example of ExtJS 5.1 Grid Panel with editable column functionality.
For making column as editable, add two things:

1. Add below plugin to your grid panel
plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit : 1
            })
        ],

2. In column definition add below configuration:

editor: 'textfield'

Here is full running example:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ExtJS 5 Grid Example</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>


<style>
.x-grid-item-selected .x-grid-cell {
       background-color: #B3D4FF !important;
       color :#000000 !important;
     }

</style>

    <script>
Ext.onReady(function(){

 Ext.define('Student',{
 extend: 'Ext.data.Model',
 fields:[
  {name: 'id'},
  {name: 'name'},
  {name: 'mobile'},
  {name: 'TestColumn',
      convert : function(value, record){
    return record.get('name')+" CHECK";
}
 
  }
 ]
 });

    var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
     pageSize: 7,
data:[
{id:'1', name:'Binod', mobile:'999999999'},
{id:'5', name:'Ishan', mobile:'898989898998'},
{id:'3', name:'Akshu', mobile:'1234123499'},
{id:'4', name:'Sanjay 4', mobile:'999988885'},
{id:'5', name:'Sanjay 5', mobile:'999988885'},
{id:'6', name:'Sanjay 6', mobile:'999988885'},
{id:'7', name:'Sanjay 7', mobile:'999988885'},
{id:'8', name:'Sanjay 8', mobile:'999988885'},
{id:'9', name:'Sanjay 9', mobile:'999988885'},
{id:'20', name:'Sanjay 20', mobile:'999988885'},
{id:'21', name:'Sanjay 21', mobile:'999988885'},
{id:'22', name:'Sanjay 22', mobile:'999988885'},
{id:'23', name:'Sanjay 23', mobile:'999988885'},
{id:'24', name:'Zambia 24', mobile:'8888999997'}
]

});

Ext.create('bin.com.ResultGrid',{
renderTo: Ext.getBody(),
store: studentStore

});

});


Ext.define('bin.com.ResultGrid',{
extend: 'Ext.grid.Panel',
width: 600,
height: 200,
title: 'Student Records',

plugins: ['gridfilters',
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit : 1
            })
        ],
columns:[
{text: 'Roll Number', filter: 'string', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', editor: 'textfield', flex: 1},
{text: 'Test Column' , filter: 'string',dataIndex:'TestColumn', flex: 1},

],

initComponent: function () {
 this.selModel = new Ext.selection.CheckboxModel( {
 });
 this.callParent(arguments);
}

});
</script>
</head>
</html>

Friday, February 13, 2015

ExtJs 5.1 Paging tool not showing correct data when its load, Ext js Pagination issue in 5.1, ExtJs 5.1 Pagination tutorial, Ext JS pagingtoolbar not working during loading time


ExtJS 5.1 has one bug that when you load grid panel then first time it will not show correct paging number in paging tool. Once you do page next then it starts working.
During page load time it always show Page 1 of 1.

First Pagination code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ExtJS 5.1.0 Grid Pagination Example</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(){

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

var mydata = {
"success":true,
"totalCount": 24,
"rows":[
{status: true, id:1, name:'Binod', mobile:'0000099257'},
{status: true, id:2, name:'Binod 2', mobile:'0000099257'},
{status: true, id:3, name:'Akshu', mobile:'12345070277'},
{status: false, id:4, name:'Sanjay 4', mobile:'999988885'},
{status: false, id:5, name:'Sanjay 5', mobile:'999988885'},
{status: false, id:6, name:'Sanjay 6', mobile:'999988885'},
{status: false, id:7, name:'Sanjay 7', mobile:'999988885'},
{status: false, id:8, name:'Sanjay 8', mobile:'999988885'},
{status: false, id:9, name:'Sanjay 9', mobile:'999988885'},
{status: false, id:10, name:'Sanjay 10', mobile:'999988885'},
{status: false, id:11, name:'Sanjay 11', mobile:'999988885'},
{status: false, id:12, name:'Sanjay 12', mobile:'999988885'},
{status: false, id:13, name:'Sanjay 13 ', mobile:'999988885'},
{status: false, id:14, name:'Sanjay 14', mobile:'999988885'},
{status: false, id:15, name:'Sanjay 15', mobile:'999988885'},
{status: false, id:16, name:'Sanjay 16', mobile:'999988885'},
{status: false, id:17, name:'Sanjay 17', mobile:'999988885'},
{status: false, id:18, name:'Sanjay 18', mobile:'999988885'},
{status: false, id:19, name:'Sanjay 19', mobile:'999988885'},
{status: false, id:20, name:'Sanjay 20', mobile:'999988885'},
{status: false, id:21, name:'Sanjay 21', mobile:'999988885'},
{status: false, id:22, name:'Sanjay 22', mobile:'999988885'},
{status: false, id:23, name:'Sanjay 23', mobile:'999988885'},
{status: true, id:24, name:'Zambia 24', mobile:'8888999997'}
]
}



var storeProxy = {
                  type: 'memory',
 enablePaging : true,
                  data: mydata
            };

storeProxy.reader = {
           type: 'json',
           totalProperty: 'totalCount',
           rootProperty: 'rows',
           successProperty: 'success'
       };

 
   var studentStore = Ext.create('Ext.data.Store',{
 model: 'Student',
 autoLoad: true,
 remoteSort: true,
 remoteFilter : true,
 pageSize: 10,
 proxy: storeProxy

});

var dockedPagingToolbar = [];
          dockedPagingToolbar = [{
          xtype: 'pagingtoolbar',
          store: studentStore,
  afterPageText:'of '+Math.ceil( studentStore.proxy.data.rows.length /  studentStore.pageSize) ,
          dock: 'bottom',
          displayInfo: true
    }];
           

Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 250,
height: 290,
multiSelect: true,
title: 'Student Records',
plugins: 'gridfilters',
    dockedItems : dockedPagingToolbar,

columns:[
{xtype: 'checkcolumn', text: 'Status', filter: 'string', dataIndex:'status', width: 50},
{text: 'Roll Number', filter: 'numeric', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1}
]
});

});

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



Fix bug:

var dockedPagingToolbar = [];
          dockedPagingToolbar = [{
          xtype: 'pagingtoolbar',
          store: studentStore,
afterPageText:'of '+Math.ceil( studentStore.proxy.data.rows.length /  studentStore.pageSize) ,
          dock: 'bottom',
          displayInfo: true
    }];



Thursday, February 12, 2015

ExtJS 5.1 Paging Tool bar example, Pagination for Grid, Ext.PagingToolbar bug in 'change' event, Bug in PagingToolbar, Extjs 5 grid binding after page change, Bug when you enter undefined page number


Here I am going to show one very basic example for Pagination (Paging Tool Bar), along with one very basic issue fixed.

Bug is there in Extjs 5.1 that if you go last page of your grid and enter some page number that is not exist then page number does not refresh to last page number.

First code Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ExtJS 5.1.0 Grid Pagination Example</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>

<style>
.x-grid-item-selected .x-grid-cell {
       background-color: #B3D4FF !important;
       color :#000000 !important;
     }

</style>


    <script>
Ext.onReady(function(){

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

var mydata = {
"success":true,
"totalCount": 24,
"rows":[
{status: true, id:1, name:'Binod', mobile:'0000099257'},
{status: true, id:2, name:'Binod 2', mobile:'0000099257'},
{status: true, id:3, name:'Akshu', mobile:'12345070277'},
{status: false, id:4, name:'Sanjay 4', mobile:'999988885'},
{status: false, id:5, name:'Sanjay 5', mobile:'999988885'},
{status: false, id:6, name:'Sanjay 6', mobile:'999988885'},
{status: false, id:7, name:'Sanjay 7', mobile:'999988885'},
{status: false, id:8, name:'Sanjay 8', mobile:'999988885'},
{status: false, id:9, name:'Sanjay 9', mobile:'999988885'},
{status: false, id:10, name:'Sanjay 10', mobile:'999988885'},
{status: false, id:11, name:'Sanjay 11', mobile:'999988885'},
{status: false, id:12, name:'Sanjay 12', mobile:'999988885'},
{status: false, id:13, name:'Sanjay 13 ', mobile:'999988885'},
{status: false, id:14, name:'Sanjay 14', mobile:'999988885'},
{status: false, id:15, name:'Sanjay 15', mobile:'999988885'},
{status: false, id:16, name:'Sanjay 16', mobile:'999988885'},
{status: false, id:17, name:'Sanjay 17', mobile:'999988885'},
{status: false, id:18, name:'Sanjay 18', mobile:'999988885'},
{status: false, id:19, name:'Sanjay 19', mobile:'999988885'},
{status: false, id:20, name:'Sanjay 20', mobile:'999988885'},
{status: false, id:21, name:'Sanjay 21', mobile:'999988885'},
{status: false, id:22, name:'Sanjay 22', mobile:'999988885'},
{status: false, id:23, name:'Sanjay 23', mobile:'999988885'},
{status: true, id:24, name:'Zambia 24', mobile:'8888999997'}
]
}



var storeProxy = {
                 type: 'memory',
 enablePaging : true,
                  data: mydata
            };

  storeProxy.reader = {
           type: 'json',
           totalProperty: 'totalCount',
           rootProperty: 'rows',
           successProperty: 'success'
       };

 
   var studentStore = Ext.create('Ext.data.Store',{
 model: 'Student',
 autoLoad: true,
 remoteSort: true,
 remoteFilter : true,
 pageSize: 10,
 proxy: storeProxy

});

var dockedPagingToolbar = [];
          dockedPagingToolbar = [{
          xtype: 'pagingtoolbar',
          store: studentStore,
          dock: 'bottom',
          displayInfo: true,
  readPageFromInput : function(pageData){
    var inputItem = this.getInputItem(),
    pageNum = false,
    v;
                    if (inputItem) {
    v = inputItem.getValue();
    pageNum = parseInt(v, 10);
   if(pageNum > pageData.pageCount){
    inputItem.setValue(pageData.pageCount);
    }
    if (!v || isNaN(pageNum)) {
    inputItem.setValue(pageData.currentPage);
    return false;
    }
    }
    return pageNum;
    }
    }];
           

Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 250,
height: 290,
multiSelect: true,
title: 'Student Records',
plugins: 'gridfilters',
    dockedItems : dockedPagingToolbar,

columns:[
{xtype: 'checkcolumn', text: 'Status', filter: 'string', dataIndex:'status', width: 50},
{text: 'Roll Number', filter: 'numeric', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1}
]
});

});

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

Solution of that bug:
You have to override the paging.js  readPageFromInput method to add fix of that bug. Please see the bold method in above code.





Extjs 5.1 ContextMenu Example, Menu not hiding if menu item is never focused, Context Menu issue, Right click menu not closing after clicking on other row


Very basic example with running code for ContextMenu with menu action on ExtJS 5.1.0
Along with one workaround solution for a bug that is there in Extjs 5.1. Bug is:
If you right click on any row then you will get context menu, now if you click on any other row that context menu does not go off, still showing.

First Code Example for Context Menu in ExtJS 5.1.0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ExtJS 5 Context Menu</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>

<style>
.x-grid-item-selected .x-grid-cell {
       background-color: #B3D4FF !important;
       color :#000000 !important;
     }

</style>

    <script>
var resultGrid = null;
Ext.onReady(function(){

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

    var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
 pageSize: 7,
data:[
{id:'1', name:'Binod', mobile:'9900999000'},
{id:'5', name:'Ben', mobile:'9902899999000'},
{id:'3', name:'Sergei', mobile:'903599999000'},
{id:'4', name:'Steve 4', mobile:'999988885'},
{id:'5', name:'Adam 5', mobile:'999988885'},
{id:'6', name:'Matt 6', mobile:'999988885'},
{id:'7', name:'Huge 7', mobile:'999988885'},
{id:'8', name:'McDonald 8', mobile:'999988885'},
{id:'9', name:'Prasad', mobile:'999988885'},
{id:'10', name:'Pramod', mobile:'999988885'},
{id:'11', name:'Arnab', mobile:'999988885'},
{id:'12', name:'Soumya', mobile:'999988885'}
]

});



this.resultGrid = Ext.create('bin.com.ResultGrid',{
renderTo: Ext.getBody(),
store: studentStore,
listeners: {
        itemcontextmenu: 'forContextMenu'
}

});

});
var showRoll = function(){
 var allSelectedRecord = resultGrid.getView().selModel.getSelection();
      alert("Roll : "+allSelectedRecord[0].get('id'));
}

var showSelectedRecord =  function(){
var allSelectedRecord = resultGrid.getView().selModel.getSelection();
alert("Name : "+allSelectedRecord[0].get('name')+"\n"+"Mobile :"+allSelectedRecord[0].get('mobile'));
}



var resultGrid = Ext.define('bin.com.ResultGrid',{
extend: 'Ext.grid.Panel',


width: 400,
height: 200,
title: 'Student Records',
plugins: 'gridfilters',

columns:[
{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}
  ],
 
   forContextMenu : function(view, record, node, index, e) {
      e.stopEvent();
 gridContextMenu.showAt(e.getXY());
      return false;
   },
 
 

initComponent: function () {
 this.selModel = new Ext.selection.CheckboxModel( {
 });
 this.callParent(arguments);
}




});



var gridContextMenu = Ext.create('Ext.menu.Menu', {
   margin: '0 0 10 0',
        items: [{
 text: 'Show Details',
       handler : showSelectedRecord
  },
{
 text: 'Show Roll',
       handler : showRoll
}],
listeners: {
             mouseleave: function() {
                gridContextMenu.hide();
            }
        }
    });


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

Sunday, February 1, 2015

Java BigInteger Example How to use BigInteger Factorial of large data Convert int to BigInteger and BigInteger to int

BigInteger:
All most all number data type in Java has some limit but what you will do if you have to do some calculation on big data like calculate factorial of 100 or 500 :)

There is no theoretical limit. The BigInteger class allocates as much memory as it needs to hold all the bits of data it is asked to hold.

If you are working with values that cannot fit into a long or a double then you will need to use a reference type like BigInteger.

It does not support addition by + like other number datatype in java. For that addition you have to call add() method.


You can use bigInteger for int, long, double etc. Please check this document link.

Convert from int to BigInteger

BigInteger newdata = BigInteger.valueOf(20);

Convert from BigInteger to int
int intdata = newdata.intMax.intValue());  

Factorial example for big data:


import java.util.Date;
import static java.lang.System.out;  
import java.math.BigInteger;


public class BigFactorial {


 public static void main(String[] args) {
BigFactorial heck = new BigFactorial();
System.out.println(heck.fact(BigInteger.valueOf(500)));
}

private BigInteger fact(BigInteger n){
   if(n==BigInteger.valueOf(0) || n==BigInteger.valueOf(1) )return BigInteger.valueOf(1);
   else{
return n.multiply(fact(n.subtract(BigInteger.valueOf(1))));
     }
 }


}


Friday, January 30, 2015

Extjs 5.1.0 how to Change grid panel row select color by cls. Ext Js 5 gridPanel selected row color, ExtJS 5.x Gridpanel Example with CheckboxModel

In Extjs 5.1 this below is CLS class for selected row in GridPanel
.x-grid-item-selected .x-grid-cell

You can override this cls for your customization for row selected cls.

Full Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ExtJS 5 Grid Example</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>


<style>
.x-grid-item-selected .x-grid-cell {
       background-color: #B3D4FF !important;
       color :#000000 !important;
     }

</style>

    <script>
Ext.onReady(function(){

 Ext.define('Student',{
 extend: 'Ext.data.Model',
 fields:[
  {name: 'id'},
  {name: 'name'},
  {name: 'mobile'},
  {name: 'TestColumn',
      convert : function(value, record){
    return record.get('name')+" CHECK";
}
 
  }
 ]
 });

    var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
 pageSize: 7,
data:[
{id:'1', name:'Binod', mobile:'99999999999'},
{id:'5', name:'Ishan', mobile:'99898989898'},
{id:'3', name:'Akshu', mobile:'99999999999'},
{id:'4', name:'Sanjay 4', mobile:'999988885'},
{id:'5', name:'Sanjay 5', mobile:'999988885'},
{id:'6', name:'Sanjay 6', mobile:'999988885'},
{id:'7', name:'Sanjay 7', mobile:'999988885'},
{id:'8', name:'Sanjay 8', mobile:'999988885'},
{id:'9', name:'Sanjay 9', mobile:'999988885'},
{id:'10', name:'Sanjay 10', mobile:'999988885'},
{id:'11', name:'Sanjay 11', mobile:'999988885'},
{id:'12', name:'Sanjay 12', mobile:'999988885'},
{id:'13', name:'Sanjay 13 ', mobile:'999988885'},
{id:'14', name:'Sanjay 14', mobile:'999988885'},
{id:'15', name:'Sanjay 15', mobile:'999988885'},
{id:'16', name:'Sanjay 16', mobile:'999988885'},
{id:'17', name:'Sanjay 17', mobile:'999988885'},
{id:'18', name:'Sanjay 18', mobile:'999988885'},
{id:'19', name:'Sanjay 19', mobile:'999988885'},
{id:'20', name:'Sanjay 20', mobile:'999988885'},
{id:'21', name:'Sanjay 21', mobile:'999988885'},
{id:'22', name:'Sanjay 22', mobile:'999988885'},
{id:'23', name:'Sanjay 23', mobile:'999988885'},
{id:'24', name:'Zambia 24', mobile:'8888999997'}
]

});

Ext.create('bin.com.ResultGrid',{
renderTo: Ext.getBody(),
store: studentStore

});

});


Ext.define('bin.com.ResultGrid',{
extend: 'Ext.grid.Panel',
width: 600,
height: 200,
title: 'Student Records',
plugins: 'gridfilters',

columns:[
{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},
{text: 'Test Column' , filter: 'string',dataIndex:'TestColumn', flex: 1},

],

initComponent: function () {
 this.selModel = new Ext.selection.CheckboxModel( {
 });
 this.callParent(arguments);
}


});


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


Monday, January 26, 2015

Ext js 5.1 tutorial, ExtJS GridPanel example getting start, pagingmemory in ExtJS 5.1, ext.data.proxy.memory read method


When you migrate from ExtJS 4 to 5 then you will find out that lot of things in GridPanel has been changed. If you have implemented "pagingmemor" in ExtJS 4.x then it will not work in ExtJS 5.1, cause Ext.data.proxy.Memory's read method has been changed, earlier there were three arguments were passed and this time only one 'operation' is there. Due to absence of 'scope' and 'callback' your 'Ext.ux.data.PagingMemoryProxy.js' will not work and this is important JS for local memory sorting, filtering and pagination.

ExtJS 5.1 came up with new configruation in 'Ext.data.proxy.Memory' and that is '' .
You do not need to do any thing for local memory pagination, just set this configuration true. That is.

Below is the full example of this configuration:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ExtJS 5.1.0 Grid Pagination Example</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(){

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

var mydata = {
"success":true,
"totalCount": 24,
"rows":[
{status: true, id:1, name:'Binod', mobile:'0000099257'},
{status: true, id:2, name:'Binod 2', mobile:'0000099257'},
{status: true, id:3, name:'Akshu', mobile:'12345070277'},
{status: false, id:4, name:'Sanjay 4', mobile:'999988885'},
{status: false, id:5, name:'Sanjay 5', mobile:'999988885'},
{status: false, id:6, name:'Sanjay 6', mobile:'999988885'},
{status: false, id:7, name:'Sanjay 7', mobile:'999988885'},
{status: false, id:8, name:'Sanjay 8', mobile:'999988885'},
{status: false, id:9, name:'Sanjay 9', mobile:'999988885'},
{status: false, id:10, name:'Sanjay 10', mobile:'999988885'},
{status: false, id:11, name:'Sanjay 11', mobile:'999988885'},
{status: false, id:12, name:'Sanjay 12', mobile:'999988885'},
{status: false, id:13, name:'Sanjay 13 ', mobile:'999988885'},
{status: false, id:14, name:'Sanjay 14', mobile:'999988885'},
{status: false, id:15, name:'Sanjay 15', mobile:'999988885'},
{status: false, id:16, name:'Sanjay 16', mobile:'999988885'},
{status: false, id:17, name:'Sanjay 17', mobile:'999988885'},
{status: false, id:18, name:'Sanjay 18', mobile:'999988885'},
{status: false, id:19, name:'Sanjay 19', mobile:'999988885'},
{status: false, id:20, name:'Sanjay 20', mobile:'999988885'},
{status: false, id:21, name:'Sanjay 21', mobile:'999988885'},
{status: false, id:22, name:'Sanjay 22', mobile:'999988885'},
{status: false, id:23, name:'Sanjay 23', mobile:'999988885'},
{status: true, id:24, name:'Zambia 24', mobile:'8888999997'}
]
}



var storeProxy = {
                  type: 'memory',
 enablePaging : true,
                  data: mydata
            };

storeProxy.reader = {
           type: 'json',
           totalProperty: 'totalCount',
           rootProperty: 'rows',
           successProperty: 'success'
       };

 
   var studentStore = Ext.create('Ext.data.Store',{
 model: 'Student',
 autoLoad: true,
 remoteSort: true,
 remoteFilter : true,
 pageSize: 10,
 proxy: storeProxy

});

var dockedPagingToolbar = [];
          dockedPagingToolbar = [{
          xtype: 'pagingtoolbar',
          store: studentStore,
          dock: 'bottom',
          displayInfo: true
    }];
           

Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 250,
height: 290,
multiSelect: true,
title: 'Student Records',
plugins: 'gridfilters',
    dockedItems : dockedPagingToolbar,

columns:[
{xtype: 'checkcolumn', text: 'Status', filter: 'string', dataIndex:'status', width: 50},
{text: 'Roll Number', filter: 'numeric', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1}
]
});

});

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


Saturday, January 24, 2015

extjs 5.1.0 pagingmemory example extjs 5.1.0 pagingmemory alternative Ext JS GridPanel, sorting, filtering, pagination on local data


 pagingmemory config was working very fine till Ext JS 4 BUT it seems some issue is there in Ext JS 5. So we can not use pagingmemory directly, in stead we have to manually handle data from pagination. It is easy and just one line code, take page start and limit value and slice your actual data and send back to store proxy data variable.


Two thinks  keep in mind for below example:
1. In storeProxy, added new config name is actualData where you have to assign your complete data fetch from back end.

2. storeProxy.reader.rootProperty value I used in manually hardword "rows" in slice method where I cut data for current page.

Please just copy and paste below code (change extjs css and js file path accordginly), it work perfectly.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ExtJS 5.1.0 Grid Pagination Example</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 src="extjs-5.1.0/examples/ux/data/NOCPagingMemoryProxy.js"></script>


    <script>
Ext.onReady(function(){

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

var mydata = {
"success":true,
"totalCount": 24,
"rows":[
{status: true, id:1, name:'Binod', mobile:'0000099257'},
{status: true, id:2, name:'Binod 2', mobile:'0000099257'},
{status: true, id:3, name:'Akshu', mobile:'12345070277'},
{status: false, id:4, name:'Sanjay 4', mobile:'999988885'},
{status: false, id:5, name:'Sanjay 5', mobile:'999988885'},
{status: false, id:6, name:'Sanjay 6', mobile:'999988885'},
{status: false, id:7, name:'Sanjay 7', mobile:'999988885'},
{status: false, id:8, name:'Sanjay 8', mobile:'999988885'},
{status: false, id:9, name:'Sanjay 9', mobile:'999988885'},
{status: false, id:10, name:'Sanjay 10', mobile:'999988885'},
{status: false, id:11, name:'Sanjay 11', mobile:'999988885'},
{status: false, id:12, name:'Sanjay 12', mobile:'999988885'},
{status: false, id:13, name:'Sanjay 13 ', mobile:'999988885'},
{status: false, id:14, name:'Sanjay 14', mobile:'999988885'},
{status: false, id:15, name:'Sanjay 15', mobile:'999988885'},
{status: false, id:16, name:'Sanjay 16', mobile:'999988885'},
{status: false, id:17, name:'Sanjay 17', mobile:'999988885'},
{status: false, id:18, name:'Sanjay 18', mobile:'999988885'},
{status: false, id:19, name:'Sanjay 19', mobile:'999988885'},
{status: false, id:20, name:'Sanjay 20', mobile:'999988885'},
{status: false, id:21, name:'Sanjay 21', mobile:'999988885'},
{status: false, id:22, name:'Sanjay 22', mobile:'999988885'},
{status: false, id:23, name:'Sanjay 23', mobile:'999988885'},
{status: true, id:24, name:'Zambia 24', mobile:'8888999997'}
]
}



var storeProxy = {
                  type: 'memory',
 actualdata: mydata,
                  data: mydata
            };
//storeProxy.type = 'pagingmemory';
storeProxy.reader = {
           type: 'json',
           totalProperty: 'totalCount',
           rootProperty: 'rows',
           successProperty: 'success'
       };

 
   var studentStore = Ext.create('Ext.data.Store',{
 model: 'Student',
 autoLoad: true,
 remoteSort: true,
 remoteFilter : true,
 pageSize: 10,
 proxy: storeProxy,
 listeners: {
     beforeload : function(store, operation, eOpts){
if (operation._start !== undefined && operation._limit !== undefined) {
 // Here you have to manually handle data for requested page as pagingmemory not working.
   store.proxy.data.rows = store.proxy.actualdata.rows.slice(operation._start, operation._start + operation._limit);
}
           }
   }
});

var dockedPagingToolbar = [];
          dockedPagingToolbar = [{
          xtype: 'pagingtoolbar',
          store: studentStore,
          dock: 'bottom',
          displayInfo: true
    }];
         

Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 250,
height: 290,
multiSelect: true,
title: 'Student Records',
plugins: 'gridfilters',
    dockedItems : dockedPagingToolbar,

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}
]
});
// studentStore.loadPage(1);

});

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

Please refer this link blog for better example on Extjs 5.1 without using any hard coded data.

Extjs Pagination, pagingmemory Example, Extjs 4.1.0 Grid Panel with Sorting and Pagination on local memory





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ExtJS 4.1. Grid Pagination Example</title>
 
  <link rel="stylesheet" href="ext-4.2.1.883\packages\ext-theme-gray\build\resources\ext-theme-gray-all.css"/>
<script src="ext-4.2.1.883\ext-all.js"></script>
<script src="ext-4.2.1.883\examples\ux\data\PagingMemoryProxy.js"></script>


    <script>
Ext.onReady(function(){

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

var mydata = {
"success":true,
"totalCount": 24,
"rows":[
{status: true, id:1, name:'Binod', mobile:'0000099257'},
{status: false, id:5, name:'Ishan', mobile:'0002887325'},
{status: true, id:3, name:'Akshu', mobile:'12345070277'},
{status: false, id:4, name:'Sanjay 4', mobile:'999988885'},
{status: false, id:5, name:'Sanjay 5', mobile:'999988885'},
{status: false, id:6, name:'Sanjay 6', mobile:'999988885'},
{status: false, id:7, name:'Sanjay 7', mobile:'999988885'},
{status: false, id:8, name:'Sanjay 8', mobile:'999988885'},
{status: false, id:9, name:'Sanjay 9', mobile:'999988885'},
{status: false, id:10, name:'Sanjay 10', mobile:'999988885'},
{status: false, id:11, name:'Sanjay 11', mobile:'999988885'},
{status: false, id:12, name:'Sanjay 12', mobile:'999988885'},
{status: false, id:13, name:'Sanjay 13 ', mobile:'999988885'},
{status: false, id:14, name:'Sanjay 14', mobile:'999988885'},
{status: false, id:15, name:'Sanjay 15', mobile:'999988885'},
{status: false, id:16, name:'Sanjay 16', mobile:'999988885'},
{status: false, id:17, name:'Sanjay 17', mobile:'999988885'},
{status: false, id:18, name:'Sanjay 18', mobile:'999988885'},
{status: false, id:19, name:'Sanjay 19', mobile:'999988885'},
{status: false, id:20, name:'Sanjay 20', mobile:'999988885'},
{status: false, id:21, name:'Sanjay 21', mobile:'999988885'},
{status: false, id:22, name:'Sanjay 22', mobile:'999988885'},
{status: false, id:23, name:'Sanjay 23', mobile:'999988885'},
{status: true, id:24, name:'Zambia 24', mobile:'8888999997'}
]
}

var storeProxy = {
                  type: 'memory',
                  data: mydata
            };
storeProxy.type = 'pagingmemory';
    storeProxy.reader = {
           type: 'json',
           totalProperty: 'totalCount',
           root: 'rows',
           successProperty: 'success'
       };


    var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
autoLoad: true,
remoteSort: true,
     pageSize: 7,
proxy: storeProxy
});

studentStore.load();
var dockedPagingToolbar = [];
        dockedPagingToolbar = [{
                  xtype: 'pagingtoolbar',
                  store: studentStore,
                  dock: 'bottom',
                  displayInfo: true
            }];

Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 250,
height: 220,
multiSelect: true,
title: 'Student Records',
//plugins: 'gridfilters',
    dockedItems : dockedPagingToolbar,
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}
]
   });
 
});

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

Thursday, January 22, 2015

Extjs 5.1.0 Ext.data.field.convert example How to perform some processing when we load a Field's data in Extjs 5.1.0

Some time you feel to create new column in grid based on the existing column like create firstname from given full name or create insertion date.



Sometimes a simple type isn't enough, or we want to perform some processing when we load a Field's data. We can do this using a convert function. Here, we're going to create a new field based on another:



When reading fields it is often necessary to convert the values received before using them or storing them in records. To handle these cases there is the convert method.



For example 1:


{
            name: 'firstName',
            convert: function(value, record) {
                var fullName  = record.get('name'),
                    splits    = fullName.split(" "),
                    firstName = splits[0];

                return firstName;
            }
        }


For Example 2: 


{
     name: 'timestamp',

     convert: function (value) {
         return new Date(value);
     }
 }


Complete Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ExtJS Grid Example</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(){
   
   Ext.define('Student',{
   extend: 'Ext.data.Model',
   fields:[
    {name: 'id'},
    {name: 'name'},
    {name: 'mobile'},
    {name: 'TestColumn',
     convert : function(value, record){
    return record.get('name')+" CHECK";
  }
     
    }
   ]
   });
 
    var studentStore = Ext.create('Ext.data.Store',{
  model: 'Student',
  autoLoad: true,
  data:[
  {status: true, id:'1', name:'Binod', mobile:'9900159257'},
  {status: false, id:'5', name:'Ishan', mobile:'9902887325'},
  {status: true, id:'3', name:'Akshu', mobile:'90351070277'},
  {status: false, id:'4', name:'Sanjay', mobile:'999988885'},
  {status: true, id:'2', name:'Zambia', mobile:'8888999997'}
  ]
 
 }); 
   
  var selectionchangefired = false;
 
 Ext.create('Ext.grid.Panel',{
 renderTo: Ext.getBody(),
 store: studentStore,
 width: 450,
 height: 200,
 multiSelect: true,
 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},
  {text: 'Test Column' , filter: 'string',dataIndex:'TestColumn', flex: 1},
  
 ],
 
 
 
 dockedItems: [{
        xtype: 'pagingtoolbar',
        store: studentStore,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }]
 
 
 
 });  
   
   
 });
  

 </script>
 </head>
 </html>
Here, Test column is generated during run time based on other field.