ExtJS With Spring MVC

Hi all its been long days i put a post on my blog. most of my colleagues were requesting me to put a write up on EXTJS and integrating it with Spring3.x MVC so here is my write for all those who were waiting for it. Basically EXTJS is Extended java script and every widget that you see on the page are coded as components and lot of features included in it. ExtJS comes in two flavors licensed and Open source. you can download ExtJS Lib from Sencha site.

the below is the java project struct for your reference
proj_struct

and here is the web project structure(Webcontent)
proj_struct2

Now lets start creating the UI. the main container which holds most of the components in the extjs page is called ViewPost and here is the code for that

Ext.require([ '*' ]);

Ext.onReady(function() {

	Ext.QuickTips.init();

	//Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
	var panel;
	var viewport = Ext.create('Ext.Viewport', {
		id : 'border-example',
		layout : 'border',
		items : [

		Ext.create('Ext.Component', {
			region : 'north',
			height : 0

		}),

		{
			xtype : 'tabpanel',
			region : 'east',
			title : 'Help Menu',
			dockedItems : [ {
				dock : 'top',
				xtype : 'toolbar',
				items : [ '->', {
					xtype : 'button',
					text : 'test',
					tooltip : 'Test Button'
				} ]
			} ],
			animCollapse : true,
			collapsible : true,
			split : true,
			width : 225,
			minSize : 175,
			maxSize : 400,
			margins : '0 5 0 0',
			activeTab : 1,
			tabPosition : 'bottom',
			items : []
		}, {
			region : 'west',
			stateId : 'navigation-panel',
			id : 'west-panel',
			title : 'Navigation Menu',
			split : true,
			width : 200,
			minWidth : 175,
			maxWidth : 400,
			collapsible : true,
			animCollapse : true,
			margins : '0 0 0 5',
			layout : 'accordion',
			items : [ {
				contentEl : 'west',
				title : '<b>Inventory</b>',
				iconCls : 'nav'
			}, {
				title : 'Purchase Order',
				iconCls : 'settings'
			}, {
				title : 'Patient Management',
				iconCls : 'info'
			} ]
		},

		panel = Ext.create('Ext.tab.Panel', {
			region : 'center',
			deferredRender : false,
			activeTab : 0
		}) ]
	});
	Ext.select("a.newProduct").on('click', function() {
		var tabExists = false;
		var items = panel.items.items;
		for ( var i = 0; i < items.length; i++) {
			if (items[i].id === 'NewProduct') {
				panel.setActiveTab(i);
				tabExists = true;
				panel.setActiveTab(i);
			}
		}
		if (!tabExists) {
			panel.insert(1, NewProduct);
			panel.setActiveTab(0);
		}
	});
	
	Ext.select("a.newFrame").on('click', function() {
		var tabExists = false;
		var items = panel.items.items;
		for ( var i = 0; i < items.length; i++) {
			if (items[i].id === 'NewFrame') {
				panel.setActiveTab(i);
				tabExists = true;
				panel.setActiveTab(i);
			}
		}
		if (!tabExists) {
			panel.insert(1, NewFrame);
			panel.setActiveTab(0);
		}
	});
	
	Ext.select("a.searchProd").on('click', function() {
		var tabExists = false;
		var items = panel.items.items;
		for ( var i = 0; i < items.length; i++) {
			if (items[i].id === 'searchFrame') {
				panel.setActiveTab(i);
				tabExists = true;
				panel.setActiveTab(i);
			}
		}
		if (!tabExists) {
			panel.insert(1, SearchFrame);
			panel.setActiveTab(0);
		}
	});
	
	Ext.select("a.newContactLens").on('click', function() {
		var tabExists = false;
		var items = panel.items.items;
		if(items.length > 0){
			for(var i = 0 ; i < items.length; i++){
				if(items[i].id === 'newContactLens'){
					panel.setActiveTab(i);
					tabExists = true;
					panel.setActiveTab(i);
				}
			}
		}
		if(!tabExists){
			panel.insert(1,newContactLens);
			panel.setActiveTab(0);
		}
	});
});

below is the code for creating a tabbed panel which is inside the ViewPort and all the form components are in the TabbedPanel. this can be done as below.

var item_type_store = Ext.create('Ext.data.Store', {
	fields : [ 'text' ],
	data : [ {
		text : 'type_1'
	}, {
		text : 'type_2'
	}, {
		text : 'type_3'
	}, {
		text : 'type_4'
	}, {
		text : 'type_5'
	}, {
		text : 'type_6'
	} ]
});

