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}
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 = ""+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}
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 = ""+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}
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 = ""+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>
