You need to sign in to do that
Don't have an account?
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>
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.
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