var item_type = Ext.create('Ext.form.field.ComboBox', {
	store : item_type_store,
	fieldLabel : 'ItemType',
	name : 'itemtype',
	xtype: 'tbfill'
});

var item_location_store = Ext.create('Ext.data.Store', {
	fields : [ 'text' ],
	data : [ {
		text : 'location_1'
	}, {
		text : 'location_2'
	}, {
		text : 'location_3'
	}, {
		text : 'location_4'
	}, {
		text : 'location_5'
	}, {
		text : 'location_6'
	}, {
		text : 'location_7'
	} ]
});

var item_location = Ext.create('Ext.form.field.ComboBox', {
	store : item_location_store,
	fieldLabel : 'ItemLocation',
	name : 'itemLocation'
});

var supplier_name_store = Ext.create('Ext.data.Store', {
	fields : [ 'text' ],
	data : [ {
		text : 'supplier_1'
	}, {
		text : 'supplier_2'
	}, {
		text : 'supplier_3'
	}, {
		text : 'supplier_4'
	}, {
		text : 'supplier_5'
	}, {
		text : 'supplier_6'
	}, {
		text : 'supplier_7'
	} ]
});

var supplier_name = Ext.create('Ext.form.field.ComboBox', {
	store : supplier_name_store,
	fieldLabel : 'SupplierName',
	name : 'supplierName'
});

var brand_collection_store = Ext.create('Ext.data.Store', {
	fields : [ 'text' ],
	data : [ {
		text : 'Brand_1'
	}, {
		text : 'Brand_2'
	}, {
		text : 'Brand_3'
	}, {
		text : 'Brand_4'
	}, {
		text : 'Brand_5'
	}, {
		text : 'Brand_6'
	}, {
		text : 'Brand_7'
	}, {
		text : 'Brand_8'
	} ]
});

var brand_collection = Ext.create('Ext.form.field.ComboBox', {
	store : brand_collection_store,
	fieldLabel : 'Brand/Collection',
	name : 'brandCollection'
});

var NewProduct = Ext.create('Ext.form.Panel', {
	layout : 'vbox',
	contentEl : 'center2',
	title : 'New Product',
	id : 'NewProduct',
	defaults : {
		bodyPadding : 10

	},
	items : [ {
		xtype : 'panel',
		width : 900,
		collapsible: true,
		title : 'Product Details',
		defaults : {
			width : 230,
			cls : 'form-field'
		},
		defaultType : 'textfield',
		items : [ {
			fieldLabel : 'SrNo',
			name : 'srNo',
			value : '',
			validator : function(event) {
				if (!(/[0-9]/.test(this.getValue()))) {
					return "This Field should be in Numbers only";
				}
				return true;
			}
		}, {
			fieldLabel : 'ItemNumber',
			name : 'iteNumber',
			value : ''
		
		}, {
			fieldLabel : 'Description',
			name : 'desc',
			value : ''
		
		}, {
			fieldLabel : 'Item Code',
			name : 'itemCode',
			value : ''
		
		}, {
			xtype : item_type,
			labelClsExtra : 'form-field'
		}, {
			xtype : item_location,
			labelClsExtra : 'form-field'
		}, {
			xtype : supplier_name,
			labelClsExtra : 'form-field'
		}, {
			xtype : brand_collection,
			labelClsExtra : 'form-field'
		}, {
			fieldLabel : 'Tax(%)',
			name : 'itemTax',
			value : ''
		
		}]
	}, {
		xtype : 'panel',
		title : 'Product Attributes',
		width : 900,
		flex : 2,
		collapsible: true,
		defaults : {
			cls : 'form-field'
		},
		items : [ {
			xtype : 'checkbox',
			fieldLabel : 'Active',
			name : 'active',
			checked : false,
		}, {
			xtype : 'checkbox',
			fieldLabel : 'Discounted',
			name : 'discounted',
			checked : false,
		}, {
			xtype : 'checkbox',
			fieldLabel : 'Dispensable',
			name : 'dispensable',
			checked : false,
		}, {
			xtype : 'checkbox',
			fieldLabel : 'Taxable',
			name : 'taxable',
			checked : false,
		} ]
	},{
		xtype : 'panel',
		title : 'Product Cost Details',
		width : 900,
		flex : 2,
		collapsible: true,
		autoScroll: true,
		defaults : {
			cls : 'form-field'
		},
		items : [ {
			xtype : 'textfield',
			fieldLabel : 'SupplierCost',
			name : 'supplierCost',
			value : ''
		
		}, {
			xtype : 'textfield',
			fieldLabel : 'LandingCost',
			name : 'landingCost',
			value : ''
		
		}, {
			xtype : 'textfield',
			fieldLabel : 'LastOrdered',
			name : 'lastOrdered',
			value : ''
		}, {
			xtype : 'textfield',
			fieldLabel : 'LastReceived',
			name : 'lastReceived',
			value : ''
		},  {
			xtype : 'textfield',
			fieldLabel : 'QuantityOrdered',
			name : 'quantityOnOrder',
			value : ''
		
		}, {
			xtype : 'textfield',
			fieldLabel : 'QuantityReceived',
			name : 'quantityReceived',
			value : ''
		
		}]
	} ],
	buttons : [
			{
				text : 'Save',
				handler : function() {
					var productForm = this.up('form').getForm();
					if (!productForm.isValid()) {
						alert("Please enter proper details!");
					} else {
						console.log(productForm.getValues());
						Ext.Ajax.request({
							url : 'spring/product/newproduct',
							method : 'POST',
							params : {
								productDetails : Ext
										.encode(productForm.getValues())
							},
							scope : this,
							success : function(response) {
								// Received response from the server
								msg = Ext.decode(response.responseText);
								if (msg.success) {
									Ext.MessageBox.alert('',
											msg.message);
								} else {
									Ext.MessageBox.alert('',
											msg.message);
								}
							},
							failure : function(response) {
								Ext.MessageBox.alert(msg.message);
							}
						});
					}

				}
			}, {
				text : 'Cancel',
				handler : function() {
					this.up('form').getForm().reset();
				}
			} ]

});

