做一个可编辑的,可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. delphi 使用superobject实现jsonrpc的http远程调用 good

    http://blog.csdn.net/earbao/article/details/46423167

  2. Eclipse Tips

    一.取消拼写检查 Window -> Preferences -> General -> Editors -> Text Editors -> Spelling -> ...

  3. Flex与Java交互(Flex调用java类展示数据)解析xml展示数据

    Flex与java通信最简单例子(详细说明了各种需要注意的配置):http://blog.csdn.net/u010011052/article/details/9116869 Flex与java通信 ...

  4. android怎样查看当前project哪些profile是打开的

    代码project里面有三仅仅文件都是涉及到各个profile的宏的,各自是:featureoption.java.common/ProjectConfig.mk.product/ProjectCon ...

  5. cocos项目导入其它源文件时加入依赖库时，头文件提示找不到文件夹中的文件

    cocos项目导入其它源文件时加入依赖库时,头文件提示找不到文件夹中的文件解决方法: 选择项目属性->c/c++->常规,在附加包括项目中加上对应的文件夹 cocos test项目的库(所 ...

  6. JDBC增删改数据库的操作

    JDBC入门及简单增删改数据库的操作 一.JDBC的引入 1.JDBC的概念 JDBC:Java Database Connection,表示数据库连接(任何数据库都支持JDBC的连接),是一个独立于 ...

  7. Android 结合实例学会AsyncTask的使用方法

    AsyncTask运行时经过四个步骤,运行四个方法:           1.onPreExecute(),执行在UI线程,能够设置或改动UI控件,如显示一个进度条           2.doInB ...

  8. Fast portable non-blocking network programming with Libevent

    Fast portable non-blocking network programming with Libevent Fast portable non-blocking network prog ...

  9. SQL简单的日报和月报

    --320, SQL SERVER 日报 --查询2009-01-01当天客户A1,A2,A3的订单数量 SELECT Cust_Name , CONVERT(CHAR(10), Order_Date ...

  10. c语言输入输出函数

    上学年学习c语言的时候比较匆忙,没好好吸收. 现在有时间好好复习下. 本文就c语言常见输入函数进行简单介绍,对比. ps:由于自己能力有限,时间有限,多数介绍,总结都是摘录网上相关学习资料,下面给出本 ...