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);