做一个可编辑的,可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. 文档数据库RavenDB-介绍与初体验

    文档数据库RavenDB-介绍与初体验 阅读目录 1.RavenDB概述与特性 2.RavenDB安装 3.C#开发初体验 4.RavenDB资源 不知不觉,“.NET平台开源项目速览“系列文章已经1 ...

  2. casio 手表北京维修网络

    http://www.casio.com.cn/support/service/wat/28.html 手表北京维修网络 号新东安广场2座11层1103室电话:010-65157818/8391585 ...

  3. [Android学习笔记]设置Activity方向

    1.设置Activity方向 在AndroidMainfest.xml里设置Activity默认方向 <activity android:name=".myActivity" ...

  4. frontend http 前端名字定义问题

    https://www.winfae.com/admin/api/menu haproxy 日志: Jun 24 13:04:49 localhost haproxy[14817]: 115.236. ...

  5. isapi_rewrite运行在.net framework 4.0+iis 6.0环境下404错误解决方案

    今天以前的同事让我帮他上服务器看看,他把页面伪静态之后,出现404错误,为什么会出现这样的问题呢,仔细研究才发现,原因如下: 因为ASP.NET4.0在安装的过程中,已经在IIS6做了一些手脚,让它可 ...

  6. java中clone的深入理解

    Java中Clone的概念大家应该都很熟悉了,它可以让我们很方便的“制造”出一个对象的副本来,下面来具体看看java中的Clone机制是如何工作的?      1． Clone和Copy      假 ...

  7. OCP读书笔记(12) - 执行闪回数据库

    闪回数据库使用的是闪回日志,闪回日志存在于闪回目录(也就是快速闪回区中)闪回日志:就是数据块修改之前的镜像,简称前像 1.查看闪回目录的位置:show parameter recovery 如果闪回目 ...

  8. CacheHelper工具类的使用

    package com.bbcmart.util; import net.sf.ehcache.Cache; import net.sf.ehcache.CacheManager; import ne ...

  9. 浅谈Storm流式处理框架（转）

    Hadoop的高吞吐,海量数据处理的能力使得人们可以方便地处理海量数据.但是,Hadoop的缺点也和它的优点同样鲜明——延迟大,响应缓慢,运维复杂. 有需求也就有创造,在Hadoop基本奠定了大数据霸 ...

  10. CCLuaObjcBridge调Objective-C方法传索引数组报invalid key to &#39;next&#39;错调试

    CCLuaObjcBridge是cocos2d-x系列引擎与Objective-C进行交互的"桥梁",老廖的quick-cocos2d-x在其framework进行了简单了封装,封 ...