Ext.onReady(function(){
 
        // Copyright (c)  2009 Anatoly S. Krivitsky, PhD.
        // All rights reserved.       
        // Conditional permission for free use of the code
        // As soon as above copyright notes are mentioned,
        // the author grants a permission to any person or organization
        // to use, distribute and publish this code for free
        // Questions and comments may be directed to the author at
        // akrivitsky@yahoo.com and akrivitsky@usa.com
        // Disclaimer of Liability
        // The user assumes all responsibility 
        // and risk for the use of this code "as is".
        // There is no  warranty of any kind associated with the code.
        // Under no circumstances, including negligence, shall the author be liable
        // for any DIRECT, INDIRECT, INCIDENTAL, SPECIAL or CONSEQUENTIAL DAMAGES,
        // or LOST PROFITS that result from the use or inability to use the code.
        // Nor shall the author be liable for any possible damages related to the code including,
        // but not limited to, reliance by any person on any information obtained with the code
        // File name is phonebook.js
	// create the data store for data from servlet
	var storeFromServlet = new Ext.data.JsonStore({
		url: 'readingPhoneBook',
		fields: [
			{name: 'id', type: 'int'},
			'FirstName', 'LastName', 'MiddleName', 'Phone',
                        'Country', 'WhatKindOfPhone','Description'  
		 ]
	});
         // console.log('JsonStore created');
	// load data from the url ( readingPhoneBook )
	storeFromServlet.load();
 
	// create Ext JS Grid
	var gridFromServlet = new Ext.grid.GridPanel({
		store: storeFromServlet,
		columns: [
			{id:'id',header: 'ID', width: 20, sortable: true, dataIndex: 'id'},
			{header: 'First Name', width: 250, sortable: true, dataIndex: 'FirstName'},
			{header: 'Last Name', width: 250, sortable: true, dataIndex: 'LastName'},
			{header: 'Middle Name', width: 250, sortable: true, dataIndex: 'MiddleName'},
                        {header: 'Phone', width: 250, sortable: true, dataIndex: 'Phone'},
                        {header: 'Country', width: 250, sortable: true, dataIndex: 'Country'},
                        {header: 'What Kind Of Phone it is', width: 250, sortable: true, dataIndex: 'WhatKindOfPhone'},
                        {header: 'Description', width: 250, sortable: true, dataIndex: 'Description'}

		],
		stripeRows: true,
		height:250,
		width:1500,
		title:'Phone book'
	});
 
	// We will render the grid to phoneBook-grid
	gridFromServlet.render('phoneBook-grid');
 
});