Asp.Net MVC结合ExtJs gridPanel 分页和高度自适应

Ext.onReady(function () {
    gridPanel();
    var panel = Ext.getCmp('gridPanel');
    window.onresize = function () {
        panel.setHeight(document.documentElement.clientHeight);
    };
});

function gridPanel() {
    var pagingBar = Ext.widget('pagingtoolbar', {
        store: store,
        displayInfo: true,
        displayMsg: '显示 {0} - {1} ，共 {2} 记录'
    });
    var panel = new Ext.container.Viewport({
        items: {
            xtype: 'gridpanel',
            id: 'gridPanel',
            store: store,
            height: document.documentElement.clientHeight,
            columns: [
            { header: "Id", flex: 1, dataIndex: 'Id' },
            { header: "标题", width: 200, sortable: false, dataIndex: 'Title' },
            { header: "内容", width: 300, sortable: true, dataIndex: 'Contents' },
            { header: "点击数", width: 80, align: 'center', sortable: true, dataIndex: 'ClickCount' },
            { header: "发表时间", width: 110, sortable: true, dataIndex: 'CreateTime' },
            { header: "更新时间", width: 110, sortable: true, dataIndex: 'UpdateTime' }
            ],
            loadMask: true,
            disableSelection: true,
            viewConfig: {
                stripeRows: true
            },
            tbar: ['->',
                { text: '添加', icon: '../../../Images/extjs/add.png' },
                { text: '编辑', icon: '../../../Images/extjs/pencil.png' },
                { text: '删除', icon: '../../../Images/extjs/delete.png' }
            ],
            bbar: pagingBar
        }
    });
}

var store = Ext.create('Ext.data.Store', {
    pageSize: 20,
    fields: ['Id', 'Title', 'Contents', 'ClickCount', 'CreateTime', 'UpdateTime'],
    remoteSort: true,
    proxy: {
        type: 'ajax',
        url: '/Manage/ArticleData',
        reader: {
            type: 'json',
            root: 'topics',
            totalProperty: 'totalCount'
        }
    }
});

store.load({ params: { start: 0, limit: 20} }); 
Ext.onReady(function () {
    gridPanel();