ExtJs之gridPanel的属性表格，编辑表格，表格分页，分组等技巧
这里藏的配置确实多。。
慢慢实践吧。
<!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 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;
}
var sm = new Ext.selection.CheckboxModel({stringSelect: true});
var columns =[
new Ext.grid.RowNumberer(),
{header: '编号', dataIndex: 'id', width:80, sortable: false},
{header: '名称', dataIndex: 'name', editor: {allowBlank: false}, width:180},
{header: '描述', dataIndex: 'descn', renderer: rendererDescn, width:200},
];
var store = new Ext.data.ArrayStore({
proxy: {
type: 'ajax',
url: 'source.html',
reader: {
type: 'json',
totalProperty: 'totalProperty',
root: 'root',
idProperty: 'id'
}
},
groupField: 'id',
sorter: [{property: 'id', direction: 'ASC'}],
fields: [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
]
});
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,
features: [{ftype: 'grouping'}],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
tbar: ['-',{
text: '增加一行',
handler: function(){
var p = {
id: '',
name: '',
descn: '',
};
store.insert(0, p);
}
}, '-', {
text: '删除一行',
handler: function() {
Ext.Msg.confirm('notice', 'are you sure delete?', function(btn){
if(btn == 'yes'){
var sm = grid.getSelectionModel();
var record = sm.getSelection()[0];
store.remove(record);
}
});
}
}, '-'],
bbar: new Ext.PagingToolbar({
pageSize: 30,
store: store,
displayInfo: true,
displayMsg: '显示第{0} 条到 {1}条记录， 一共{2}条',
emptyMsg: '没有记录'
})
});
store.load();
var grid2 = new Ext.grid.PropertyGrid({
title: '属性表格',
autoHeight: true,
width:300,
renderTo: 'grid2',
viewConfig: {
forceFit: true
},
source: {
'名字': '不告诉你',
'创建时间': new Date(),
'是否有效': false,
'版本号': .01,
'描述': '嗯，我也没啥可描述的'
}
});
});
</script>
</head>
<body style="margin: 20px">
<div id='grid' style="width: 800px"></div>
<div id='grid2' style="width: 800px"></div>
</body>
</html>
ExtJs之gridPanel的属性表格，编辑表格，表格分页，分组等技巧的更多相关文章
- IOS Runtime属性关联实现表格编辑文本
要实现在表格里编辑文本, 表格让我想到了CollectionView,文本让我想起TextView, 做之前想了好久怎么样来获得编辑的是哪个TextView,要获取对应的IndexPath啊,想着之前 ...
- Extjs中GridPanel的各个属性与方法
1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充 ...
- 编辑 Ext 表格（二）——— 编辑表格元素
一.编辑单元格 Ext 中通过配置表格的属性 plugins 来设置表格是否可编辑, 表格的配置具体如下: var gridTable = Ext.create('Ext.grid.Panel', { ...
- JQuery经典小例子——可编辑的表格
可编辑的表格: 屏幕剪辑的捕获时间: 2015/8/14 9:16 HTML代码为: <!DOCTYPE html> <htmlxmlns="http://www.w3.o ...
- 可编辑的表格：jQuery+PHP实现实时编辑表格字段内容
在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击“取消”按钮,则页面恢 ...
- JAVAEE——BOS物流项目09：业务受理需求分析、创建表、实现自动分单、数据表格编辑功能使用方法和工作单快速录入
1 学习计划 1.业务受理需求分析 n 业务通知单 n 工单 n 工作单 2.创建业务受理环节的数据表 n 业务通知单 n 工单 n 工作单 3.实现业务受理自动分单 n 在CRM服务端扩展方法根据手 ...
- JQuery实战总结一 可编辑的表格
JQuery视频看完了,总结学习,记得在牛腩视频中的修改新闻类别的时候也使用了这样的可编辑的表格,使用到 了ajax控制界面不再刷新,轻松解决了类别的名称的修改的问题,直接提交到数据库,这样的方式比起 ...
- 实战Jquery(二)--能够编辑的表格
今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...
- jQuery——能够编辑的表格
版权声明:欢迎转载,请注明出处 https://blog.csdn.net/suneqing/article/details/26856635 今天学习了利用jQuery实现能够编辑的表格这个 ...
随机推荐
- App/Activity/Screen Orientation
测试android屏幕方向的小Demo 1.首先我们在values下面新建文件arrays.xml(用来在下拉列表中显示) <?xml version="1.0" encod ...
- FFT模板——copied from hzwer
/* Welcome Hacking Wish You High Rating */ #include<iostream> #include<cstdio> #include& ...
- [APIO2008]DNA
https://zybuluo.com/ysner/note/1158123 题面 戳我 解析 我们要求出第\(r\)种方案,莫过于看其前面什么时候有\(r-1\)种方案. 于是,我们要求出每种情况的 ...
- python 函数参数的传递(参数带星号的说明)
python中函数参数的传递是通过赋值来传递的.函数参数的使用又有俩个方面值得注意:1.函数参数是如何定义的 2.在调用函数的过程中参数是如何被解析 先看第一个问题,在python中函数参数的定义主要 ...
- web 应用
一.web应用 web应用程序是一种可以通过web访问的应用程序,程序 的最大好处是用户很容易访问应用程序,用户只需要有浏览器 即可,不需要安装其他团建,用用程序有两种模式C/S.B/S.C/S是客户 ...
- nodejs脚手架express-generator
1.安装生成器 npm install express-generator -g 2. 创建名称为APP的应用: express my-project 3.安装依赖包 cd my-project np ...
- mui图片懒加载
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- 课上练习 script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 安卓代码迁移：ActionBarActivity: cannot be resolved to a type
参考链接:http://stackoverflow.com/questions/18830736/actionbaractivity-cannot-be-resolved-to-a-type in e ...
- 【sqli-labs】 less11 POST - Error Based - Single quotes- String (基于错误的POST单引号字符型注入)
查看源码,用户名和密码通过post提交 加单引号提交 出现报错,推测对应的SQL语句 , 直接使用or构造永真登录 成功,注意此处登录的用户为表中的第一个用户 需要改变用户可以通过改变筛选条件实现 作 ...