Ext.onReady(function() {

	// create data store
	var reqUrl = "/know/num/ShowNumberNameListJson";			
  	var ds = new Ext.data.Store({
		nocache : true,
		proxy: new Ext.data.HttpProxy(new Ext.data.Connection({url:reqUrl, timeout:200000})), 
		reader: new Ext.data.JsonReader({ 
			root: 'results'
            //totalProperty: 'totalCount'
        },
		[
			{name: 'American', mapping:'languageMap.American'},
			{name: 'British', mapping:'languageMap.British'},
			{name: 'German', mapping:'languageMap.German'},
			{name: 'Italian', mapping:'languageMap.Italian'},
			{name: 'French', mapping:'languageMap.French'},
			{name: 'Spanish', mapping:'languageMap.Spanish'},
			{name: 'Chinese(t)', mapping:'languageMap.Chinat'},
			{name: 'Arabic', mapping:'languageMap.Arabic'},
			{name: 'Proposed Greek', mapping:'languageMap.ProposedGreek'},
			{name: 'Chinese (simplified)', mapping:'languageMap.Chinas'},
        	{name: 'numerical'},
            {name: 'order', type: 'int'},
			{name: 'prefix'},
            {name: 'symbol'}
         ])
   	});
	ds.load();

	var colModel = new Ext.grid.ColumnModel([
		{header: '#', width: 40, sortable: true, dataIndex: 'order'}, 
		{header: 'SI Prefix', width: 100, sortable: true, dataIndex: 'prefix'}, 
		{header: 'Symbol', width: 70, sortable: true, dataIndex: 'symbol'}, 
		{header: 'Numeral', width: 90, sortable: true, dataIndex: 'numerical'},
		{header: 'American', width: 90, sortable: true, dataIndex: 'American'},
		{header: 'British', width: 90, sortable: true, dataIndex: 'British'},
		{header: 'German', width: 90, sortable: true, dataIndex: 'German'},
		{header: 'Italian', width: 90, sortable: true, dataIndex: 'Italian'},
		{header: 'French', width: 90, sortable: true, dataIndex: 'French'},
		{header: 'Spanish', width: 90, sortable: true, dataIndex: 'Spanish'},
		{header: 'Chinese (traditional)', width: 90, sortable: true, dataIndex: 'Chinese(t)'},
		{header: 'Chinese (simplified)', width: 90, sortable: true, dataIndex: 'Chinese (simplified)'},
		{header: 'Arabic', width: 90, sortable: true, dataIndex: 'Arabic'},
		{header: 'Proposed Greek', width: 90, sortable: true, dataIndex: 'Proposed Greek'}
	]);
	
	var grid = new Ext.grid.GridPanel({ 
			//ds: new Ext.data.Store({ data: myData, reader: myReader }), 
			ds: ds,
			cm: colModel, 
			stripeRows: true,
			loadMask: {msg: 'Loading...'},
			viewConfig: { forceFit: true }, 
			renderTo: 'numNameTableContent', 
			title: 'Number Names', 
			width: 1200, 
			height: 800,
			frame: true }); 
	
	grid.render();	
	
	grid.getSelectionModel().selectFirstRow(); 

});