Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.PagingScroller',
'Ext.ux.RowExpander',
'Ext.selection.CheckboxModel'
]);Ext.onReady(function(){
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
// create the Data Store
var sm = Ext.create('Ext.selection.CheckboxModel');
var store = Ext.create('Ext.data.Store', {
id: 'store',
pageSize: 200,
model: 'ForumThread',
remoteSort: true,
// allow the grid to interact with the paging scroller by buffering
buffered: 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/remote_topics/index.php',
extraParams: {
total: 50000
},
reader: {
root: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
},
sorters: [{
property: 'lastpost',
direction: 'DESC'
}]
});
function renderTopic(value, p, record) {
return Ext.String.format(
'<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}
var sm = Ext.create('Ext.selection.CheckboxModel');
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'checkbox',
store: store,
selModel: sm,
frame: true,
verticalScrollerType: 'paginggridscroller',
loadMask: true,
disableSelection: false,
invalidateScrollerOnRefresh: false,
viewConfig: {
trackOver: false
},
// grid columns
columns:[{
id: 'topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: false
},{
text: "Author",
dataIndex: 'author',
width: 100,
hidden: true,
sortable: true
},{
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: false
},{
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true
}],
renderTo: 'grid-example'
});
// trigger the data store load
store.guaranteeRange(0, 199);