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

请看代码：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <title>ZCH</title>
  6.     <!-- extjs 样式 -->
  7.     <link rel="stylesheet" type="text/css" href="../ext4_2_0/resources/css/ext-all.css"/>
  8.     <!-- extjs 引入文件 -->
  9.     <script type="text/javascript" src="../ext4_2_0/ext-all.js"></script>
  10.     <script type="text/javascript" src="../ext4_2_0/locale/ext-lang-zh_CN.js"></script>
  11.  
  12. <script>
  13. Ext.define('treeGridModel', {
  14.     extend: 'Ext.data.Model',
  15.     fields: [{
  16.         name: 'title',
  17.         type: 'string'
  18.     }, {
  19.         name: 'min',
  20.         type: 'int'
  21.     }, {
  22.         name: 'max',
  23.         type: 'int'
  24.     }]
  25. }); 
  26.  
  27. Ext.define('checkTreeGrid', {
  28.     extend: 'Ext.tree.Panel',
  29.  
  30.     requires: [
  31.         'Ext.data.*',
  32.         'Ext.grid.*',
  33.         'Ext.tree.*',
  34.         'Ext.ux.CheckColumn'
  35.     ],
  36.     xtype: 'tree-grid',
  37.  
  38.     title: 'checkedTreeEditGrid',
  39.     useArrows: true,
  40.     rootVisible: false,
  41.     multiSelect: true,
  42.     //singleExpand: true,
  43.  
  44.     initComponent: function() {
  45.         this.width = 600;
  46.         this.cellEditing = new Ext.grid.plugin.CellEditing({
  47.                 clicksToEdit: 1
  48.             });
  49. 		var me = this;
  50.         Ext.apply(this, {
  51.             store: new Ext.data.TreeStore({
  52.                 model: treeGridModel,
  53.                 proxy: {
  54.                     type: 'ajax',
  55.                     url: './checktreegrid.json'
  56.                 },
  57.                 folderSort: true
  58.             }),
  59. 			plugins: [me.cellEditing],
  60. 			selType: 'cellmodel', //设置为单元格选择模式
  61.             columns: [{
  62.                 xtype: 'treecolumn', //this is so we know which column will show the tree
  63.                 text: '可用资源',
  64.                 flex: 2,
  65.                 sortable: true,
  66.                 dataIndex: 'title'
  67.             },{
  68.                 text: '最小值',
  69.                 flex: 1,
  70.                 dataIndex: 'min',
  71.                 sortable: true,
  72. 				field:{
  73. 					xtype: 'textfield'
  74. 				}
  75.             },{
  76.                 text: '最大值',
  77.                 flex: 1,
  78.                 dataIndex: 'max',
  79.                 sortable: true,
  80. 				field:{
  81. 					xtype: 'textfield'
  82. 				}
  83.             }],
  84.  
  85. 			listeners:{
  86. 				checkchange : function(node, checked) {
  87. 					if (checked == true) {
  88. 						node.checked = checked;
  89. 						// console.dir(node.parentNode);
  90. 						//alert(node.get("leaf"));
  91. 						//获得父节点
  92. 						pNode = node.parentNode;
  93. 						//当checked == true通过循环将所有父节点选中
  94. 						for (; pNode != null; pNode = pNode.parentNode) {
  95. 							pNode.set("checked", true);
  96. 						}
  97. 					}
  98. 					//当该节点有子节点时，将所有子节点选中删除
  99. 					if (!node.get("leaf") && !checked){
  100. 						node.cascadeBy(function(node){
  101. 							node.set('checked', false);
  102. 						});
  103. 					}
  104. 				}
  105. 			}
  106.  
  107.         });
  108.         this.callParent();
  109.     }
  110. });
  111.  
  112. Ext.onReady(function(){
  113.     var tree = Ext.create('checkTreeGrid', {
  114.         renderTo:'example-grid'
  115.     });
  116. });
  117.  
  118. </script>
  119. </head>
  120.  
  121. <body>
  122. <div id="example-grid"></div>
  123. </body>
  124. </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. ADO面板上的控件简介

    ADO面板上的控件简介 一. TADOConnection组件该组件用于建立数据库的连接.ADO的数据源组件和命令组件可以通过该组件运行命令及数据库中提取数据等.该组件用于建立数据库的连接,该连接可被 ...

  2. EJBCA 在windows上的安装

    为了做EJBCA的封装測试,在我自己电脑上装了个,可是在国内的开发上面的介绍实在是太少.有的也仅仅是些傻瓜式的安装介绍,这是介绍在Windows上安装的过程,(后面介绍下 linux 红帽上的),有些 ...

  3. cocos2d-x游戏开发 跑酷(四) 关联与物理世界

    原创.转载注明出处http://blog.csdn.net/dawn_moon/article/details/21451077 前面一节尽管实现了一个跑动的人物,可是他只不过一个精灵在运行一个跑动的 ...

  4. Java发展的时间表

    Java发展的时间表. (版本号 名称 中文名 发布日期) JDK 1.1.4 Sparkler 宝石 1997-09-12 JDK 1.1.5 Pumpkin 南瓜 1997-12-13 JDK 1 ...

  5. IE 兼容模式

    兼容模式的由来 早期的浏览器, IE 独大.这也就导致其很多东西和w3c 的标准有很多不一样的地方.譬如他有自己才看的懂得自定义Tag. 一个熟悉的名词--浏览器大战, 形象的刻画了这期间发生的事情. ...

  6. Jquery节点遍历

    jquery 节点遍历 <html> <head> <title></title> <script src="Jquery/jquery ...

  7. cmake编译时遇到的问题解决

    编译cmake首先须要gcc环境,能够运行 gcc --version命令看看. 假设没有,能够使用yum或从cd中进行安装,此处是在虚拟机中从cd中进行安装.将cd链接到虚拟机都会吧,此处略去,.. ...

  8. hdu2389（HK算法）

    传送门:Rain on your Parade 题意:t个单位时间后开始下雨,给你N个访客的位置(一维坐标平面内)和他的移动速度,再给M个雨伞的位置,问在下雨前最多有多少人能够拿到雨伞(两个人不共用一 ...

  9. The Official Preppy Handbook

    The Official Preppy Handbook: Lisa Birnbach: 9780894801402: Amazon.com: Books The Official Preppy Ha ...

  10. _00021 尼娜抹微笑伊拉克_谁的的最离奇的异常第二阶段 Jedis pool.returnResource(jedis)

    笔者博文:妳那伊抹微笑 博客地址:http://blog.csdn.net/u012185296 博文标题:_00021 妳那伊抹微笑_谁的异常最诡异第二期之 Jedis pool.returnRes ...