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方法
ExtJs 下拉菜单分页工具插件 代码分析的更多相关文章
- Easyui表单,文本框,下拉菜单三级联动练习代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- (JavaScript插件——下拉菜单)
前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html 本文主要来学习一下JavaScrip ...
- 初学者--bootstrap(六)组件中的下拉菜单----在路上(10)
组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...
- Bootstrap3系列:按钮式下拉菜单
1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...
- [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项,若有重置再提示
今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...
- 纯css实现横向下拉菜单
自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...
- 下拉菜单;手风琴;九宫格的Jquery的使用实例
下拉菜单;手风琴;九宫格的Jquery的使用实例 1.下拉菜单 效果如图: 代码如下: <!DOCTYPE html> <html lang="en"> & ...
- zTree插件之多选下拉菜单代码
zTree插件之多选下拉菜单代码 css和js <!--ztree树结构--> <link rel="stylesheet" type="text/cs ...
- Bootstrap 下拉菜单和滚动监听插件
一.下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
随机推荐
- 9、四大组件之四-Broadcast Receiver
课程目标: 了解Android消息机制 掌握Broadcast发送消息的两种类型 掌握BroadcastReceiver接收消息的编程 重点难点: sendOrderedBroadcast()的理解 ...
- HDU 5690 All X 暴力循环节
分析:暴力找循环节就好了 #include <iostream> #include <cstdio> #include <cstdlib> #include < ...
- shell获取db信息及上传下载操作
这个脚本是获取目标机器的db信息和os信息的.os信息很好获取,db的信息包含db名字,db版本以及所有的db instance,db信息的获取稍显复杂,下面是整个脚本代码: 关键字: awk, se ...
- 【译】 AWK教程指南 6在AWK程序中使用Shell命令
awk程序中允许调用Shell指令,并提供管道解决awk与系统间数据传递的问题.所以awk很容易使用系统资源,读者可利用这个特点来编写某些适用的系统工具. 范例:写一个awk程序来打印出线上人数. 将 ...
- 【整理】C++虚函数及其继承、虚继承类大小
参考文章: http://blog.chinaunix.net/uid-25132162-id-1564955.html http://blog.csdn.net/haoel/article/deta ...
- HDU 1698 Just a Hook 区间更新 lazy标记
lazy标记 #include <iostream> #include <cstdio> #include <cstring> #include <sstre ...
- acm数据结构整理
一.区间划分 //区间划分+持久化并查集:区间连通情况统计. inline bool comp(Ask x, Ask y){return x.km == y.km ? x.l > y.l : x ...
- ACCESS-类型转换函数
类型转换涵数: 函数 返回类型 expression 参数范围 CBool Boolean 任何有效的字符串或数值表达式. CByte Byte 0 至 ...
- ASP.NET SignalR2持久连接层解析
越是到年底越是感觉浑身无力,看着啥也不想动,只期盼着年终奖的到来以此来给自己打一针强心剂.估摸着大多数人都跟我一样犯着这样浑身无力的病,感觉今年算是没挣到啥钱,但是话也不能这么说,搞得好像去年挣到钱了 ...
- Javascript注意事项一【防止浮点数溢出】
num = 0.1+0.2; //0.30000000000000004 a = (1+2)/10; //0.3(浮点数中的整数运算时精确的)