extjs_09_自訂分頁組件，extjs_09分頁組件
Ext.define("Ext.ux.CustomSizePagingToolbar", {// 定義的名字要和檔案的名字大小寫一樣extend : "Ext.toolbar.Paging",alias : "widget.custompaging",// 別名beforSizeText : "每頁",afterSizeText : "條",getCustomItems : function() {var me = this;// 自訂customComStorevar customComStore = Ext.create("Ext.data.JsonStore", {fields : [ "customPageSize" ],data : [ {customPageSize : "10"}, {customPageSize : "20"}, {customPageSize : "50"}, {customPageSize : "100"} ]})// 自訂customComboBoxvar 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);// 初始化賦值}})
<%@ 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>
Ext.create('Ext.data.Store', { fields: ['1','2','3'], pageSize: 16, proxy: { type: 'ajax', url: 'xxx', extraParams: { //方法1，在這裡添加額外參數，這個，呃，實測時參數多了會是失效 type: type }, reader: { type: 'json', root: 'xxx', totalProperty: 'xxx' } }, listeners: { beforeload: function(s) { //方法2，添加監聽事件 Ext.apply(s.proxy.extraParams, { type: type }); } } });
aspnet裡面自訂分頁控制項的時怎添加一個事件
在設計自訂分頁控制項的時候，在分頁控制項類中定義一個當頁碼改變時觸發的事件。在類中判斷事件是否被外部註冊，如果登入，則將事件的處理交給事件註冊者。
public event EventHandler<PagerEventArgs> OnPagerChanged;
//判斷
if (OnPagerChanged!=null)
{
OnPagerChanged(this,new PagerEventArg {CurrentPageIndex=0});
}
public class PagerEventArgs:EventArgs
{
public Int32 CurrentPageIndex {get;set;}
}
//使用自訂分頁控制項的頁面中，註冊PagerChanged事件
MyPager1.OnPagerChanged+=new EventHandler<PagerEventArgs>(MyPager1_PagerChanged);
//回調
protected void MyPager1_PagerChanged(Object sender,PagerEventArgs e)
{
//重新綁定資料
}
註：有些地方可能不妥，思路大體是這樣
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
