<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html" isELIgnored="false" %>
<c:out value="${packetPortletMessage}" />
<div id="mainDiv"></div>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.0.0//EN"

"http://www.liferay.com/dtd/liferay-portlet-app_6_0_0.dtd">
<liferay-portlet-app>
<portlet>
<portlet-name>packetPortlet</portlet-name>
<instanceable>true</instanceable>
<remoteable>true</remoteable>
<header-portlet-css>/js/ext-4.2/resources/css/ext-all.css</header-portlet-css>
<header-portlet-javascript>/js/ext-4.2/ext-all-debug-w-comments.js</header-portlet-
javascript>
<header-portlet-javascript>/js/app.js</header-portlet-javascript>
</portlet>
</liferay-portlet-app>

Ext.onReady( function () {
alert("I am an alert box!");
});`

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'Ext.selection.CellModel',
    'Ext.grid.*',
    'Ext.form.*',
    'Ext.ux.CheckColumn'
]);
Ext.onReady( function () {
    Ext.QuickTips.init();
    // setup the state provider, all state information will be saved to a cookie
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    var divId = Ext.get("mainDiv");
    Ext.define('comptmodel', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'id', type: 'int'},
            {name: 'label', type: 'string'},
            {name: 'packageIdFk', type: 'int'},
            {name: 'preVal',  type: 'string'},
            {name: 'inVal',       type: 'string'},
            {name: 'finalVal',  type: 'string'}
        ]
    });
    var store = Ext.define('comptstore', {
        extend: 'Ext.data.Store',
        model: 'comptmodel',
        autoLoad: true,
        pageSize: 35,
        proxy: {
            type: 'ajax',
            url: 'data.json',
            reader: {
                type: 'json',
                root: 'components',
                id:   'idProperty',
                successProperty: 'meta.success'
            }
        }
    });
   var gridColumns = [
        {
            header: 'Label',
            dataIndex: 'label',
            flex: 1,
            sortable: false,
            id: 'label'
        },
        {
            header: 'Pre Commitee',
            dataIndex: 'preVal',
            sortable: true,
            width: 130,
            id: 'preVal'
        },
        {
            header: 'In Commiteee',
            dataIndex: 'inVal',
            width: 130,
            id: 'inVal'
        },
        {
            header: 'Final',
            dataIndex: 'finalVal',
            width: 130,
            id: 'finalVal'
        }
    ];
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        stateful: true,
        stateId: 'stateGrid',
        columns: gridColumns,
        height: 350,
        width: 600,
        title: 'Array Grid',
        renderTo: divId,
        viewConfig: {
            stripeRows: true
        },
        plugins: [cellEditing]
    });

<link rel="stylesheet" href="resources/css/ext-all.css"/>
<script type="application/javascript" src="ext-all-debug-w-comments.js"></script>
<script type="application/javascript" src="app4.js" ></script>

<header-portlet-css>/js/ext-4.2/resources/css/ext-all.css</header-portlet-css>
<header-portlet-javascript>/js/ext-4.2/ext-all-debug-w-comments.js</header-portlet-
    javascript>
<header-portlet-javascript>/js/app.js</header-portlet-javascript>