做一个可编辑的,可checked的treegrid，代码相当简洁：

请看代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>ZCH</title>

    <!-- extjs 样式 -->

    <link rel="stylesheet" type="text/css" href="../ext4_2_0/resources/css/ext-all.css"/>

    <!-- extjs 引入文件 -->

    <script type="text/javascript" src="../ext4_2_0/ext-all.js"></script>

    <script type="text/javascript" src="../ext4_2_0/locale/ext-lang-zh_CN.js"></script>

<script>

Ext.define('treeGridModel', {

    extend: 'Ext.data.Model',

    fields: [{

        name: 'title',

        type: 'string'

    }, {

        name: 'min',

        type: 'int'

    }, {

        name: 'max',

        type: 'int'

    }]

}); 

Ext.define('checkTreeGrid', {

    extend: 'Ext.tree.Panel',

    requires: [

        'Ext.data.*',

        'Ext.grid.*',

        'Ext.tree.*',

        'Ext.ux.CheckColumn'

    ],

    xtype: 'tree-grid',

    title: 'checkedTreeEditGrid',

    useArrows: true,

    rootVisible: false,

    multiSelect: true,

    //singleExpand: true,

    initComponent: function() {

        this.width = 600;

        this.cellEditing = new Ext.grid.plugin.CellEditing({

                clicksToEdit: 1

            });

		var me = this;

        Ext.apply(this, {

            store: new Ext.data.TreeStore({

                model: treeGridModel,

                proxy: {

                    type: 'ajax',

                    url: './checktreegrid.json'

                },

                folderSort: true

            }),

			plugins: [me.cellEditing],

			selType: 'cellmodel', //设置为单元格选择模式

            columns: [{

                xtype: 'treecolumn', //this is so we know which column will show the tree

                text: '可用资源',

                flex: 2,

                sortable: true,

                dataIndex: 'title'

            },{

                text: '最小值',

                flex: 1,

                dataIndex: 'min',

                sortable: true,

				field:{

					xtype: 'textfield'

				}

            },{

                text: '最大值',

                flex: 1,

                dataIndex: 'max',

                sortable: true,

				field:{

					xtype: 'textfield'

				}

            }],

			listeners:{

				checkchange : function(node, checked) {

					if (checked == true) {

						node.checked = checked;

						// console.dir(node.parentNode);

						//alert(node.get("leaf"));

						//获得父节点

						pNode = node.parentNode;

						//当checked == true通过循环将所有父节点选中

						for (; pNode != null; pNode = pNode.parentNode) {

							pNode.set("checked", true);

						}

					}

					//当该节点有子节点时，将所有子节点选中删除

					if (!node.get("leaf") && !checked){

						node.cascadeBy(function(node){

							node.set('checked', false);

						});

					}

				}

			}

        });

        this.callParent();

    }

});

Ext.onReady(function(){

    var tree = Ext.create('checkTreeGrid', {

        renderTo:'example-grid'

    });

});

</script>

</head>

<body>

<div id="example-grid"></div>

</body>

</html>

