function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

How does ExtJS grid works in VF page



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">


{// add your data store here

var grid = new Ext.grid.GridPanel({

renderTo: document.body,


title: 'Movie Database',



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'}








Message Edited by 1986anuj on 02-20-2009 07:45 AM

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{
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}


Your code looks ok, provided you have setup the store and dataset.

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

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 !!!