Creating a Grid Using Extjs and Loading Data from Database

First Creating Java Bean to set and get the Details from  DataBase.

package com.first;

public class GridStore {

    public String getEMAILID() {
        return EMAILID;
    }

    public void setEMAILID(String EMAILID) {
        this.EMAILID = EMAILID;
    }

    public String getFIRSTNAME() {
        return FIRSTNAME;
    }

    public void setFIRSTNAME(String FIRSTNAME) {
        this.FIRSTNAME = FIRSTNAME;
    }

    public String getLASTNAME() {
        return LASTNAME;
    }

    public void setLASTNAME(String LASTNAME) {
        this.LASTNAME = LASTNAME;
    }

    public String getMOBILENO() {
        return MOBILENO;
    }

    public void setMOBILENO(String MOBILENO) {
        this.MOBILENO = MOBILENO;
    }

    private String FIRSTNAME;
    private String LASTNAME;
    private String EMAILID;
    private String MOBILENO;



}

Now Creating Grid and loading Data from Data Base....

<%@page import="com.first.GridStore"%>
<%@page import="com.google.gson.Gson"%>
<%@ page import="java.sql.*" %>
<%@page import="java.util.*" %>


<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="ext-all.js"></script>
<link href="resources/css/ext-all.css" rel="stylesheet"/>

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>

    <%
        List s1 ;
        Gson gson = new Gson();
    %>


    <%
        s1 = new ArrayList();

        Class.forName("oracle.jdbc.driver.OracleDriver");
        Connection con = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:DSN", "UserName", "Password");
        Statement stmt = con.createStatement();
        ResultSet rs = stmt.executeQuery("select * from WNP");
        while (rs.next()) {
           GridStore e = new GridStore();
            e.setFIRSTNAME(rs.getString(1));
            e.setLASTNAME(rs.getString(2));
            e.setEMAILID(rs.getString(3));

            e.setMOBILENO(rs.getString(4));
         

            s1.add(e);

        }





    %>

    <script type="text/javascript">
        Ext.onReady(function(){

            var stores= Ext.create('Ext.data.Store', {
 fields:['FIRSTNAME','LASTNAME','EMAILID','MOBILENO'],





               data:{'names':[

                    ]},
                proxy: {
                    type:'memory',
                    reader: {
                        type: 'json',
                        root: 'names'
                    }
                }
            });
         

            Ext.create('Ext.grid.Panel', {
                title: 'Getting Data From Database',
                width:500,
                store: stores,
                columns: [
                    { header: 'FIRSTNAME',  dataIndex: 'FIRSTNAME'},
                    { header: 'LASTNAME', dataIndex: 'LASTNAME'},
                    {header:'EMAILID',dataIndex:'EMAILID'},
                    {header:'MOBILENO',dataIndex:'MOBILENO'},
                 
                     ],
                height: 500,
                width: 800,
                id:"grid1",


                renderTo: Ext.getBody()
            });




  Ext.getCmp("grid1").store.loadData(<%=gson.toJson(s1)%>);
        });
    </script>
    <body>
     
    </body>
</html>