the above code has lot many things to understand. There are data stores that got created, components such textfields, comboboxt etc , buttons and their handlers. inside the handlers we have Ajax calls that will submit the form data to our spring controller.

the main moto of ExtJs is one HTML and many JavaScript files now to launch our application we need one initial page that launches and renders the extjs components and here it goes

<html>
<head>
<title>Vision One</title>

<link rel="stylesheet" type="text/css"
	href="resources/extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css"
	href="resources/extjs/resources/css/vision-one-custom.css">
<script type="text/javascript" src="resources/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="view/newProduct.js"></script>
<script type="text/javascript" src="view/newContactLens.js"></script>
<script type="text/javascript" src="view/newFrame.js"></script>
<script type="text/javascript" src="view/searchProduct.js"></script>
<script type="text/javascript" src="view/vision_ui.js"></script>

</head>
<body>
	<!-- use class="x-hide-display" to prevent a brief flicker of the content -->
	<div id="west" class="x-hide-display">
		<ul>
			<li><a href="#" class="newProduct">New Product(others)</a></li>
			<li><a href="#" class="newFrame">New Frames</a></li>
			<li><a href="#" class="newContactLens">New Contact Lens</a></li>
			<li><a href="#" class="searchProd">Search Products</a></li>
			<li><a href="#" class="searchFrame">Search Frames</a></li>
			<li><a href="#" class="searchLense">Search Lenses</a></li>
		</ul>
	</div>
	<div id="center2" class="x-hide-display"></div>
	<div id="center1" class="x-hide-display"></div>
	<div id="props-panel" class="x-hide-display"
		style="width: 200px; height: 200px; overflow: hidden;"></div>
</body>
</html>

Now lets look at the Middleware where the technology used is Spring MVC. First the request from ExtJS hits one of our spring REST based controller from there the request is deligated to service layer(Service IMPL) and from there again the request is deligated to DAO layer(DAO IMPL). lets look into our spring REST controller implementation

package com.spark.visionone.controller;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.spark.visionone.model.GenericMessageObject;
import com.spark.visionone.model.NewFrame;
import com.spark.visionone.model.OtherProduct;
import com.spark.visionone.service.ProductService;
import com.spark.visionone.utils.VisionOneUtils;

/**
 * @author Pavan Kumar Mantha
 *
 */
@Controller
@RequestMapping(value="/product")
public class ProductController {
	
	@Autowired
	ProductService productService;
	
