Ext 行模型与Grid视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十九章：Ext 表格组件</title>
<link rel="stylesheet" href="src/ext/resources/css/ext-all.css"> <!--ext-base 必须在ext-all之前引入-->
<script src="src/ext/ext-base.js"></script>
<script src="src/ext/ext-all.js"></script>
<!--<script src="src/ext/ext-lang-zh_CN.js"></script>-->
<style> </style>
</head>
<body> <div id="e"> </div> <script>
Ext.onReady(function () {
// 列模型 // 自定义序列号
Ext.grid.RowNumberer.prototype = {
header: '',
width: 23,
sortable: false,
fixed: true,
menuDisabled: true,
dataIndex: '',
id: 'numberer',
rowspan: undefined,
renderer: function (v, p, record, rowIndex) {
if (this.rowspan) {
p.cellAttr = 'rowspan=' + this.row.span;
}
return rowIndex + 1;
},
}; // 创建一个Ext.grid.CheckboxSelectionModel对象
var sm = new Ext.grid.CheckboxSelectionModel(); // 显示序号
var cm = new Ext.grid.ColumnModel([
// 调用序列号函数
new Ext.grid.RowNumberer(),
sm,
{
header: '姓名',
width: 80,
dataIndex: 'Name',
tooltip: '这是您的姓名',
},
{
header: '性别',
width: 40,
dataIndex: 'Sex',
align: 'center',
renderer: function (v) {
if (v === '男') {
return '<img src="src/ext/resources/images/default/dd/drop-yes.gif">';
} else {
return '<img src="src/ext/resources/images/default/dd/drop-no.gif">';
}
},
},
{
header: '生日',
width: 150,
format: 'Y-m-d',
dataIndex: 'Birthday',
renderer: Ext.util.Format.dateRenderer('Y-m-d'),
},
{
header: '学历',
width: 80,
dataIndex: 'Education',
align: 'center',
},
{
id: 'memo',
header: '备注',
dataIndex: 'Memo',
},
{
header: '操作',
width: 150,
dataIndex: '',
menuDisabled: true,
renderer: function (v) { return '<span style="margin-right: 10px"><a href="#">修改</span><span ><a href="#">删除</span>';
},
},
]); var data = [
{
name: '小李',
sex: '男',
birthday: Date.parseDate('1979-04-11', 'Y-m-d'),
edu: '本科',
memo: '无备注',
}, {
name: '小陈',
sex: '男',
birthday: Date.parseDate('1979-04-11', 'Y-m-d'),
edu: '本科',
memo: '一个小帅哥',
}, {
name: '小易',
sex: '女',
birthday: Date.parseDate('1979-04-11', 'Y-m-d'),
edu: '本科',
memo: '无备注',
}, {
name: '小军',
sex: '男',
birthday: Date.parseDate('1980-12-11', 'Y-m-d'),
edu: '本科',
memo: '最帅老师',
}]; // Proxy
var proxy = new Ext.data.MemoryProxy(data); // Record 定义记录结果
var Human = Ext.data.Record.create([
{
name: 'Name',
type: 'string',
mapping: 'name',
},
{
name: 'Sex',
type: 'string',
mapping: 'sex',
},
{
name: 'Birthday',
type: 'string',
mapping: 'birthday',
},
{
name: 'Education',
type: 'string',
mapping: 'edu',
},
{
name: 'Memo',
type: 'string',
mapping: 'memo',
},
]); // Reader
var reader = new Ext.data.JsonReader({}, Human); // Store
var store = new Ext.data.Store({
proxy: proxy,
reader: reader,
}); // 立即加载
store.load(); var tbar = new Ext.Toolbar({
buttons: [
{
text: '添加到首行',
icon: 'src/ext/resources/images/default/dd/drop-add.gif',
handler: function () {
var view = grid.getView();
// 添加一个数据
var obj = {
Name: '新人物',
Sex: '女',
Birthday: Date.parseDate('1980-05-12', 'Y-m-d'),
Education: '本科',
Memo: '是新的',
}; var human = new Human(obj);
grid.getStore().insert(0, human); // 添加到行首，修改第一个参数可以添加到任何位置
view.refresh();
},
},
{
text: '添加到尾行',
icon: 'src/ext/resources/images/default/dd/drop-add.gif',
handler: function () {
var view = grid.getView();
// 添加一个数据
var obj = {
Name: '新人物',
Sex: '女',
Birthday: Date.parseDate('1980-05-12', 'Y-m-d'),
Education: '本科',
Memo: '是新的',
}; var human = new Human(obj);
grid.getStore().add(human); // 添加到行首，修改第一个参数可以添加到任何位置
view.refresh();
},
},
{
text: '删除选定行',
icon: 'src/ext/resources/images/default/dd/drop-no.gif',
cls: 'x-btn-text-icon',
handler: function () {
var rsm = grid.getSelectionModel();
var view = grid.getView();
var store = grid.getStore();
for (var i = view.getRows().length - 1; i >= 0; i--) {
if (rsm.isSelected(i)) {
store.remove(store.getAt(i));
}
}
view.refresh()
},
},
{
text: '删除所有',
icon: 'src/ext/resources/images/default/dd/drop-no.gif',
cls: 'x-btn-text-icon',
handler: function () {
var rsm = grid.getSelectionModel();
var view = grid.getView();
var store = grid.getStore();
store.removeAll()
view.refresh()
},
}
]
})
var bbar = new Ext.Toolbar({
buttons: [
{
text: '当前数据',
handler: function () {
var view = grid.getView();
var rsm = grid.getSelectionModel(); // 得到行选择模型
var r = '';
for (var i = 0; i < view.getRows().length; i++) {
if (rsm.isSelected(i)) {
// 找到选中的行
r += grid.getStore().getAt(i).get('Name') + '<br/>';
}
} Ext.Msg.alert('选择', '您选择的数据有：<br>' + r);
},
},
{
text: '第一行',
handler: function () {
// 得到行选择模型 Ext.grid.CheckboxSelectionModel
var rsm = grid.getSelectionModel();
rsm.selectFirstRow();
},
},
{
text: '上一行',
handler: function () {
var rsm = grid.getSelectionModel(); // 得到行选择模型
// 判断是否有上一行
if (!rsm.hasPrevious()) {
Ext.Msg.alert('警告', '已到达第一行');
} else {
// 选择上一行
rsm.selectPrevious();
}
},
},
{
text: '下一行',
handler: function () {
var rsm = grid.getSelectionModel();
if (!rsm.hasNext()) {
Ext.Msg.alert('警告', '已到达最后一行');
} else {
rsm.selectNext();
}
},
},
{
text: '最后一行',
handler: function () {
var rsm = grid.getSelectionModel();
rsm.selectLastRow();
},
},
{
text: '全选',
handler: function () {
var rsm = grid.getSelectionModel();
rsm.selectAll();
},
},
{
text: '全不选',
handler: function () {
var rsm = grid.getSelectionModel();
console.log(grid.getView().getRows().length);
rsm.deselectRange(0, grid.getView().getRows().length - 1);
},
},
{
text: '反选',
handler: function () {
var rsm = grid.getSelectionModel();
for (var i = grid.getView().getRows().length - 1; i >= 0; i--) {
if (rsm.isSelected(i)) {
rsm.deselectRow(i);
} else {
rsm.selectRow(i, true); // 必须保留原来的，否则效果无法实现
}
}
},
}
],
})
var grid = new Ext.grid.GridPanel({
title: '中国公民',
height: 400,
cm: cm,
sm: sm,
store: store,
renderTo: Ext.getBody(),
autoExpandColumn: 'memo', // 自动伸展，占满剩余区域
buttonAlign: 'center',
buttons : bbar,
tbar : tbar
}); }); </script> </body>
</html>
Ext 行模型与Grid视图的更多相关文章
- C#-MVC基础-模型(Model)、视图(View)和控制器(Controller)
搜狗百科:http://baike.sogou.com/v25227.htm?fromTitle=MVC MVC全名是Model View Controller,是软件工程中的一种软件架构模式,把软件 ...
- Spring MVC 之传递模型数据到视图中
类似于 JSP-Servlet 中的 req.setAttribute . req.getSession().setAttribute ... --> 最后在 JSP 用 EL 表达式取得这些数 ...
- ext js 4.0 grid表格根据列值的不同给行设置不同的背景颜色
Code: Ext.create('Ext.grid.Panel', { ... viewConfig: { getRowClass: function(record) { return record ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 中等难度SQL语句（存储过程，分页，拼接字段、游标,日期类型转换，动态行转列，视图）汇总
一.创建存储过程 if Exists(select name from sysobjects where NAME = 'sp1LoginUser' and type='P')drop procedu ...
- ExtJS学习(二)Ext组件模型
Ext中所有的组件都继承自Ext.component,这种单根继承的模型保证所有组件都拥有相同的通用方法与生命周期,这样在后续对这些组件进行维护管理时将更加便捷,同时也保证了在进行布局时的便利. 组件 ...
- Ext 行统计有意思的实现.(js对象的循环, ext列的设置)
考勤界面, 列包含日期. 行的数据格式: 需要实现 编辑一列然后在最后产生的统计的效果. 行数据内容. Gird Load 的时候统计数据: -- 根据对象. 可以Ext.Date.parse 成 ...
- 中介模型，cbv视图，和查询优化
中介模型: 处理类似搭配 pizza 和 topping 这样简单的多对多关系时,使用标准的ManyToManyField 就可以了.但是,有时你可能需要关联数据到两个模型之间的关系上. 例如,有这 ...
- 浅谈UML的概念和模型之UML视图
相信大家都知道UML的全称,统一建模语言(UML是 Unified Modeling Language的缩写)是用来对软件系统进行可视化建模的一种语言.UML为面向对象开发系统的产品进行说明.可视化. ...
随机推荐
- 高精度小数BigDecimal+二分——java
高精度小数第一题 import java.util.*; import java.math.*; public class Main { public static void main(String ...
- 解析crontab php自动运行的方法
crontab是linux自带的一个命令 使php自动运行的方法php自动运行有很多方法,这里分以下DZ以及一些通过系统完成的方法和直接触发运行驻留系统的方法.Discuz后台有个计划任务,可以使ph ...
- rsync和rsync后台模式
注意(有软连接的rsync同步,-L可以把软链接里的当普通文件同步.-l 只同步软链接不同步软链接指向的目录或文件) rsync命令详解 rsync -a 归档模式 ,表示以递归方式传输文件,并保持所 ...
- docker容器管理-含静态Ip(10)
docker run命令详解 docker run -t #表示分配一个伪终端 -i #表示让容器的标准输入打开,不跟这个参数容器启不来 -d #后台运行 -P #dockerfile中EXPOSE ...
- [CSP-S模拟测试]:卡常题/b（基环树+DP）
题目描述 $ρ$有一个二分连通无向图,$X$方点.$Y$方点均为$n$个(编号为$1\sim n$).这个二分图比较特殊,每一个$Y$方点的度为$2$,一条黑色边,一条白色边.所有黑色边权值均为$a$ ...
- 82、TensorFlow教你如何构造卷积层
''' Created on 2017年4月22日 @author: weizhen ''' import tensorflow as tf #通过tf.get_variable的方式创建过滤器的权重 ...
- Linux的文件访问权限及修改权限命令chmod
http://www.linuxso.com/command/chmod.html Linux的文件访问权限及修改权限命令chmod Mxx000 Mxx000 人赞同了该文章 Linux的文件访问权 ...
- new运算符工作原理(new运算符的伪码实现)
// 只要函数创建,就有一个prototype属性// 构造函数和普通函数的区别就是调用的时候又没有用 new function Fn() { // this 就是实例化后的对象 三段式 var th ...
- java.lang
package cn.sxt; import java.lang.*; public class BooleanDemo { public static void main(Stri ...
- Windows10下运行Android Studio3.3时关于AMD处理器不支持Intel硬件加速的解决办法
我的电脑是Thinkpad E485系列,CPU是AMD Ryzen 5 2500U,电脑预装系统是Windows10 X64家庭版,如下图所示: 下载安装了Android Studio3.3,创建了 ...