Ext JS4百强应用: 做可编辑的,可checked的treegrid--第11强的更多相关文章

  1. Ext JS4百强应用: 用grid.plugin.CellEditing做高级查询 --第10强

    Ext JS4,用grid.plugin.CellEditing做高级查询: 写了90%,界面出来了,小兴奋就贴出来,还有细节要调整,基本能用. 代码: Ext.define('chenghao.ad ...

  2. Ext JS4百强应用:设置textfield的悬浮提示信息 --第8强

    在Extjs4中有时候我们需要textfield的提示信息,但是我们发现textfield并没有这样的配置项. 这时候我们就要另想方法:我们需要在鼠标悬停在textfield组件的时候进行信息的提示, ...

  3. Ext JS4 学习笔记之发送表单（Form）时也将表单下的表格（Grid）数据一同发送的方法

    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...

  4. C++11 强枚举类型

    在标准C++11之前的枚举是继承C的,枚举类型不是类型安全的.枚举类型被视为整数,这使得两种不同的枚举类型之间可以进行比较. 一.C中enum类型的局限语法: enum type1{a, b, c}; ...

  5. 名词解释——Ext JS4

    Ext.onReady——Ext主入口,和onload事件不同,不需要页面所有东西加在出来. Ext js 的基本语法就是使用树状图来配置对象来定义界面: { config_options1:valu ...

  6. asp.net对word文档进行修改 对于使用word文档做模板编辑比较适用

    最近做项目,需要多word文档进行编辑并导出一个新的word,在最初的word编辑中留下特定的字符串用来替换,然后在本地生成一个新的word文档,并且不修改服务器中的word文档,这样才能保证服务器中 ...

  7. Ext 修改内容之后 不做任何动作 再次修改时的数据是原来第一次修改前的数据

    转自  http://blog.csdn.net/jaune161/article/details/18220257 在项目开发中遇到这样一个问题,点击Grid中的一条记录并修改,修改完后保存并且刷新 ...

  8. C++枚举类型Enum及C++11强枚举类型用法

    C++中的枚举类型常常和switch配合使用,这里用一个简单的switch控制键盘回调的代码片段来说明枚举的用法: //W A S D 前.后.左.右行走 enum Keydown{ Forward= ...

  9. 一点做用户画像的人生经验（一）：ID强打通

    1. 背景 在构建精准用户画像时,面临着这样一个问题:日志采集不能成功地收集用户的所有ID,且每条业务线有各自定义的UID用来标识用户,从而造成了用户ID的零碎化.因此,为了做用户标签的整合,用户ID ...

随机推荐

  1. JAVA NIO 选择器

    为什么要使用选择器 通道处于就绪状态后,就可以在缓冲区之间传送数据.可以采用非阻塞模式来检查通道是否就绪,但非阻塞模式还会做别的任务,当有多个通道同时存在时,很难将检查通道是否就绪与其他任务剥离开来, ...

  2. unable to load default svn client 和 Eclipse SVN 插件与TortoiseSVN对应关系

    (一)unable to load default svn client 在Win7下的Eclipse,安装了subclipse 1.10.x,已经选中了subclipse和subversion Cl ...

  3. grep命令参数和使用方法

    功能说明:查找符合串的条件的文件. 语言 法国:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...

  4. windows mysql安装、配置

    一.MySQL的下载: 上图中,我们选择红框部分的社区版本进行下载,MySQL支持许多平台: 我的操作系统是64位的,选择对应版本MSI版下载,弹出login界面, 选择no thanks,just ...

  5. linux使用进阶（一）

    本文依据<应该知道的Linux技巧>coolshell上的一篇文章提到的Linux技巧,结合自己掌握的情况进行扩展和总结得来.主要包含下面内容:     一.日常操作     二.数据处理 ...

  6. iOS App 性能优化总结

    今天简单总结一些clientapp 优化的方案和方向. 我相信开发一个app大部分团队都能够完毕,可是性能久不一样啦,和我们都写一个冒泡算法一样,我相信每一个人写的冒泡算法都不一样,这些区别就带来了性 ...

  7. hdu2569（递推dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2569 分析: f(n),n个珠子的合格数:a(n),n个珠子,最后2个相同的合格数:b(n),n个珠子 ...

  8. HDU 4815 背包

    标题的含义给出N问题.和概率P,然后给予相应的分数为每个问题x(每个问题只有两种选择,纠正错误). 两个人来回答.一个人是随机选择的答案,问:还有一个人的至少一些点的能力有保证P概率不会失败. 01背 ...

  9. SE 2014年4月5日

    背景需求: 缺省情况下,Level-1路由器只将去往其它区域的报文发送到最近的Level-1-2路由器. 路由渗透使Level-1-2路由器将Level-2区域的路由信息发布到Level-1区域. 4 ...

  10. Cocos2d-x精华教程汇总（第三期） cocos2d-x最新离线API文档下载（最新版3.6更新。。。）

    其实使用doxygen在Cocos2d-x引擎的doc目录下可以生成离线文档,但是可能每个人为了生成一个离线文档去安装甚至编译doxygen毕竟麻烦,而且现有的doxygen无法生成多语言版本的离线文 ...