	@RequestMapping(value="/newproduct",method =RequestMethod.POST)
	public @ResponseBody String saveProductDetails(HttpServletRequest httpServletRequest){
		
		String jsonStr = httpServletRequest.getParameter("productDetails");
		System.out.println(jsonStr);
		OtherProduct otherProduct = VisionOneUtils.JsonToJava(jsonStr, OtherProduct.class);
		GenericMessageObject genericMessageObject = productService.saveProductDetails(otherProduct);
		String jsonResonseStr = VisionOneUtils.JavaToJson(genericMessageObject);
		return jsonResonseStr;
	}
	
}

In the above implementation if you observer the method is annotaed as “@ResponseBody” which will help spring controller to return JSON object back to the ExtJS.

Now its time to see our Service Layer.

package com.spark.visionone.service;

import com.spark.visionone.model.GenericMessageObject;
import com.spark.visionone.model.NewFrame;
import com.spark.visionone.model.OtherProduct;

/**
 * @author Pavan kumar made class to return
 *         GenericMessageObject and passing OtherProduct object as parameter
 */
public interface ProductService {

	public GenericMessageObject saveProductDetails(OtherProduct otherProduct);

}

Now lets see the implementation of the service interface that we have created.

/**
 * 
 */
package com.spark.visionone.service.impl;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.spark.visionone.dao.ProductDAO;
import com.spark.visionone.model.GenericMessageObject;
import com.spark.visionone.model.NewFrame;
import com.spark.visionone.model.OtherProduct;
import com.spark.visionone.service.ProductService;

/**
 * @author Pavan Kumar Mantha
 *
 */
@Service(value="productService")
public class ProductServiceImpl implements ProductService{

	@Autowired
	ProductDAO productDAO;
	
	@Override
	public GenericMessageObject saveProductDetails(OtherProduct otherProduct) {
		return productDAO.saveProduct(otherProduct);
	}

}

Now lets us look into the interface and its implementation of DAO Layer at once.

/**
 * 
 */
package com.spark.visionone.dao;

import com.spark.visionone.model.GenericMessageObject;
import com.spark.visionone.model.NewFrame;
import com.spark.visionone.model.OtherProduct;

/**
 * @author PavanKumar Mantha
 *
 */
public interface ProductDAO {

	public GenericMessageObject saveProduct(OtherProduct otherProduct);
}

/**
 * 
 */
package com.spark.visionone.dao.impl;

import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;

import org.springframework.stereotype.Repository;

import com.spark.visionone.dao.ProductDAO;
import com.spark.visionone.model.GenericMessageObject;
import com.spark.visionone.model.NewFrame;
import com.spark.visionone.model.OtherProduct;

/**
 * @author PavanKumar Mantha
 *
 */
@Repository(value="productDAO")
public class ProductDAOImpl implements ProductDAO {

	@PersistenceContext
	EntityManager entityManager;
	/* (non-Javadoc)
	 * @see com.spark.visionone.dao.ProductDAO#saveProduct(com.spark.visionone.model.OtherProduct)
	 */
	@Override
	public GenericMessageObject saveProduct(OtherProduct otherProduct) {
		GenericMessageObject genericMessageObject = new GenericMessageObject();
		try {
			
			/*
			 *  logic to persist
			 *  entityManager.persist(otherProduct);
			 */
			entityManager.persist(otherProduct);
			System.out.println("Other Product: "+otherProduct.getBrandCollection());
			genericMessageObject.setSuccess(true);
			genericMessageObject.setMessage("details saved successfully !");
		} catch (Exception e) {
			e.printStackTrace();
			genericMessageObject.setSuccess(false);
			genericMessageObject.setMessage("Exception in saving details !");
		}
		return genericMessageObject;
	}
	
	
}

Here we used JPA to persist the objects to back end database.
the below are the different Model (pojo) classes that are used in the project for data storage and communication between different layers.

BaseVO.java

/**
 * 
 */
package com.spark.visionone.model;

import java.io.Serializable;
import java.sql.Date;

import javax.persistence.Column;

/**
 * @author PavanKumar Mantha
 * 
 */
public class BaseVO implements Serializable {

	private Date createdDate;
	private Date updateDate;

	/**
	 * @return the createdDate
	 */
	@Column
	public Date getCreatedDate() {
		return createdDate;
	}

	/**
	 * @param createdDate
	 *            the createdDate to set
	 */
	public void setCreatedDate(Date createdDate) {
		this.createdDate = createdDate;
	}

	/**
	 * @return the updateDate
	 */
	@Column
	public Date getUpdateDate() {
		return updateDate;
	}

