ExtJS TreeGrid的用法

最新推荐文章于 2015-11-22 04:23:00 发布
最新推荐文章于 2015-11-22 04:23:00 发布
阅读量8.6k 收藏 2
点赞数
分类专栏： javascript Ext 文章标签： extjs treegrid tree mvc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xtayfjpk/article/details/40272805
版权
如果您是第一次使用ExtJS的TreeGrid的话，我相信总会有一些小麻烦的，下面就来说一说ExtJS中TreeGrid的使用。
本人使用的ExtJS版本为4.1.1，并且使用了MVC模式，如果不了解ExtJS的MVC模式的话我个觉得还是有必要去学学的，
学完后你肯定会喜欢上的。
其实在ExtJS中并没有TreeGrid这么一个类，这个说法是从EasyUI中借用过来的，ExtJS中的TreeGrid功能已经合在了Ext.tree.Panel中。

TreeGrid显示出来大概是这个样子：

下面是这个例子的源码：

View:


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  云原生之家
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
Extjs4之TreePanel、TreeGrid

				
			

			

				

					diweikang的博客
				

				

					11-13
					
					3532
					
				

			

		

		

			
				
Tree介绍
树形结构，是程序开发，不可缺少的组件之一。ExtJs中的树，功能强大美观实用。功能齐全，拖拉，排序，异步加载等等。
在ExtJs4中Tree和Grid具有相同的父类，因此Grid具有的特性和插件在Tree上也能用。
简单的Tree 
 
