1.项目截图

extjs_09_定义自己的页面组件_json

extjs_09_定义自己的页面组件_分页_02

2.CustomSizePagingToolbar.js
Ext.define("Ext.ux.CustomSizePagingToolbar", {// 定义的名字要和文件的名字大写和小写一样
  extend : "Ext.toolbar.Paging",
  alias : "widget.custompaging",// 别名
  beforSizeText : "每页",
  afterSizeText : "条",
  getCustomItems : function() {
    var me = this;
    // 自己定义customComStore
    var customComStore = Ext.create("Ext.data.JsonStore", {
      fields : [ "customPageSize" ],
      data : [ {
        customPageSize : "10"
      }, {
        customPageSize : "20"
      }, {
        customPageSize : "50"
      }, {
        customPageSize : "100"
      } ]
    })
    // 自己定义customComboBox
    var customComboBox = Ext.create("Ext.form.field.ComboBox", {
      itemId : "customComboId",
      store : customComStore,
      queryMode : "local",
      displayField : "customPageSize",
      valueField : "customPageSize",
      enableKeyEvents : true,// 感应键盘事件
      width : 60,
      listeners : {
        scope : me,// 作用域
        select : me.onCustomSelect,
        keydown : me.onCustomKeyDown,
        blur : me.onCustomBlur
      }
    });
    // - 表示切割线,> 表示右边显示
    return [ "-", me.beforSizeText, customComboBox, me.afterSizeText ];
  },
  onCustomSelect : function(combo, records, eOpts) {// 选择事件触发
    var me = this;
    me.store.pageSize = records[0].data.customPageSize;
    me.store.loadPage(1);// 默认载入第一页
  },
  onCustomKeyDown : function(field, e, eOpts) {// 按键事件触发
    var me = this;
    var k = e.getKey();
    if (k == e.ENTER) {
      e.stopEvent();// 停止其它事件
      me.store.pageSize = me.child("#customComboId").getValue();
      me.store.loadPage(1);
    }
  },
  onCustomBlur : function(combo, the, eOpts) {// 失去焦点事件
    var me = this;
    me.child("#customComboId").setValue(me.store.pageSize);
  },
  // 初始化界面组件
  initComponent : function() {
    var me = this;
    Ext.apply(me, {// 应用、附加
      items : me.getCustomItems()
    });
    me.callParent(arguments);
    me.child("#customComboId").setValue(me.store.pageSize);// 初始化赋值
  }
})


3.custompaging.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>自己定义分页组建</title>

<!-- 引入样式，能够把ext-all.css换成ext-all-access.css |  ext-all-gray.css改变样式-->
<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
<!-- 开发模式引入ext-all-debug.js，公布模式引入ext-all.js -->
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
<!-- 语言包 -->
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>
<!-- 引入自己定义分页 -->
<script type="text/javascript" src="./extjs4.1/ux/CustomSizePagingToolbar.js"></script>

<script type="text/javascript">
  Ext.onReady(function() {
    Ext.QuickTips.init();//高速提示初始化
    Ext.Loader.setConfig({
      paths : {
        "Ext.ux" : "extjs4.1/ux"//文件载入路径(Ext.ux=extjs4.1/ux)
      }
    });

    // 自己定义数据模型
    var jsonpModel = Ext.define("jsonpModel", {
      extend : "Ext.data.Model",
      fields : [ {
        name : "userid",
        type : "string"
      }, {
        name : "username",
        type : "string"
      }, {
        name : "dateline",
        type : "string"
      }, {
        name : "title",
        type : "string"
      } ]
    });
    // 数据
    var myStore = Ext.create("Ext.data.Store", {
      model : "jsonpModel",
      pageSize : 10,//配置每页显示记录数
      proxy : {
        type : "jsonp",
        url : "http://www.sencha.com/forum/topics-browse-remote.php",
        reader : {
          totalProperty : "totalCount",
          root : "topics"
        }
      },
      // 自己主动载入数据
      autoLoad : true
    });

    // 表格
    var myGrid = new Ext.grid.Panel({
      columns : [ {
        xtype : "rownumberer",
        text : "行号",
        width : 30
      }, {
        text : "用户id",
        dataIndex : "userid"
      }, {
        text : "用户姓名",
        dataIndex : "username"
      }, {
        text : "时间线",
        dataIndex : "dateline"
      }, {
        text : "标题",
        dataIndex : "title"
      } ],
      store : myStore,
      bbar : Ext.create("Ext.ux.CustomSizePagingToolbar", {// 在表格底部 配置分页
        displayInfo : true,
        store : myStore
      })
    });

    // 窗体
    var window = Ext.create("Ext.window.Window", {
      title : "学生成绩表",
      width : 600,
      height : 400,
      items : myGrid,
      layout : "fit"
    });
    window.show();
  });
</script>

</head>

<body>
  <br> 自己定义分页组件
</body>
</html>