Ext checkbox

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