做一个可编辑的,可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. Mysql InnoDB 是IOT表 锁基于索引

    </pre>Mysql InnoDB 是IOT表 锁基于索引<pre>

  2. Java网络编程-对象编解码方案、优劣对照

    书籍推荐:   实例代码 :http://download.csdn.net/detail/jiangtao_st/7677503 watermark/2/text/aHR0cDovL2Jsb2cuY ...

  3. Mybatis自己主动生成代码

    在mybatis自己主动生成代码有两种方式: 方式一:是通过使用eclipse作为开发工具.採用maven来构建项目生成的.以下的演示是通过第一种方式. 今天来记录下mybatis-generator ...

  4. WCF 项目应用连载[8] - 绑定、服务、行为 大数据传输与限流 - 下 (ServiceThrottlingAttribute)

    因为ORM的原因,对Attribute编程有一种情节..所以这节的出现,完全是因为在WCF对自定义Attribute的一种应用. WCF 项目应用连载[7] - 绑定.服务.行为 大数据传输与限流 - ...

  5. linux下自助获取帮助

    几乎所有命令都可以用 -h 或者--help参数 获取命令的使用方法帮助 man ls   也可以获取ls命令的详细帮助信息 man -k XXX  可以查看包含关键字XXX的文档 还有一个更详细的命 ...

  6. 持续集成环境Jenkins的搭建和使用

    这几天试着搭了个持续集成环境,我使用的是Jenkins,它的前身是Hadson,由于被Oracle收购了,所以换个名字继续开源,这个有点像MySQL. 持续集成总是跟敏捷开发什么的搞在一起,显得非常高 ...

  7. http_load安装与测试参数分析 - 追求自由自在的编程 - ITeye技术网站

    http_load安装与测试参数分析 - 追求自由自在的编程 - ITeye技术网站 http_load -p 50 -s 120 urls

  8. Android经常使用开源组件汇总

    http://www.cnblogs.com/scige/p/3456790.html UI相关 图片 Android-Universal-Image-Loader:com.nostra13.univ ...

  9. Wix学习整理（5）——安装时填写注册表

    原文:Wix学习整理(5)--安装时填写注册表 一 Microsoft操作系统的注册表 什么是注册表? 注册表是Mircrosoft Windows中的一个重要的数据库,用于存储系统和应用程序的设置信 ...

  10. mysql-merge合并表

    merge表 注意: 1 每个子表的结构必须一致,主表和子表的结构需要一致, 2 每个子表的索引在merge表中都会存在,所以在merge表中不能根据该索引进行唯一性检索. 3 子表需要是MyISAM ...