ExtJs之Ext.grid.GridPanel（部分未完）
今天在家休息，年假不用就作费啊。
看了几部香港老电影，陪爸爸看了勇士占奇才，
然后，测试了一下EXTJS未完的内容，
在京东上订了七本历史普及书，近两百块。。：）
搞定。
<!DOCTYPE html>
<html>
<head>
<title>ExtJs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script type="text/javascript" src="ExtJs/bootstrap.js"></script>
<script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<style type="text/css">
#uses the following css:
.red-row{ background-color: #F5C0C0 !important; }
.yellow-row{ background-color: #FBF8BF !important; }
.green-row{ background-color: #99CC99 !important; }
</style>
<script type="text/javascript">
Ext.onReady(function(){
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>";
}
};
function rendererDescn(value, cellmeta, record, rowIndex, columnIndex, store){
var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +
"这个单元格的值为: " + value + "\\n" +
"这个单元格的配置是: {cellID" + cellmeta.cellID + ", id: " + cellmeta.id + ", css: " + cellmeta.css + "}\\n" +
"这个单元格对应的record是： " + record + ", 一行里的数据都在里边\\n" +
"这是第" + rowIndex + "行\\n" +
"这是第" + columnIndex + "列\\n" +
"这个表格对应的Ext.data.Store在这里： " + store + "， 随便用吧." +
"\")'>"
return str;
}
function rendererMotif(data, cell, record, rowIndex, columnIndex, store) {
var value = record.get('color');
cell.style = "background-color: " + value;
return data;
}
var sm = new Ext.selection.CheckboxModel({stringSelect: true});
var columns =[
new Ext.grid.RowNumberer(),
{header: '编号', dataIndex: 'id', width:80, sortable: false},
{header: '名称', dataIndex: 'name', width:180},
{header: '性别', dataIndex: 'sex', renderer: rendererSex, width:120},
{header: '日期', dataIndex: 'date', renderer: Ext.util.Format.dateRenderer('Y-m-d'), width:400},
{header: '描述', dataIndex: 'descn', renderer: rendererDescn, width:200},
{header: 'color', dataIndex: 'color', renderer: rendererMotif, width:200}
];
var data = [
['1', 'name1', 'male', '2017-01-15T02:58:04', 'descn1', '#FBF8BF'],
['2', 'name2', 'female', '2005-01-15T02:58:04', 'descn2', '#F5C0C0'],
['3', 'name3', 'male', '2017-06-15T02:58:04', 'descn3', '#99CC99'],
['4', 'name4', 'female', '2017-01-09T02:58:04', 'descn4', '#FBF8BF'],
['5', 'name5', 'male', '2017-12-15T02:58:04', 'descn5', '#F5C0C0']
];
var store = new Ext.data.ArrayStore({
data: data,
fields: [
{name: 'name', mapping: 1},
{name: 'sex', mapping: 2},
{name: 'id', mapping: 0},
{name: 'date', type: 'date', dateFormat: 'Y-m-dTH:i:s', mapping: 3},
{name: 'descn', mapping: 4},
{name: 'color', mapping: 5}
]
});
/*
var store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({url: 'source.html'}),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
]),
fields: [
{name: 'name', mapping: 1},
{name: 'id', mapping: 0},
{name: 'descn', mapping: 2}
]
});
*/
store.load();
var grid = new Ext.grid.GridPanel({
enableColumnMove: false,
enableColumnResize: true,
stripeRows: true,
autoHeight: true,
loadMask:true,
forceFit: true,
renderTo: 'grid',
store: store,
columns: columns,
selModel: sm,
bbar: new Ext.PagingToolbar({
pageSize: 3,
store: store,
displayInfo: true,
displayMsg: '显示第{0} 条到 {1}条记录， 一共{2}条',
emptyMsg: '没有记录'
}),
viewConfig: {
enableRowBody: true,
columnsText: '显示的列',
sortAscText: '升序',
getRowClass: function(record, rowIndex, p, ds) {
var cls = 'white-row';
switch (record.data.color) {
case '#FBF8BF' :
cls = 'yellow-row';
break;
case '#99CC99' :
cls = 'green-row';
break;
case '#F5C0C0' :
cls = 'red-row';
break;
}
return cls;
}
}
});
Ext.get('remove').on('click', function(){
store.remove(store.getAt(1));
grid.view.refresh();
})
var tree = new Ext.tree.TreePanel({
store: new Ext.data.TreeStore({
root: {
text: '我是根',
children: [{
text: '我是根的第一个枝子',
children: {
text: '我是根的第一个枝子的第一个叶子',
leaf: true
}
},{
text: '我是根的第一个叶子',
leaf: true
}]
}
})
});
tree.render('tree');
});
</script>
</head>
<body style="margin: 20px">
<div id='grid' style="width: 800px"></div>
<button id='remove'>删除第二行</button>
<div id="tree"></div>
</body>
</html>
ExtJs之Ext.grid.GridPanel（部分未完）的更多相关文章
- ExtJs的Ext.grid.GridPanel不能选择复制表格中的内容解决方案
今天遇到grid复制的问题,在网上找到了一个解决办法,只需改下CSS和JS,给大家分享一下: 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/dy_paradise/a ...
- 【编程技巧】EXTJS中Ext.grid.GridPanel配置项autoExpandColumn的使用方法
autoExpandColumn的作用是自动伸展,占满剩余区域.一般使用在列比较少,并且大多数列都比较窄,有一列比较宽的情况下,当然什么时候使用,还是得按照实际情况确定. 使用的时候主要有三点要注意的 ...
- Ext.grid.GridPanel属性及方法等
1.Ext.grid.GridPanel主要配置项:store:表格的数据集columns:表格列模式的配置数组,可自动创建ColumnModel列模式autoExpandColumn:自动充满表格未 ...
- Ext.grid.GridPanel的属性
1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模 ...
- [Extjs] Ext4 Ext.grid.Panel 分页实现（mybatis 分页插件-PageHelper 使用）
先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...
- Ext.grid.GridPanel数据转json
var count = docAdGrid.getStore().getCount(); var jsonArray = []; for (var i = 0; i < count; i++) ...
- ExtJs4.2.1中的Ext.grid.GridPanel选择行回车事件
网上大多说的是“rowdblclick” 其实是“itemdblclick” 这个东西坑了我一上午.
- [转] Ext Grid （ExtJs）上的单击以及双击事件
例1: 1.双击 var cb = new Ext.grid.RowSelectionModel({ singleSelect:true //如果值是false,表明可以选择多行:否则只能选择一行 } ...
- Ext4.0.7使用Ext.grid.ColumnModel报错：TypeError: Ext.grid.Model is not a constructor
代码如下: Ext.onReady(function(){ //定义列 var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'i ...
随机推荐
- vim copy termi
用vim写代码时,经常遇到这样的场景,复制多行,然后粘贴. 这样做:1. 将光标移动到要复制的文本开始的地方,按v进入可视模式.2. 将光标移动到要复制的文本的结束的地方,按y复制.此时vim会自动将 ...
- 辨异 —— Java 中 String 的相等性比较
How do I compare strings in Java? 1. 语法知识 ==:判断的是引用的相等性(reference equality),也即是否为同一对象: .equals():判断的 ...
- bzoj 1800 & 洛谷 P2165 [AHOI2009]飞行棋 —— 模拟
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1800 https://www.luogu.org/problemnew/show/P21 ...
- Java压缩技术（三） ZIP解压缩——Java原生实现
原文:http://snowolf.iteye.com/blog/642492 JavaEye的朋友跟我说:“你一口气把ZIP压缩和解压缩都写到一个帖子里,我看起来很累,不如分开好阅读”.ok,面向读 ...
- [Apple开发者帐户帮助]三、创建证书（7）创建证书签名请求
Mac上的Keychain Access允许您创建证书签名请求(CSR). 启动位于的Keychain Access /Applications/Utilities. 选择Keychain Acces ...
- 离线安装 Rancher2.2.4 HA 集群
一.先决条件(所有主机执行) 1.1 基础设置 1.安装基础软件 yum install -y vim net-tools wget lrzsz 2.防火墙 sed -i 's/SELINUX=enf ...
- web 应用
一.web应用 web应用程序是一种可以通过web访问的应用程序,程序 的最大好处是用户很容易访问应用程序,用户只需要有浏览器 即可,不需要安装其他团建,用用程序有两种模式C/S.B/S.C/S是客户 ...
- Struts2 在登录拦截器中对ajax请求的处理
前言: 由于ajax请求不像http请求,可以直接进行页面跳转,你返回的所有东西,ajax都只会识别为一个字符串. 之前尝试的方法是在拦截器中返回一个标识给ajax,然后再在每一个ajax请求成功之后 ...
- OpenCV:OpenCV目标检测Boost方法训练
在古老的CNN方法出现以后,并不能适用于图像中目标检测.20世纪60年代,Hubel和Wiesel( 百度百科 )在研究猫脑皮层中用于局部敏感和方向选择的神经元时发现其独特的网络结构可以有效地降低反馈 ...
- 三维重建：SLAM的尺度和方法论问题
百度百科的定义.此文引用了其他博客的一些图像,如有侵权,邮件联系删除. 作为算法的SLAM,被称为同步相机位姿确定和地图构建.作为一个工程的SLAM,有众多的算法. 在计算机视觉中, 三维重建是指根据 ...