function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
1986anuj1986anuj 

How does ExtJS grid works in VF page

Hello,

 

i have used following simple code for testing ExtJS Grid in VF  page.

The code is alright i think, as i have taken it from ExtJs Book.

Please let me know how will it work.

Code is below..

 

 

<script type="text/javascript">
Ext.onReady(function()
{// add your data store here
var grid = new Ext.grid.GridPanel({
renderTo: document.body,
frame:true,
title: 'Movie Database',
height:200,
width:500,
store: store,columns: [
			{header: "Title", dataIndex: 'title'},
			{header: "Director", dataIndex: 'director'},
			{header: "Released", dataIndex: 'released',
			 renderer: Ext.util.Format.dateRenderer('m/d/Y')},
			{header: "Genre", dataIndex: 'genre'},
			{header: "Tagline", dataIndex: 'tagline'}
		      ]
	});
});
</script>
 
 
 
Message Edited by 1986anuj on  02-20-2009 07:45 AM


vcassvcass
When I use Extjs components, I always upload all the resources in a zip file as a static resource. Then you can link to it in your VF page like so:
  
<link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.ExtJs,'resources/css/ext-all.css')}"/>
<script type="text/javascript" src="{!URLFOR($Resource.ExtJs,'resources/adapter/ext/ext-base.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.ExtJs,'ext-all-debug.js')}"></script>
 
ExtJs is the  name of my static resource. Once you have linked correctly to the code in your VF page, you can then add in your grid specific javascript.
 
Have you also setup your data and store like this ?
 
 
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am']
];

var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);
 
Your code looks ok, provided you have setup the store and dataset. 

Message Edited by vcass on  02-20-2009 07:48 AM


1986anuj1986anuj
Yes i have uploaded all the resources.
No i have not uploaded the data.......
but it should atleast show the empty grid,right???
Please send me the whole example if you can !!!
 
thanks,
Anuj