	/**
	 * @param updateDate
	 *            the updateDate to set
	 */
	public void setUpdateDate(Date updateDate) {
		this.updateDate = updateDate;
	}

	/* (non-Javadoc)
	 * @see java.lang.Object#hashCode()
	 */
	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result
				+ ((createdDate == null) ? 0 : createdDate.hashCode());
		result = prime * result
				+ ((updateDate == null) ? 0 : updateDate.hashCode());
		return result;
	}

	/* (non-Javadoc)
	 * @see java.lang.Object#equals(java.lang.Object)
	 */
	@Override
	public boolean equals(Object obj) {
		if (this == obj) {
			return true;
		}
		if (obj == null) {
			return false;
		}
		if (!(obj instanceof BaseVO)) {
			return false;
		}
		BaseVO other = (BaseVO) obj;
		if (createdDate == null) {
			if (other.createdDate != null) {
				return false;
			}
		} else if (!createdDate.equals(other.createdDate)) {
			return false;
		}
		if (updateDate == null) {
			if (other.updateDate != null) {
				return false;
			}
		} else if (!updateDate.equals(other.updateDate)) {
			return false;
		}
		return true;
	}

}

OtherProduct.java

/**
 * 
 */
package com.spark.visionone.model;

import java.io.Serializable;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

/**
 * @author PavanKumar Mantha
 * 
 */
@Entity
@Table(name="new_product")
public class OtherProduct extends BaseVO implements Serializable {

	private String srNo;
	private String iteNumber;
	private String desc;
	private String itemCode;
	private String itemtype;
	private String ItemLocation;
	private String supplierName;
	private String brandCollection;
	private String active;
	private String discounted;
	private String dispensable;
	private String taxable;
	private String supplierCost;
	private String landingCost;
	private String lastOrdered;
	private String lastReceived;
	private String lastSold;
	private String quantityOnOrder;
	private String quantityOnHand;
	private String totalSold;
	private String quantityReceived;

	/**
	 * @return the srNo
	 */
	@Id
	@GeneratedValue(strategy=GenerationType.AUTO)
	@Column(name="SrNo")
	public String getSrNo() {
		return srNo;
	}

	/**
	 * @param srNo
	 *            the srNo to set
	 */
	public void setSrNo(String srNo) {
		this.srNo = srNo;
	}

	/**
	 * @return the iteNumber
	 */
	@Column
	public String getIteNumber() {
		return iteNumber;
	}

	/**
	 * @param iteNumber
	 *            the iteNumber to set
	 */
	public void setIteNumber(String iteNumber) {
		this.iteNumber = iteNumber;
	}

	/**
	 * @return the desc
	 */
	@Column
	public String getDesc() {
		return desc;
	}

	/**
	 * @param desc
	 *            the desc to set
	 */
	public void setDesc(String desc) {
		this.desc = desc;
	}

	/**
	 * @return the itemCode
	 */
	@Column
	public String getItemCode() {
		return itemCode;
	}

	/**
	 * @param itemCode
	 *            the itemCode to set
	 */
	public void setItemCode(String itemCode) {
		this.itemCode = itemCode;
	}

	/**
	 * @return the itemtype
	 */
	@Column
	public String getItemtype() {
		return itemtype;
	}

	/**
	 * @param itemtype
	 *            the itemtype to set
	 */
	public void setItemtype(String itemtype) {
		this.itemtype = itemtype;
	}

	/**
	 * @return the itemLocation
	 */
	@Column
	public String getItemLocation() {
		return ItemLocation;
	}

	/**
	 * @param itemLocation
	 *            the itemLocation to set
	 */
	public void setItemLocation(String itemLocation) {
		ItemLocation = itemLocation;
	}

	/**
	 * @return the supplierName
	 */
	@Column
	public String getSupplierName() {
		return supplierName;
	}

	/**
	 * @param supplierName
	 *            the supplierName to set
	 */
	public void setSupplierName(String supplierName) {
		this.supplierName = supplierName;
	}

	/**
	 * @return the brandCollection
	 */
	@Column
	public String getBrandCollection() {
		return brandCollection;
	}

	/**
	 * @param brandCollection
	 *            the brandCollection to set
	 */
	public void setBrandCollection(String brandCollection) {
		this.brandCollection = brandCollection;
	}

	/**
	 * @return the active
	 */
	@Column
	public String getActive() {
		return active;
	}

