JavaScript DHTML/Ext JS/ScriptTagProxy
Setup Ext.data.Store and new Ext.data.ScriptTagProxy
<source lang="html4strict">
<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>
<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=".">","
{lastPost:date("M j, Y")}
by {author}",
"<a href="http://extjs.ru/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a>
",
"{excerpt}
", "); 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>
</body> </html>
</source>
Use a ScriptTagProxy to fetch cross-domain remote data
<source lang="html4strict">
<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>
<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( "<a href="http://extjs.ru/forum/showthread.php?t={2}" target="_blank">{0}</a><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}p.body = "
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){
"+record.data.excerpt+"
";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>
</body> </html>
</source>