Ext Js 表格(五)
来源:互联网 发布:linux系统管理员职业 编辑:程序博客网 时间:2024/06/05 12:22
表格由Ext.grid.GridPanel来定义,继承Ext.Panel。表格必须包含列定义信息,并指定表格的数据存储器。表格的列定义信息由Ext.grid.ColumnModel来定义,数据存储信息由Ext.data.Stroe(Ext.data.SimpleStore,Ext.data.JsonStore,Ext.data.GroupingStore)来定义。
类Ext.grid.GridView,GridView类是对Ext.grid.GridPanel用户界面的封装。为 产生特殊的现实效果,可以该类的一些方法来控制用户界面。注意请不要改变用户界面的DOM结构。
ColumnModel负责创建表格的列信息,表格的列信息包含首部的显示文本(header),对应的记录集字段(dataIndex),列是否可排序(sortable),列渲染函数(renderer),宽度(width),格式化(format)信息
一个完整的表格代码:
//复选框,身兼两职,既要放在ColumnModel里,又要放在GridPanel里
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), // 自动显示行号
sm, // columnmodel里
{header: "姓名",
dataIndex: "name",// 对应的记录集字段
enableColumnMove:true, // 列可以拖放
enableColumnResize:true, // 列宽度可变
width: 80, // 舍得列的宽度
sortable: true, //使列可排序
renderer: function(value){// 渲染函数(renderer函数的参数有多个,详细可以查看API文档)
if(value.length> 6){
return"<span style='color:red;'>"+value+"</span>"
}else{
return"<span style='color:blue;'>"+value+"</span>";
}
}
},
{header: "年龄",dataIndex: "age"}
]);
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:"<%=path%>/test"}),
reader: new Ext.data.JsonReader({
totalProperty: "total", // 该属性指定记录数的总数
root: "root", // 该属性指定包含所有行对象的数组
idProperty: "id" // 记录每一行对象记录id的字段(可选)
},[
{name: "id"},
{name: "name",mapping:"na_me"},
{name: "age",mapping:"a_ge"}
])
});
var grid = new Ext.grid.GridPanel({
renderTo: "grid",
cm: cm,
sm: sm,
store: store,
autoHeight: true,
bbar: new Ext.PagingToolbar({
pageSize:10, // 每页显示几条数据
store: store,
displayInfo: true, // 必须为ture,displayMsg才能显示
displayMsg: "显示第{0}条到第{1}条记录,一共{2}条记录",
emptyMsg: "记录为空" // 没有记录的提示信息
})
});
store.load({
params:{start: 0,limit: 10}// 从0开始,最多取10条
}); // 必须在构造表格后执行,否则分页工具将不起作用
选择模型:
grid.on("click",function(){
// 获得选择模型,通过选择模型选择当前选中的行。
var selections =grid.getSelectionModel().getSelections();
for(var i=0;i<selections.length; i++){
var record =selections[i];
Ext.Msg.alert("提示",record.data.name + "--" + record.get("age")+ "--" + record.get("id"));
}
});
表格视图:Ext.grid.GridView:
Ext.data.Store可以看做model,Ext.grid.GridPanel可以看做controller,而Ext.grid.GridView可以看做view,通常情况下不用创建GridView的实例,GridPanel可以自动创建GridView的实例,可以通过gird.getView()获取当前的实例。我们可以在创建GridPanel时,通过viewConfig参数,作为初始化参数传递给GridView。
常用参数:
forceFit: true时,表格自动延伸每列长度,使内容填充表格。
ColumnText、sortAscText、sortDescText设置每列下拉菜单中得“显示的列”、“升序”、“降序”这三个部分的显示文字。
- Ext Js 表格(五)
- Ext入门学习系列五--表格控件
- Ext Js 3.2 表格应用复选框
- Ext js 表格控制单元格高度
- EXT表格
- EXT表格
- EXT(js)教程
- 模板(Ext.js)
- 【翻译】mzPivotGrid: Ext JS的数据透视表格
- 【翻译】将Ext JS Grid转换为Excel表格
- Ext js学习笔记(二) 表格的创建
- EXT源码解析:EXT.js(一)
- EXT源码解析:EXT.js(二)
- Ext.js5的数组表格(3)
- Ext.js5的分组表格(4)
- Ext Js 3.2中表格的常见操作,主要是对表格属性的修改
- EXT JS点滴(2)EXT JS核心分析
- EXT JS点滴(3)EXT JS 事件机制
- 安装Realtek HD Audio Driver 失败
- Android腾讯微博客户端开发三:多账号管理的实现
- 多元函数微分学
- mysql的主从构架,复制,半同步,SSL加密复制的实现
- 面试题总结 - C 语言 - 位操作(bit operation)
- Ext Js 表格(五)
- 面试题总结 - C 语言 - 函数(function)
- hibernate事务的传播特性
- php面向对象你懂得
- linux 内核编程风格规范
- Android腾讯微博客户端开发四:微博发送篇(QQ表情,@搜索)
- 基于LGPL开源项目 Log4cpp安装与使用
- 没吃月饼的中秋节
- Android腾讯微博客户端开发5:利用FootView实现ListView滑动动态加载实现分页