	/**
	 * @param active
	 *            the active to set
	 */
	public void setActive(String active) {
		this.active = active;
	}

	/**
	 * @return the discounted
	 */
	@Column
	public String getDiscounted() {
		return discounted;
	}

	/**
	 * @param discounted
	 *            the discounted to set
	 */
	public void setDiscounted(String discounted) {
		this.discounted = discounted;
	}

	/**
	 * @return the dispensable
	 */
	@Column
	public String getDispensable() {
		return dispensable;
	}

	/**
	 * @param dispensable
	 *            the dispensable to set
	 */
	public void setDispensable(String dispensable) {
		this.dispensable = dispensable;
	}

	/**
	 * @return the taxable
	 */
	@Column
	public String getTaxable() {
		return taxable;
	}

	/**
	 * @param taxable
	 *            the taxable to set
	 */
	public void setTaxable(String taxable) {
		this.taxable = taxable;
	}

	/**
	 * @return the supplierCost
	 */
	@Column
	public String getSupplierCost() {
		return supplierCost;
	}

	/**
	 * @param supplierCost
	 *            the supplierCost to set
	 */
	public void setSupplierCost(String supplierCost) {
		this.supplierCost = supplierCost;
	}

	/**
	 * @return the landingCost
	 */
	@Column
	public String getLandingCost() {
		return landingCost;
	}

	/**
	 * @param landingCost
	 *            the landingCost to set
	 */
	public void setLandingCost(String landingCost) {
		this.landingCost = landingCost;
	}

	/**
	 * @return the lastOrdered
	 */
	@Column
	public String getLastOrdered() {
		return lastOrdered;
	}

	/**
	 * @param lastOrdered
	 *            the lastOrdered to set
	 */
	public void setLastOrdered(String lastOrdered) {
		this.lastOrdered = lastOrdered;
	}

	/**
	 * @return the lastReceived
	 */
	@Column
	public String getLastReceived() {
		return lastReceived;
	}

	/**
	 * @param lastReceived
	 *            the lastReceived to set
	 */
	public void setLastReceived(String lastReceived) {
		this.lastReceived = lastReceived;
	}

	/**
	 * @return the lastSold
	 */
	@Column
	public String getLastSold() {
		return lastSold;
	}

	/**
	 * @param lastSold
	 *            the lastSold to set
	 */
	public void setLastSold(String lastSold) {
		this.lastSold = lastSold;
	}

	/**
	 * @return the quantityOnOrder
	 */
	@Column
	public String getQuantityOnOrder() {
		return quantityOnOrder;
	}

	/**
	 * @param quantityOnOrder
	 *            the quantityOnOrder to set
	 */
	public void setQuantityOnOrder(String quantityOnOrder) {
		this.quantityOnOrder = quantityOnOrder;
	}

	/**
	 * @return the quantityOnHand
	 */
	@Column
	public String getQuantityOnHand() {
		return quantityOnHand;
	}

	/**
	 * @param quantityOnHand
	 *            the quantityOnHand to set
	 */
	public void setQuantityOnHand(String quantityOnHand) {
		this.quantityOnHand = quantityOnHand;
	}

	/**
	 * @return the totalSold
	 */
	@Column
	public String getTotalSold() {
		return totalSold;
	}

	/**
	 * @param totalSold
	 *            the totalSold to set
	 */
	public void setTotalSold(String totalSold) {
		this.totalSold = totalSold;
	}
	
	/**
	 * @return the quantityReceived
	 */
	@Column
	public String getQuantityReceived() {
		return quantityReceived;
	}

	/**
	 * @param quantityReceived the quantityReceived to set
	 */
	public void setQuantityReceived(String quantityReceived) {
		this.quantityReceived = quantityReceived;
	}

