Ext-JS: Fill a GridPanel with data from a Coldfusion data source

Platform:Ext-JS
Task:Fill a GridPanel with data from a Coldfusion data source
Discussion:
Fill a GridPanel with data from a Coldfusion data source
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>EXT JS DataStore and Grid Example</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
	<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="extjs/ext-all.js"></script>

<cfquery name="Docs" datasource="#app.dsn#">
	SELECT  DocumentID,Title,URL FROM tblDocuments ORDER by Title;
</cfquery>
	
<!--- get the documents --->
<script type="text/javascript" language="javascript">
	Ext.onReady(function(){	
		Ext.BLANK_IMAGE_URL = 'images/s.gif';
		
Ext.onReady(function() {
	var DocumentsArray = [
		<cfloop query = "Docs">
			<cfset record = "['#DocumentID#','#replace(Title,'''',''','ALL')#','<a href=""#URL#"">#URL#</a>'],">
			<cfset record = "#REReplace(record,'#chr(13)#|\n|\r',' ','ALL')#">
			<cfset record = "#REReplace(record,'#chr(10)#|\n|\r',' ','ALL')#">
			<cfoutput>#record#</cfoutput>
		</cfloop>
		['','','']
	];

	var myReader = new Ext.data.ArrayReader({}, [
		{name: 'DocumentID'},
		{name: 'Title'},
		{name: 'URL'}
	]);
 
	var grid = new Ext.grid.GridPanel({
		store: new Ext.data.Store({
			data: DocumentsArray,
			reader: myReader
		}),
		columns: [
			{header: 'DocumentID', width: 30, sortable: true, dataIndex: 'DocumentID'},
			{header: 'Title', width: 400, sortable: true, dataIndex: 'Title'},
			{header: 'URL', width: 400, sortable: true, dataIndex: 'URL'}
		],
		viewConfig: {
			forceFit: true
		},
		renderTo: 'Grid',
		title: 'ARCN Documents',
		width: 1024,
		autoHeight: true,
		frame: true
	});
 
	grid.getSelectionModel().selectFirstRow();
});

	});
</script>
</head>
<body>
<div id="Grid"></div>
Back to Index