- 浏览: 133431 次
- 性别:
- 来自: 北京
文章分类
最新评论
一、 设置行号
行号的设置主要问题在于删除某一行后需要重新计算行号
Ext.onReady(function() {
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), --在这里设置行号
{ header: '编号', dataIndex: 'id' },
{ header: '性别', dataIndex: 'sex' },
{ header: '名称', dataIndex: 'name' },
{ header: '描述', dataIndex: 'descn' }
]);
var data = [
['1', 'male', 'name1', 'descn1'],
['2', 'female', 'name2', 'descn2'],
['3', 'male', 'name3', 'descn3'],
['4', 'female', 'name4', 'descn4'],
['5', 'male', 'name5', 'descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{ name: 'id' },
{ name: 'sex' },
{ name: 'name' },
{ name: 'descn' }
])
});
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm
});
Ext.get('remove').on('click', function() { --监听删除按钮的单击事件
store.remove(store.getAt(1)); --store.getAt(1) 获得第2行数据
grid.view.refresh(); --强制grid刷新,重新计算行号
});
});
页面代码:
<body>
<div id="grid"></div>
<input id="remove" type="button" value="删除第二行数据" />
</body>
二、 设置复选框
复选框是通过Ext.grid.CheckboxSelectionModel来设置的,它会在每行数据前加一个复选框,另外它必须添加到列定义和表格装配定义2个部分。默认单击表格的某一行,复选框就会自动选中。可以通过如下设置取消单击即选中,而需要通过单击复选框来选中:
var sm = Ext.grid.CheckboxSelectionModel({ handleMouseDown: Ext.emptyFn });
复选框设置代码:
Ext.onReady(function() {
var sm = Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), --在这里设置行号
sm, --设置复选框//不添加这项 就不会显示单选了
{ header: '编号', dataIndex: 'id' },
{ header: '性别', dataIndex: 'sex' },
{ header: '名称', dataIndex: 'name' },
{ header: '描述', dataIndex: 'descn' }
]);
var data = [
['1', 'male', 'name1', 'descn1'],
['2', 'female', 'name2', 'descn2'],
['3', 'male', 'name3', 'descn3'],
['4', 'female', 'name4', 'descn4'],
['5', 'male', 'name5', 'descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{ name: 'id' },
{ name: 'sex' },
{ name: 'name' },
{ name: 'descn' }
])
});
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm,
sm:sm
});
});
三、选择模型
(1).RowSelectionModel 模型
在定义Ext.grid.GridPanel时,默认使用的是RowSelectionModel——行选择模型,当单击某一个单元格时,默认选中的是却是整行,选择模型默认
支持多选,鼠标单击时按住Shift或Ctrl键就可以选择多行。如果只希望选择一行,需要设置singleSelect参数。
(2).CellSelectionModel模型
每次只允许选择一个单元格,EditorGrid里默认使用的就是CellSelectionModel. 当然也可以将EditorGrid的选择模型设置为RowSelectionModel,
从而达到选中一整行的效果。
(3).获取选中的行
Ext.get('remove').on('click', function() {
var selections = grid.getSelectionModel().getSelections(); --先获取选择模型,然后从选择模型中获取选中的记录。
if (selections.length > 0) {
Ext.Msg.confirm('提示', '你确认删除选中的记录吗?', function(_btn) {
if (_btn == 'yes') {
for (var i = 0; i < selections.length; i++) {
var record = selections;
store.remove(record);
}
grid.view.refresh();
}
});
发表评论
-
javaScript实现的 数据库
2014-11-06 17:17 15201、LokiJS LokiJS一个基于J ... -
xss攻击
2013-12-27 11:54 545解决方案与建议: 严格过滤用户所能提交的任何数据,特别是能执 ... -
js技巧
2013-08-02 09:02 1669· 事件源对象 event.srcElement.tagNa ... -
jquery combox实现联动效果
2013-05-18 05:15 661需求方要求 所以就想法实现此效果 经过两个小时的看源码、修改、 ... -
jQuery easyui 1.2.5 window、dialog发送两边请求(转)
2013-05-04 12:02 928jQuery easyui 1.2.5 window、dial ... -
跨域问题
2013-05-01 10:04 744可以采用JQuery的getJSON、get方法以JSONP的 ... -
js的base64
2013-04-11 10:55 705var Base64 = { // private prop ... -
JavaScript实现URL编码
2012-07-10 16:46 915<script language="vbscr ... -
用户访问超时
2012-07-09 17:11 1869用户访问超时 解决两种情况下的用户访问超时。 a)普通ht ... -
jQuery 禁止右键
2012-07-03 14:38 1841用jquery实现你的网站不能右键,很简短的代码: $('b ... -
js技巧
2012-06-12 17:08 7141、jquey查找iframe父页面的标签 $('#id' ... -
jquery easyui -datagrid(悬浮,隐藏)(转)
2012-05-30 16:33 0对于jquery easyui 的datagrid引用碰到了几 ... -
GridView脚注行添加合计,并设置背景图片
2011-09-30 11:00 4084以前在做GridView ... -
ExtJS表格
2011-09-30 10:58 27201. 简单表格控件 (由类Ext.grid.GridPane ... -
行渲染和列渲染
2011-09-30 10:57 1272一,单元格渲染 单元格是最终显示的数据地方,它是根据列定义 ... -
cookie
2011-09-26 10:02 1086/** * * 获取cookie的值 * @para ... -
js结构语句
2011-09-25 11:02 7861 if 条件语句(可嵌套) 2 if....else 条件 ... -
js循环语句
2011-09-25 10:56 17211 for循环结构语句(可以嵌套); 2 for-in 循环 ... -
使用with语句进行对象操作
2011-09-25 10:45 820在js语言中,with语句是一个内容很少的语句,在程序中多次使 ... -
Iframe
2011-09-23 21:14 7651、Iframe子页面调用父页面函数 window.pare ...
相关推荐
1、解压,进入extjs4.2.1\examples\form,浏览器打开 hbox-form.html 文件,当我勾选中任意一个多选下拉框,然后再勾选...2、下拉列表选择功能的js代码在下面文件里: extjs4.2.1\examples\form\MultipleComboBox.js
基于EXTjs 的 动态复选框树 json数据交互
extjs4.1下拉复选框完整DEMO,包含了extjs4.1主文件,代码实现了动态加载功能,所以需要配置IIS或者apache。插件文件在ux目录下,请自行参考。
分享一个ExtJs Tree, 完整的带有复选框的树形结构
网上搜索了许久未找到...Extjs4.2 带复选框的下拉树,解决了向下勾选子节点、向上勾选父节点,正选反选获取值等问题,勾选的节点显示displayfield值直接显示在下拉文本框中。需要引用ext-all.js和ext-all-neptune.css
extjs3.2 3.3 3.4都测试过可以使用,带有复选框的树菜单,选中父节点子节点全部选中,选中子节点父节点选中(以及父节点的父节点等),其余版本不知道能否使用
实现了从后台读取数据,并进行分页显示,从后台读取treepanel数据,显示,并实现了点击节点复选框的时候,出现父节点和子节点的联动,运行环境是vs2008
提问 - Boxy.ask() - 用户定义的选项,选择项传递给回调函数 弹出 - Boxy.alert() - 回调函数总是不被调用 确认 - Boxy.confirm() - 仅当用户选择了“确认”时回调函数会被调用 行业选择器 - Boxy.industry() - 仅当...
extjs带复选框的树包括全选 反选 子选父以及 父选子 与adf在jsp页面得应用 包含了工具类以及针对extjs树节点增加、删除、修改的工具方法
ExtJs表格点击超链接获取行的值,和各种获取节点值的方法
Extjs表格合并代码, 由于ie6以外的浏览器的盒模型比较怪异(主因还是我自身不擅处理CSS),列头与数据列的边框有些对不齐(当前的效果已经是尽了最大努力了)
EXTJS4自学手册——EXT对象选择 二 Extjs 数据组件 EXTJS4自学手册——EXT数据结构组件(创建一个Model) EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互) EXTJS4自学手册——EXT数据结构组件 EXTJS4...
Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选, 附源码。 修复不能多选问题,代码仅供参考
extjs表格、树控件
extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性;2、一个简单的页面布局。供参考。
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
extjs 如图,实现带有复选框的树,选中父节点时,选中所有子节点。取消所有子节点时,才能取消根节点。 代码如下: var Fpanel = new Ext.tree.TreePanel({ id:’ptree’, region:’west’, layout:’anchor’, border...
具体代码如下所示: Ext.define('AM.view.test.ReceiptList', { extend: 'Ext.grid.Panel', alias: 'widget.receiptlist', id : 'receiptlist', selModel : { selType : 'checkboxmodel', ...
资源名称:获取ExtjS表格的值_ ExtJS_3.4 cellSelectModel资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。