	/*
	 * (non-Javadoc)
	 * 
	 * @see java.lang.Object#hashCode()
	 */
	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result
				+ ((ItemLocation == null) ? 0 : ItemLocation.hashCode());
		result = prime * result + ((active == null) ? 0 : active.hashCode());
		result = prime * result
				+ ((brandCollection == null) ? 0 : brandCollection.hashCode());
		result = prime * result + ((desc == null) ? 0 : desc.hashCode());
		result = prime * result
				+ ((discounted == null) ? 0 : discounted.hashCode());
		result = prime * result
				+ ((dispensable == null) ? 0 : dispensable.hashCode());
		result = prime * result
				+ ((iteNumber == null) ? 0 : iteNumber.hashCode());
		result = prime * result
				+ ((itemCode == null) ? 0 : itemCode.hashCode());
		result = prime * result
				+ ((itemtype == null) ? 0 : itemtype.hashCode());
		result = prime * result
				+ ((landingCost == null) ? 0 : landingCost.hashCode());
		result = prime * result
				+ ((lastOrdered == null) ? 0 : lastOrdered.hashCode());
		result = prime * result
				+ ((lastReceived == null) ? 0 : lastReceived.hashCode());
		result = prime * result
				+ ((lastSold == null) ? 0 : lastSold.hashCode());
		result = prime * result
				+ ((quantityOnHand == null) ? 0 : quantityOnHand.hashCode());
		result = prime * result
				+ ((quantityOnOrder == null) ? 0 : quantityOnOrder.hashCode());
		result = prime * result + ((srNo == null) ? 0 : srNo.hashCode());
		result = prime * result
				+ ((supplierCost == null) ? 0 : supplierCost.hashCode());
		result = prime * result
				+ ((supplierName == null) ? 0 : supplierName.hashCode());
		result = prime * result + ((taxable == null) ? 0 : taxable.hashCode());
		result = prime * result
				+ ((totalSold == null) ? 0 : totalSold.hashCode());
		return result;
	}

	/*
	 * (non-Javadoc)
	 * 
	 * @see java.lang.Object#equals(java.lang.Object)
	 */
	@Override
	public boolean equals(Object obj) {
		if (this == obj) {
			return true;
		}
		if (obj == null) {
			return false;
		}
		if (!(obj instanceof OtherProduct)) {
			return false;
		}
		OtherProduct other = (OtherProduct) obj;
		if (ItemLocation == null) {
			if (other.ItemLocation != null) {
				return false;
			}
		} else if (!ItemLocation.equals(other.ItemLocation)) {
			return false;
		}
		if (active == null) {
			if (other.active != null) {
				return false;
			}
		} else if (!active.equals(other.active)) {
			return false;
		}
		if (brandCollection == null) {
			if (other.brandCollection != null) {
				return false;
			}
		} else if (!brandCollection.equals(other.brandCollection)) {
			return false;
		}
		if (desc == null) {
			if (other.desc != null) {
				return false;
			}
		} else if (!desc.equals(other.desc)) {
			return false;
		}
		if (discounted == null) {
			if (other.discounted != null) {
				return false;
			}
		} else if (!discounted.equals(other.discounted)) {
			return false;
		}
		if (dispensable == null) {
			if (other.dispensable != null) {
				return false;
			}
		} else if (!dispensable.equals(other.dispensable)) {
			return false;
		}
		if (iteNumber == null) {
			if (other.iteNumber != null) {
				return false;
			}
		} else if (!iteNumber.equals(other.iteNumber)) {
			return false;
		}
		if (itemCode == null) {
			if (other.itemCode != null) {
				return false;
			}
		} else if (!itemCode.equals(other.itemCode)) {
			return false;
		}
		if (itemtype == null) {
			if (other.itemtype != null) {
				return false;
			}
		} else if (!itemtype.equals(other.itemtype)) {
			return false;
		}
		if (landingCost == null) {
			if (other.landingCost != null) {
				return false;
			}
		} else if (!landingCost.equals(other.landingCost)) {
			return false;
		}
		if (lastOrdered == null) {
			if (other.lastOrdered != null) {
				return false;
			}
		} else if (!lastOrdered.equals(other.lastOrdered)) {
			return false;
		}
		if (lastReceived == null) {
			if (other.lastReceived != null) {
				return false;
			}
		} else if (!lastReceived.equals(other.lastReceived)) {
			return false;
		}
		if (lastSold == null) {
			if (other.lastSold != null) {
				return false;
			}
		} else if (!lastSold.equals(other.lastSold)) {
			return false;
		}
		if (quantityOnHand == null) {
			if (other.quantityOnHand != null) {
				return false;
			}
		} else if (!quantityOnHand.equals(other.quantityOnHand)) {
			return false;
		}
		if (quantityOnOrder == null) {
			if (other.quantityOnOrder != null) {
				return false;
			}
		} else if (!quantityOnOrder.equals(other.quantityOnOrder)) {
			return false;
		}
		if (srNo == null) {
			if (other.srNo != null) {
				return false;
			}
		} else if (!srNo.equals(other.srNo)) {
			return false;
		}
		if (supplierCost == null) {
			if (other.supplierCost != null) {
				return false;
			}
		} else if (!supplierCost.equals(other.supplierCost)) {
			return false;
		}
		if (supplierName == null) {
			if (other.supplierName != null) {
				return false;
			}
		} else if (!supplierName.equals(other.supplierName)) {
			return false;
		}
		if (taxable == null) {
			if (other.taxable != null) {
				return false;
			}
		} else if (!taxable.equals(other.taxable)) {
			return false;
		}
		if (totalSold == null) {
			if (other.totalSold != null) {
				return false;
			}
		} else if (!totalSold.equals(other.totalSold)) {
			return false;
		}
		return true;
	}
}

