做一个可编辑的,可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. [Android学习笔记]Android中多线程开发的一些概念

    线程安全: 在多线程的情况下,不会因为线程之间的操作而导致数据错误. 线程同步: 同一个资源,可能在同一时间被多个线程操作,这样会导致数据错误.这是一个现象,也是一个问题,而研究如何解决此类问题的相关 ...

  2. li里的a标签浮动了，为什么li本身也浮动了？

    <ul> <li><a href="#"></a></li> <li><a href="#& ...

  3. hdu2647解题报告

    题意:有个工厂的老板给工人发奖金,每人基础都是888,工人们有自己的想法,如:a 工人想要比 b 工人的奖金高,老板想要使花的钱最少 那么就可以 给b 888,给a 889 ,但是如果在此基础上,b也 ...

  4. 降低http请求次数

    80%的终于用户响应时间花在前端程序上.而其大部分时间则花在各种页面元素,如图像.样式表.脚本和Flash等的下载上. 降低页面元素将会降低HTTP请求次数.这是高速显示页面的关键所在. 1.Imag ...

  5. 呜呼！Node.js是什么？

    近期看到非常多站点都使用node.js.開始感到非常好奇.就開始推測这是个什么东西,大概就是个js文件吧,所以開始根本 没有在意,可是越感觉就认为越不正确劲,为什么大家都在用它呢?所以我决定搞个明确. ...

  6. MySQLdb的安装与使用

    一.安装 安装已编译版本号(此方法简便快捷): http://www.codegood.com/downloads 依据自己系统下载,双击安装,搞定 然后import MySQLdb.查看是否成功 我 ...

  7. HDU 4597 Play Game 2013 ACM-ICPC吉林通化全国邀请赛H题

    九野的博客,转载请注明出处:  http://blog.csdn.net/acmmmm/article/details/10833941 题意:给定T个测试数据,下面有2副牌,每副n张,每张都有一个分 ...

  8. hdoj 1258 SUM IT UP

    程序的思想是:输入数据是,先使用快排对其从大到小进行排序,然后记录相同数据的个数,比如4 3 3 2 2 1 1,最后的数据变成4 3 2 1 ,并且同时数据的个数f[]变成1 2 2 2 然后就是遍 ...

  9. 百度地图AP1

    百度地图API的用法 百度地图API演示样例 百度地图API学习总结 <1> <%@ Page Language="C#" Inherits="Syst ...

  10. Application.mk中APP_ABI 的含义

    我们在编写JNI代码时有一个可选的文件Application.mk ,这个文件你可以不创建,但是有时候是有必要写一个这样的文件的. Application.mk文件用于描述应用程序本身的一些属性信息, ...