EXTJs 表格分页
来源:互联网 发布:电视为什么连不上网络 编辑:程序博客网 时间:2024/06/01 13:53
为表格添加分页工具条
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Ext Buttons</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="../examples.js"></script><script type="text/javascript">Ext.onReady(function(){var sm = new Ext.grid.CheckboxSelectionModel();var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),//自动显示行号sm,//复选框{hearder:'编号',dataIndex:'id',sortable:true},//每一行对应表格的一列{header:'姓名',dataIndex:'name'},{header:'性别',dataIndex:'sex',renderer:rendererSex},{header:'描述',dataIndex:'descn'},{header:'生日',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}//日期类型需要特别注意]);function rendererSex(value){if(value == 'male'){return "<span style = 'color:red;font-weight:bold'>男</span>";}else{return "<span style = 'color:green;font-weight:bold'>女</span>";}}var data = [['1','小斯','male','descn','1990-01-15T03:34:18'],['2','卡卡','female','descn','1990-01-15T03:34:18'],['3','c罗','male','descn','1990-01-15T03:34:18'],['4','梅西','female','descn','1990-01-15T03:34:18'],['5','比利亚','male','descn','1990-01-15T03:34:18'],['6','卡卡','female','descn','1990-01-15T03:34:18'],['7','c罗','male','descn','1990-01-15T03:34:18'],['8','梅西','female','descn','1990-01-15T03:34:18'],['9','比利亚','male','descn','1990-01-15T03:34:18'],['10','卡卡','female','descn','1990-01-15T03:34:18'],];//var cm = new Ext.grid.ColumModel(...) 负责创建表格的列信息//header:首部显示文本//dataIndex:列对应的记录集字段//sortable:是否可排序//renderer:渲染函数//format列格式化信息/*数据存储器Store*/var store = new Ext.data.Store({proxy:new Ext.data.MemoryProxy(data),reader:new Ext.data.ArrayReader({},[{name:'id'},{name:'name'},{name:'sex'},{name:'descn'},{name:'date',type:'date',dateformat:'Y-m-dTH:i:s'}//显示日期类型数据,同时还需要在cm里进行配置]),sortInfo:{field:"name",direction:"ASC"}//设置默认排序方式});var bbar = new Ext.PagingToolbar({pageSize:10,//每页显示几条数据store:store,//数据displayInfo:true,//是否显示数据信息displayMsg:'显示第{0}条到{1}条记录,一共{2}条',//只有displayInfo:true时才有效,用来显示有数据的提示信息。emptyMsg:"没有记录",//没有数据显示的信息});var grid = new Ext.grid.GridPanel({renderTo:'grid',//指示表格渲染到什么地方去store:store,//数据存储器cm:cm,//列定义信息sm:sm,//复选框autoHeight:true,bbar:bbar,});//如果配置了分页工具条,store.load()必须在构造表格以后执行store.load();});</script></head><body><div id = "grid"></div></body></html>
- EXTJs 表格分页
- EXTJs 表格分页
- Extjs-表格 Ext.grid.GridPanel 分页------------------------------------------------
- 利用ExtJs中的Ext.PagingToolbar做表格分页的例子
- (24)ExtJS之表格加载远程数据及其分页显示
- ExtJs表格
- extjs表格
- extjs分页
- extjs分页
- ExtJs分页
- ExtJs分页
- Extjs分页
- extjs分页
- 表格分页
- 表格分页
- 表格分页
- 表格分页
- 【ExtJs】与后台数据库交互的带分页表格组件grid的查询
- VC 创建托盘,托盘tooltip。右键托盘菜单,点击别的地方会隐藏掉的问题。
- 第一天
- Linux 启动初始化(/etc/inittab,/etc/rc.d)
- rqnoj-616
- 通过Ant+Xdoclet生成Hibernate配置文件和映射文件
- EXTJs 表格分页
- Oracle 收集统计信息
- 安装Android SDK和ADT步骤和遇到的问题
- glusterfs nfs挂载
- Android Push Notification实现信息推送使用
- GIMP 一个按图片的像素点获取坐标的软件
- opencv c++函数 imgproc模块 7 给图像添加边界
- 存取球
- 网站整体变灰色