GenericMessageObject.java

/**
 * 
 */
package com.spark.visionone.model;

import java.io.Serializable;

/**
 * @author PavanKumar Mantha
 * 
 */
public class GenericMessageObject implements Serializable{

	private Boolean success;
	private String message;

	/**
	 * @return the success
	 */
	public Boolean getSuccess() {
		return success;
	}

	/**
	 * @param success
	 *            the success to set
	 */
	public void setSuccess(Boolean success) {
		this.success = success;
	}

	/**
	 * @return the message
	 */
	public String getMessage() {
		return message;
	}

	/**
	 * @param message
	 *            the message to set
	 */
	public void setMessage(String message) {
		this.message = message;
	}

}

Here are the configuration files required for Spring and JPA to run un combination.
WEB-INF/spring/application-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:jdbc="http://www.springframework.org/schema/jdbc"
	xmlns:jee="http://www.springframework.org/schema/jee"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:task="http://www.springframework.org/schema/task"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd
		http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.2.xsd
		http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-3.2.xsd
		http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
		http://www.springframework.org/schema/task http://www.springframework.org/schema/task/spring-task-3.2.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd">

	<!-- Activates various annotations to be detected in bean classes for ex @Autowired -->
	<context:annotation-config/>
	<mvc:annotation-driven></mvc:annotation-driven>
	
	<context:component-scan base-package="com.spark.visionone"/>
	
	<tx:annotation-driven/>
	
	<bean id="entityManagerFactory" class="org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean">
		<property name="persistenceUnitName" value="persistentUnit"/>
		<property name="dataSource" ref="dataSource"/>
		<property name="jpaVendorAdapter">
			<bean class="org.springframework.orm.jpa.vendor.HibernateJpaVendorAdapter">
				<property name="showSql" value="true"/>
				<property name="generateDdl" value="false"/>
				<property name="databasePlatform" value="org.hibernate.dialect.MySQLDialect"/>
			</bean>
		</property>
	</bean>
	
	<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="com.mysql.jdbc.Driver"/>
		<property name="url" value="jdbc:mysql://localhost:3306/visionone"/>
		<property name="username" value="root"/>
		<property name="password" value="root"/>
	</bean>
	
	<bean id="transactionManager" class="org.springframework.orm.jpa.JpaTransactionManager">
		<property name="entityManagerFactory" ref="entityManagerFactory"/>
	</bean>
</beans>

WEB-INF/spring/spring-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:beans="http://www.springframework.org/schema/beans"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd
		http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd">

	<context:annotation-config/>
	<mvc:annotation-driven></mvc:annotation-driven>
	
	<context:component-scan base-package="com.spark.visionone"/>
	
	<tx:annotation-driven/>
	
	
	<!-- <mvc:resources location="/extjs/**" mapping="/resources/extjs"/> -->
</beans:beans>

WEB-INF/classes/META-INF/persistence.xml

<persistence xmlns="http://java.sun.com/xml/ns/persistence"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd"
	version="2.0">
	
	<persistence-unit name="persistentUnit" transaction-type="RESOURCE_LOCAL">
	<class>com.spark.visionone.model.OtherProduct</class>
	<class>com.spark.visionone.model.BaseVO</class>
	<class>com.spark.visionone.model.GenericMessageObject</class>
	</persistence-unit>
	
</persistence>

The project depending libs are as follows:
project-libs

this completes the coding part and its time for deployment and running the project. we can deploy the project to any web container and ran and say submit once all the fields ad filled you can see the request to spring controller is fired as below and data is sent in JSON format

finally the screen looks like this:
finalScreen

request

Dedicated to all those who want to learn EXTJS
Happy Coding 🙂