Extjs4.2+webAPI+EF实现分页以及webapi的数据传值(续)

简介: 现在领导又要增加功能,需要分页的时候,每页显示N条信息。由于是每个页面都要改,所有需要声明了一个扩展类代码如下: // Copyright : 欧蓝德畅电子技术有限公司. All rights reserved.

现在领导又要增加功能,需要分页的时候,每页显示N条信息。由于是每个页面都要改,所有需要声明了一个扩展类代码如下:

// Copyright : 欧蓝德畅电子技术有限公司.  All rights reserved.
// 文件名:pager.js
// 文件描述:分页扩展类,extJS控件之每页显示N条记录 
//-----------------------------------------------------------------------------------
// 创建者:
// 创建时间:2013-06-21
//====================================================================================

Ext.define('Ext.ux.ComboPageSize', {
    requires: [
        'Ext.form.field.ComboBox'
    ],
    pageSizes: [5, 10,15,20, 25, 50, 100, 200, 500, 1000],
    constructor: function (config) {
        if (config) {
            Ext.apply(this, config);
        }
    },
    init: function (pbar) {
        var combo = Ext.widget('combo', {
            store: this.pageSizes
            , fieldLabel: '每页显示'
            , labelWidth: 60
            , width: 120
            , listeners: {
                change: function (s, v) {
                    pbar.store.pageSize = v;
                    pbar.store.loadPage(1);
                }
            }
        });
        var itemlengths = pbar.items.items;
        pbar.add(itemlengths, '-', combo, '行');
        combo.setValue(pbar.store.pageSize);
    }
});

使用方法是:

bbar: Ext.create('Ext.PagingToolbar', {
                    plugins: [new Ext.ux.ComboPageSize({})],
                    store: Batchstore, //---grid panel的数据源
                    displayInfo: true,
                    displayMsg: '显示 {0} - {1} 条,共计 {2} 条',
                    emptyMsg: "没有数据"
                }),

实现的效果图为:

目录
相关文章
|
JavaScript 算法 搜索推荐
【自然框架】QuickPager asp.net 分页控件的Ajax分页方式。
  上次比较匆忙,Ajax的分页方式仅实现了基本功能,或者说只是验证了我的想法。现在对Ajax分页有做了一些调整,现在可以正式用了。     使用方法还是非常简单,可以完全按照URL分页方式来做,只需要把PagerTurnKind 属性 设置为:PagerTurnKind.AjaxForWebControl;就可以了。
1150 0
|
JSON 前端开发 .NET
如何构建ASP.NET MVC4&JQuery&AJax&JSon示例
背景:   博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax。 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Index动作方法添加视图(Index.cshtml),视图中HTML如下: 输入你的姓名: 输入你的年龄: 提交 清空   视图中包含两个文本框,分别用来输入名字和年龄,包含连个按钮,分别用来提交信息和清空文本框的内容,同时包含一个段落,用来显示Ajax返回的数据信息。
1089 0
|
前端开发 API 数据格式
|
JavaScript .NET 索引
ASP.NET Core教程【二】从保存数据看Razor Page的特有属性与服务端验证
前文索引:ASP.NET Core教程【一】关于Razor Page的知识 在layout.cshtml文件中,我们可以看到如下代码: RazorPagesMovie 这段代码中用到asp-page这样的一个特有属性,这是razor page特有的, 这是一个锚点属性,它的值将被编译到a标...
1895 0
|
缓存 前端开发 JavaScript