ExtJs 下拉菜单分页工具插件 代码分析

时间:2023-03-09 06:42:35
ExtJs 下拉菜单分页工具插件 代码分析
ExtJs 下拉菜单分页工具插件 代码分析

ExtJs 下拉菜单分页工具插件 代码分析
 Ext.ns("Ext.ux");
//创建插件对象
Ext.ux.PageSizePlugin = function(){
//调用父对象的构造方法,并为此插件生成一个预定义store的下拉菜单
Ext.ux.PageSizePlugin.superclass.constructor.call(this,{
store : new Ext.data.SimpleStore({
fields : ['text','value'],
data : [['10',10],['20',20],['30',30],['40',40],['50',50]]
}),
mode : 'local' ,
displayField : 'text' ,
valueField : 'value' ,
editable : false ,
allowBlank : false ,
triggerAction : 'all' ,
width : 60
})
}
//插件继承ComboBox
Ext.extend(Ext.ux.PageSizePlugin ,Ext.form.ComboBox ,{
//插件必须调用的方法(或者说插件唯一自动调用的方法)
init : function(paging){//paging是PageSizePlugin插件所在组件的对象(PaggingToolbar)
paging.on('render',this.onInitView,this);//为PaggingToolbar定义渲染之后调用的方法,以及指定该方法的作用域为ComboBox
},
onInitView : function(paging){
paging.add('-',
this ,
'条/页'
);
this.setValue(paging.pageSize);//设置ComboBox的值
this.on('select',this.onPageSizeChanged,paging);//为ComboBox定义选择下拉菜单后调用的方法,以及指定该方法的作用域为PaggingToolbar
},
onPageSizeChanged : function(combo){
this.pageSize = parseInt(combo.getValue());
//compage = parseInt(combo.getValue()); this.doLoad(0);//PaggingToolbar调用私有方法加载数据,参数0为start
}
}) //一点思考:调用父对象的构造方法 完全可以写在init方法的第一行,这样写不容易打断自己的思路,然而这样写会显得比较乱,代码不清晰。
//从代码执行顺序上考虑:插件所在的组件找到这个插件后,会先创建插件对象并继承父对象,然后再调用插件的init方法