я вам упростил тот самый пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Paging Grid Example</title>
<link rel="stylesheet" type="text/css" href="http://docs.sencha.com/extjs/4.2.2/extjs-build/resources/css/ext-all-neptune-debug.css" />
<script type="text/javascript" src="http://docs.sencha.com/extjs/4.2.2/extjs-build/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 50,
model: 'ForumThread',
remoteSort: true,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'jsonp',
url: 'http://www.sencha.com/forum/topics-browse-remote.php',
reader: {
root: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
},
autoLoad: true
});
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'ExtJS.com - Browse Forums',
store: store,
columns:[{
id: 'topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
sortable: false
},{
text: "Author",
dataIndex: 'username',
width: 100
},{
text: "Replies",
dataIndex: 'replycount',
width: 70,
align: 'right',
sortable: true
}],
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html>
