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为面向对象开发系统的产品进行说明.可视化. ...
随机推荐
- Cisco基础(四)：配置标准ACL、配置扩展ACL、配置标准命名ACL、配置扩展命名ACL
一.配置标准ACL 目标: 络调通后,保证网络是通畅的.同时也很可能出现未经授权的非法访问.企业网络既要解决连连通的问题,还要解决网络安全的问题. 配置标准ACL实现拒绝PC1(IP地址为192.16 ...
- tp3.2控制器返回时关闭子窗口刷新父页面
我的项目操作都是在子页面弹窗中执行,当我操作成功或失败时,都要关闭当前子窗口,刷新父页面: $this->assign('jumpUrl',"javascript:window.par ...
- [NOIP模拟测试34]反思+题解
不要陷入思维定势,如果长时间没有突破就要考虑更改大方向. 不要把简单问题复杂化. 做完的题就先放下,不管能拿多少分.不能过一段时间就回来调一下. $Solutions:$ A.次芝麻 因为$n+m$始 ...
- SQL语句映射文件(2)增删改查、参数、缓存
2.2 select 一个select 元素非常简单.例如: <!-- 查询学生,根据id --> <select id="getStudent" paramet ...
- MySQL 表的创建、修改、删除
1.创建表 create table 表名 ( 列名 类型 是否可以为空 列名 类型 是否可以为空 ) engine=innodb default charset=utf8; 是否可以为控制.null ...
- ABP的新旧版本
新版本 https://abp.io/documents/abp/latest/Index https://github.com/abpframework/abp ABP is an open sou ...
- Java 线程基础
Java 线程基础
- C#基本语法1 ----> 实例
| 版权声明:本文为博主原创文章,未经博主允许不得转载. ///////////////////////////////////////////////////////////////////// ...
- python面试题之如何用Python找出你目前在哪个目录？
>>> import os >>> os.getcwd() 'C:\Users\lifei\AppData\Local\Programs\Python\Python ...
- 18-vim-插入命令
在vi中除了常用的i进入编辑模式外,还提供了以下命令同样可以进入编辑模式: 命令 英文 功能 使用频率 i insert 在当前字符前插入文本 常用 I insert 在行首插入文本 较常用 a ap ...