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为面向对象开发系统的产品进行说明.可视化. ...
随机推荐
- 函数————count
count和count_if函数是计数函数,先来看一下count函数:count函数的功能是:统计容器中等于value元素的个数. count(first,last,value); first是容器的 ...
- paper 138：qt安装及问题解决
学习了很久的QT,遇到很多很多的问题,下面总结一下安装过程中遇到的问题吧, 1 下载QT 1)进入官网:https://www.qt.io/ 2)点击Download:https://www.qt.i ...
- 实验吧关于隐写术的writeUp（二）
0x01 Black Hole 1.下载文件后,发现打不开,放到kali中.用命令file 分析一下文件 root@trial:~/Documents# file blackhole.img blac ...
- 【转】开源框架是如何通过JMX来做监控的(一) - JMX简介和Standard MBean
原文链接:https://www.cnblogs.com/trust-freedom/p/6842332.html#autoid-0-0-0 相信很多做Java开发的同学都使用过JDK自带的 jcon ...
- 高水线 High water mark(HWM)
所有的Oracle表都有一个容纳数据的上限(很像一个水库历史最高的水位),我们把这个上限称为“High water mark"或HWM.这个HWM是一个标记(专门有一个数据块来记录高水标记等 ...
- 74HC AHCT LS LV ABT区别
1. 含义 2. 74AHC 74AHCT 74LV 74LS 2.1 解释 AHC与AHCT均是先进的高速的CMOS器件,但是供电电压范围不同,输入的逻辑电平也不同. LV是低压版,当自身供电电压为 ...
- 人工智能-动物识别专家系统算法Python + Pyqt 实现
一.基础知识库 有毛发 哺乳动物 - 有奶 哺乳动物 - 有羽毛 鸟 - 会飞 会下蛋 鸟 - 吃肉 食肉动物 - 有犬齿 有爪 眼盯前方 食肉动物 - 哺乳动物 有蹄 有蹄类动物 - 哺乳动物 反刍 ...
- mysql三种连接方式
sql四种连接方式demo: 表a 表b a.id与b.parent_id有关系 1.内连接:SELECT a.*,b.* from a INNER JOIN b ON a.id=b.parent_i ...
- Eureka 系列（05）消息广播（上）：消息广播原理分析
Eureka 系列(05)消息广播(上):消息广播原理分析 [TOC] 0. Spring Cloud 系列目录 - Eureka 篇 首先回顾一下客户端服务发现的流程,在上一篇 Eureka 系列( ...
- 免费开源的获取代理ip项目
地址:https://github.com/awolfly9/IPProxyTool 根据教程获取ip,项目使用Python语言写的,正好可以让前些日子学了点Python皮毛的我长长见识: ip都是会 ...