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

  MVC:Controller action

 public ActionResult ArticleData(string start, string limit)
        {
            ArticleDal articleDal = new ArticleDal(_session);
            var total = 0;
            var data = articleDal.MyGetAll2(int.Parse(start), int.Parse(limit), ref total);
            var json = Json(new { totalCount = total, topics = data }, JsonRequestBehavior.AllowGet);
            return json;
        }

  数据访问层:Nhibernate分页

    public IEnumerable<ArticleView> MyGetAll2(int start, int limit, ref int count)
        {
            try
            {
                var query = _session.CreateCriteria<Article>();
                count = query.List<Article>().Count;
                var data = query.SetFirstResult(start)
                                .SetMaxResults(limit)
                                .AddOrder(new Order("CreateTime", false))
                                .List<Article>();
                return ArticleMapper.GetArticleView(data);
            }
            catch (Exception)
            {
                throw;
            }
        }

  Asp.Net MVC结合ExtJs gridPanel 分页和高度自适应_第1张图片

有问题及时和我联系:[email protected]

你可能感兴趣的:(gridPanel)