JavaScript DHTML/Ext JS/JsonStore
Содержание
Load JsonStore to GridPanel
<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>
Remote Ext.data.JsonStore
<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>
Set Default Sort for Ext.data.JsonStore
<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>
Use JsonStore to hold the table data and column mapping
<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.onReady(function() {
var myData = { records : [ { name : "Record 0", column1 : "0", column2 : "0" }, { name : "Record 1", column1 : "1", column2 : "1" }, { name : "Record 2", column1 : "2", column2 : "2" }, { name : "Record 3", column1 : "3", column2 : "3" }, { name : "Record 4", column1 : "4", column2 : "4" }, { name : "Record 5", column1 : "5", column2 : "5" }, { name : "Record 6", column1 : "6", column2 : "6" }, { name : "Record 7", column1 : "7", column2 : "7" }, { name : "Record 8", column1 : "8", column2 : "8" }, { name : "Record 9", column1 : "9", column2 : "9" } ] };
// Generic fields array to use in both store defs. var fields = [ {name: "name", mapping : "name"}, {name: "column1", mapping : "column1"}, {name: "column2", mapping : "column2"} ]; // create the data store var gridStore = new Ext.data.JsonStore({ fields : fields, data : myData, root : "records" });
// Column Model shortcut array var cols = [ { id : "name", header: "Record Name", width: 160, sortable: true, dataIndex: "name"}, {header: "column1", width: 50, sortable: true, dataIndex: "column1"}, {header: "column2", width: 50, sortable: true, dataIndex: "column2"} ]; // declare the source Grid var grid = new Ext.grid.GridPanel({ ddGroup : "gridDDGroup", store : gridStore, columns : cols, enableDragDrop : true, stripeRows : true, autoExpandColumn : "name", width : 650, height : 325, region : "west", title : "Data Grid", selModel : new Ext.grid.RowSelectionModel({singleSelect : true}) }); //Simple "border layout" panel to house both grids var displayPanel = new Ext.Panel({ width : 650, height : 300, layout: "fit", renderTo : "panel", items : [ grid ], bbar : [ "->", // Fill { text : "Reset Example", handler : function() { //refresh source grid gridStore.loadData(myData); } } ] });
}); </script>
</body> </html>
</source>