JavaScript DHTML/Ext JS/ScriptTagProxy
Setup Ext.data.Store and new Ext.data.ScriptTagProxy
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/SearchField.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: "http://extjs.ru/forum/topics-remote.php"
}),
reader: new Ext.data.JsonReader({
root: "topics",
totalProperty: "totalCount",
id: "post_id"
}, [
{name: "postId", mapping: "post_id"},
{name: "title", mapping: "topic_title"},
{name: "topicId", mapping: "topic_id"},
{name: "author", mapping: "author"},
{name: "lastPost", mapping: "post_time", type: "date", dateFormat: "timestamp"},
{name: "excerpt", mapping: "post_text"}
]),
baseParams: {limit:20, forumId: 4}
});
// Custom rendering Template for the View
var resultTpl = new Ext.XTemplate(
"<tpl for=".">",
"<div class="search-item">",
"<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>",
"<a href="http://extjs.ru/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a></h3>",
"<p>{excerpt}</p>",
"</div></tpl>"
);
var panel = new Ext.Panel({
applyTo: "search-panel",
title:"Forum Search",
height:300,
autoScroll:true,
items: new Ext.DataView({
tpl: resultTpl,
store: ds,
itemSelector: "div.search-item"
}),
tbar: [
"Search: ", " ",
new Ext.ux.form.SearchField({
store: ds,
width:320
})
],
bbar: new Ext.PagingToolbar({
store: ds,
pageSize: 20,
displayInfo: true,
displayMsg: "Topics {0} - {1} of {2}",
emptyMsg: "No topics to display"
})
});
ds.load({params:{start:0, limit:20, forumId: 4}});
});
</script>
<div style="width:600px;" id="search-panel">
</div>
</body>
</html>
Use a ScriptTagProxy to fetch cross-domain remote data
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
// create the Data Store
var store = new Ext.data.JsonStore({
root: "topics",
totalProperty: "totalCount",
idProperty: "threadid",
remoteSort: true,
fields: [
"title", "forumtitle", "forumid", "author",
{name: "replycount", type: "int"},
{name: "lastpost", mapping: "lastpost", type: "date", dateFormat: "timestamp"},
"lastposter", "excerpt"
],
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: "http://extjs.ru/forum/topics-browse-remote.php"
})
});
store.setDefaultSort("lastpost", "desc");
// pluggable renders
function renderTopic(value, p, record){
return String.format(
"<b><a href="http://extjs.ru/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.ru/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>",
value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format("{0}<br/>by {1}", value.dateFormat("M j, Y, g:i a"), r.data["lastposter"]);
}
var grid = new Ext.grid.GridPanel({
width:700,
height:500,
title:"ExtJS.ru - Browse Forums",
store: store,
trackMouseOver:false,
disableSelection:true,
loadMask: true,
// grid columns
columns:[{
id: "topic", // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Topic",
dataIndex: "title",
width: 420,
renderer: renderTopic,
sortable: true
},{
header: "Author",
dataIndex: "author",
width: 100,
hidden: true,
sortable: true
},{
header: "Replies",
dataIndex: "replycount",
width: 70,
align: "right",
sortable: true
},{
id: "last",
header: "Last Post",
dataIndex: "lastpost",
width: 150,
renderer: renderLast,
sortable: true
}],
// customize view config
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = "<p>"+record.data.excerpt+"</p>";
return "x-grid3-row-expanded";
}
return "x-grid3-row-collapsed";
}
},
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: "Displaying topics {0} - {1} of {2}",
emptyMsg: "No topics to display",
items:[
"-", {
pressed: true,
enableToggle:true,
text: "Show Preview",
cls: "x-btn-text-icon details",
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
})
});
// render it
grid.render("topic-grid");
// trigger the data store load
store.load({params:{start:0, limit:25}});
});
</script>
<div id="topic-grid"></div>
</body>
</html>