代码：
    
     
    
    
    
    

        Ext.onReady(function () {

			
		

	



                

              
                



	

		

			

				
					
EXTJS 4 树形表格组件使用示例

				
			

			

				

					蜗牛跑的快
				

				

					09-30
					
					5193
					
				

			

		

		

			
				
TreeStore中使用了一个 Ext.data.NodeInterface来表示数的节点;在TreeStore的setRootNode方法中会调用NodeInterface的decorate方法向TreeStore的model增加一些属性,这些属性是在展示树时必须使用的.这些属性详见如下:

			
		

	



                


  
              

                


	

		

			

				
					
extjs4.0的高级组件tree加grid整合案例上.part2

				
			

			

				

					12-10
				

			

		

		

			
				
学习extjs资料，tree合成grid，很不错的视频文件，值得收藏

			
		

	





	

		

			

				
					
ext TreeGrid分页可编辑

				
			

			

				

					12-19
				

			

		

		

			
				
为什么不能设置O分，晕死，自己做的一个EXT Treegrid 分页的功能，代码全在里面，附带数据库部分

			
		

	



		

			
		



	

		

			

				
					
Extjs4的TreeGrid例子

				
			

			

				

					11-11
				

			

		

		

			
				
6. **Tutorials和Examples**：压缩包中的`Examples`和`Tutorials`目录可能包含了各种使用场景的示例代码，帮助开发者了解如何在实际项目中应用TreeGrid。这些示例可能涵盖了基本用法到高级特性的全面演示。  7. **...

			
		

	





	

		

			

				
					
extjs4带checked的treegrid.rar

				
			

			

				

					07-02
				

			

		

		

			
				
7. **API使用**: ExtJS 4提供了丰富的API，如`selectNode`、`deselectNode`等，用于在代码中控制节点的选中状态。  8. **自定义行为**: 如果需要实现更复杂的复选框逻辑，如级联选择、反选等，可以通过重写或扩展...

			
		

	





	

		

			

				
					
Extjs树Demo

				
			

			

				

					06-04
				

			

		

		

			
				
6. **扩展功能**：除了基础的树形结构，ExtJS还提供了树表格（TreeGrid）、树菜单（TreeMenu）等更高级的组件，可以满足复杂的应用需求。  7. **API和文档**：学习ExtJS树形结构的最佳资源是官方文档，其中详细介绍...

			
		

	





	

		

			

				
					
extjs mask load

				
			

			

				

					03-25
				

			

		

		

			
				
压缩包中的“treegrid.doc”文件名表明，文档可能包含有关ExtJS TreeGrid的详细信息。TreeGrid是ExtJS的一个组件，它结合了树结构和数据网格的功能，允许用户以表格形式展示层次化的数据，并对其进行排序、筛选等...

			
		

	





	

		

			

				
					
Extjs treeGrid分页实例

				
			

			

				

					awe5566的专栏
				

				

					09-15
					
					5987
					
				

			

		

		

			
				
Extjs treeGrid分页实例，项目中用到，拿出来跟大家分享一下，主要是通过两个store实现。
ProTreeGrid = Ext.extend(Ext.tree.Panel, {
	_baseParam : {
		process : '项目立项',
		isShow : 'true',
		start : 1
	},
	constructor : function(_config) 

			
		

	





	

		

			

				
					
SSH Extjs treeGrid conboxTree 分页实例

				
			

			

				

					12-27
				

			

		

		

			
				
最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点帮助,treegrid分页也通过自己写js代码实现了,虽然功能有点简单.

			
		

	





	

		

			

				
					
Extjs复习笔记（二十）-- tree和grid结合

				
			

			

				

					07-29
				

			

		

		

			
				
NULL
博文链接：https://lingyibin.iteye.com/blog/804906

			
		

	





	

		

			

				
					
Extjs treeGrid  本地数据 例子

				
			

			

				

					04-20
				

			

		

		

			
				
NULL
博文链接：https://bernoulli.iteye.com/blog/1885567

			
		

	





	

		

			

				
					
基于ext很不错的TreeGridEditor树表格

				
			

			

				

					04-16
				

			

		

		

			
				
基于ext很不错的TreeGridEditor树表格

			
		

	





	

		

			

				
					
Extjs 4.2使用心得 --- tree和grid

				
			

			

				

					weixin_34378767的博客
				

				

					08-30
					
					145
					
				

			

		

		

			
				
把前段时间做的东西整理一下。主要是树形菜单和grid面板的结合。选中左边机构菜单的节点，右边grid面板显示该节点下的信息。

首先是建立treestore

Ext.create('Ext.data.TreeStore', {
        autoDestroy: true,
        proxy: {
            type: 'ajax',
       ...

			
		

	





	

		

			

				
					
extJs3.3版本中treeGrid列宽的问题

				
			

			

				

					棉花糖
				

				

					06-30
					
					1631
					
				

			

		

		

			
				
Ext.namespace('Mr.rw.widget.plan.inspection.template');
Mr.rw.widget.plan.inspection.template.TreeGridTest = function (config){
    var me = this;
    config = config || '';
    
    config.loader = n

			
		

	





	

		

			

				
					
ExtJS4.2学习(15)树形表格（转）

				
			

			

				

					weixin_34335458的博客
				

				

					11-22
					
					297
					
				

			

		

		

			
				
鸣谢：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-27/185.html
-------------------------------------------------------------------------------------------

以下是完整代码：

/**
 *...

			
		

	





	

		

			

				
					
Extjs 3.31 TreeGrid 我的小改动，实现静态页面加载json到TreeGrid里面

				
			

			

				

					软件维修师
				

				

					02-13
					
					4323
					
				

			

		

		

			
				
想要实现 TreeGrid的效果，打开官方例子却看不到效果，怎么办呢？我是这样实现的 var root = new Ext.tree.TreeNode({        text: '根节点',        expanded: true    });    tree.setRootNode(root);  var nodes = {};  nodes.children = mydata;/*Tr...

			
		

	





	

		

			

				
					
[置顶]《ExtJS4FirstLook》翻译之五：Grid、Tree

				
			

			

				

					chym18845095620的博客
				

				

					03-07
					
					204
					
				

			

		

		

			
				
[置顶]《ExtJS4FirstLook》翻译之五：Grid、Tree



 《Ext JS 4 First Look》翻译之五：Grid、Tree和Form　　  
 

 　　至此我们已经学习了Data包和布局等API。下面我们来学习作为Extjs框架中我们用得最多的用来展现数...

			
		

	





	

		

			

				
					
extjs中actioncolumn的使用方法

					
最新发布

				
			

			

				

					03-06
				

			

		

		

			
				
ActionColumn 是 ExtJS 中的一个列类型，它允许您在表格中添加一个或多个操作按钮。您可以使用 handler 属性来指定单击操作按钮时要执行的函数。例如，您可以使用以下代码创建一个包含两个操作按钮的 ActionColumn：...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值