Ext.define('ExtMVC.model.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'
});

Ext.define('ExtMVC.store.ForumThreads', {
    extend: 'Ext.data.Store',
    model: 'ExtMVC.model.ForumThread',
    autoLoad: true,
    remoteSort: true,
    proxy: {
              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
    },
    sorters: [{
        property: 'lastpost',
        direction: 'DESC'
    }]
});

Ext.define('ExtMVC.view.forumThread.ForumThreadGrid' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.forumthreadgrid',
    
    requires: 'Ext.ux.PreviewPlugin',

    title : 'ExtJS.com - Browse Forums',

    disableSelection: true,

    loadMask: true,

    viewConfig: {
        id: 'gv',
        trackOver: false,
        stripeRows: false,
        plugins: [{
            ptype: 'preview',
            bodyField: 'excerpt',
            expanded: true,
            pluginId: 'preview'
        }]
    },

    // 渲染器
    renderTopic: function(value, p, record) {
        return Ext.String.format(
            '<b>[url=http://sencha.com/forum/showthread.php?t={2}]{0}[/url]</b>[url=http://sencha.com/forum/forumdisplay.php?f={3}]{1} Forum[/url]',
            value,
            record.data.forumtitle,
            record.getId(),
            record.data.forumid
        );
    },

    renderLast: function(value, p, r) {
        return Ext.String.format('{0}<br/>by {1}', Ext.Date.dateFormat(value, 'M j, Y, g:i a'), r.get('lastposter'));
    },

    initComponent: function() {

    	this.store = 'ForumThreads';

    	this.columns = [
        {
            id: 'topic',
            text: "Topic",
            dataIndex: 'title',
            flex: 1,
            renderer: this.renderTopic,
            sortable: false
        },{
            text: "Author",
            dataIndex: 'username',
            width: 100,
            hidden: true,
            sortable: true
        },{
            text: "Replies",
            dataIndex: 'replycount',
            width: 70,
            align: 'right',
            sortable: true
        },{
            id: 'last',
            text: "Last Post",
            dataIndex: 'lastpost',
            width: 150,
            renderer: this.renderLast,
            sortable: true
        }];

         // paging bar on the bottom
        this.bbar = Ext.create('Ext.PagingToolbar', {
            store: this.store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                xtype: 'button',    
                text: 'Show Preview',
                pressed: true,
                action: 'showPreview',
                enableToggle: true
            }]
        });

    	this.callParent(arguments);
    }
 });   

Ext.define('ExtMVC.view.Viewport', {
    extend: 'Ext.Viewport',    
    layout: 'fit',
    
    requires: [
        'ExtMVC.view.forumThread.Foru