ExtJs 2.2 重写或隐藏PagingToolbar的刷新按钮

来源：互联网发布：windows 查看内存频率编辑：程序博客网时间：2024/06/05 08:03

重写分页控件中的刷新方法：

在ext-all.js源码中关于

PagingToolbar是这样定义刷新按钮的，刷新图标实际是定义的一个button：

this.loading=this.addButton({tooltip:this.refreshText,iconCls:"x-tbar-loading",handler:this.onClick.createDelegate(this,["refresh"])});

其中定义了点击刷新时的处理方法是handler的方法，然后handler又调用了onClick方法，

再来看onClick方法的实现：

onClick:function(E){

var B=this.store;switch(E){

case"first":this.doLoad(0);break;

case"prev":this.doLoad(Math.max(0,this.cursor-this.pageSize));break;

case"next":this.doLoad(this.cursor+this.pageSize);break;

case"last":var D=B.getTotalCount();var A=D%this.pageSize;var C=A?(D-A):D-this.pageSize;this.doLoad(C);break;

case"refresh":this.doLoad(this.cursor);break

}

},

PagingToolbar 定义了好多个按钮，点击都会去执行上面的okClick方法，在该方法的实现代码中通过传递的参数来判断（switch）究竟执行的是哪个方法，而刷新按钮传递的是refresh，执行的就是case的最后一个this.doLoad(this.cursor); this代表当前定义的PagingToolbar，cursor代表当前页面处于的页码（避免了每次刷新都取的是第一页的数据）。

我们要重写刷新按钮的方法有两种方式（主要看方式2）：

方式1：修改源代码，将case"refresh"后面的实现改掉，我们也可以通过这种方式重写其他的几个点击方法

这种方式会将所有页面的刷新按钮都重写了，如果只想重写某个页面中某一个刷新按钮可以采用以下方式2：

方式2：针对于每个页面中定义的PagingToolbar，重写点击刷新时的handler方法，具体实现方式：

（1）定义PagingToolbar

var pagebar = new Ext.PagingToolbar({

pageSize: 20,

store: goodsStore,

displayInfo: true,

});

（2）在GridPanel引用pagebar

myGrid = new Ext.grid.GridPanel({

id:'goodsGrid',

loadMask: {msg:'<bean:message bundle="common" key="js.message.loading"/>'},

trackMouseOver:true,

sm: goodsListSm,

stripeRows:true,

store: myStore,

title: '账号管理',

autoExpandColumn:'colName',

autoExpandMin:180,

columns: [

goodsListSm,

new Ext.grid.RowNumberer({width:30}),

{header: '名称', width: 100, dataIndex: 'providerid', sortable: true,renderer:showprovider},

],

iconCls:'icon_grid',

tbar:[

{

xtype:'tbtext',

text:'名称:'

},{

xtype:'textfield',

id:'query_goodsname',

width:90,

listeners:{

specialkey:function(field,e){

if(e.getKey()==13) to_query();

}

}

}],

bbar: pagebar,//引用上面定义的PagingToolbar

listeners:{

render:function(){

//在此处重写PagingToolbar的刷新方法

pagebar.loading.handler = function(){

//在这个地方实现自己需要的业务逻辑，然后在执行下面的语句调用doLoad重新刷新加载数据

........

pagebar.doLoad(pagebar.cursor);

};

}

}

});

(3) render:function重写handler方法（颜色标注的地方）

如果想把PagingToolbar的刷新按钮直接隐藏掉可以将上面重写handler方法的地方换成隐藏的代码：

render:function(){
pagebar.loading.setVisible(false);
}

这样刷新按钮就被隐藏了。

注意以上用的ExtJS的版本是2.2，以后的版本像ExtJS3PagingToolbar的刷新按钮就不叫loading了，而是改成了‘refresh’，修改的时候需要注意下ExtJS的版本。

例如Ext3.4中刷新按钮的定义：

this.refresh=new a.Button({tooltip:this.refreshText,overflowText:this.refreshText,iconCls:"x-tbar-loading",handler:this.doRefresh,scope:this})

0 0