`
chen2991101
  • 浏览: 38622 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

extjs4 treeGrid使用

阅读更多

        项目有一个需求是展示一个部门信息,但是这个部门下面有可能还存在子部门,用一般的trrPanel感觉效果不是太好,在官方的api上面找到treeGrid控件正好可以满足需求,但是悲催的是把api里面的代码拷到程序里面后没有效果,根据反复的修改终于可以用了:

Ext.define('SimpleTasks.view.organize.DeptGrid', {  
            extend : 'Ext.tree.Panel',  
            xtype : 'DeptGrid',  
            rootVisible : false,  
            id : "deptGrid",  
            collapsible : false,// 取消折叠按钮  
            useArrows : true,  
            rootVisible : false,  
            multiSelect : false,  
            singleExpand : true,  
            store : 'organize.DeptGrids',  
            columns : [{  
                        xtype : 'treecolumn',// treecolumn只用放在需要点击展开的列上面(api上面每个列都放了这个)  
                        text : '部门名',  
                        dataIndex : 'name',  
                        flex : 1  
                    }, {  
                        text : '部门领导',  
                        dataIndex : 'leaderName',  
                        flex : 1  
                    }, {  
                        text : '部门人数',  
                        dataIndex : 'employeeCount',  
                        flex : 1  
                    }]  
        });  

      store也有些不一样

Ext.define('SimpleTasks.store.organize.DeptGrids', {  
            extend : 'Ext.data.TreeStore',  
            model : 'SimpleTasks.model.organize.Department',  
            proxy : {  
                type : 'ajax',  
                url : Ext.dp + '/organize/queryDept.do'  
            },  
            folderSort : true  
        });  

        这个store没法取消自动加载,网上的解决办法是在store里面的beforeload事件上面作处理

 

        关于后台需要返回的json格式,官方的api给出的返回格式是{"text":".","children": []}这样的格式。但是我使用的时候就把后台的list集合转换成json格式传到前台就能显示,不需要去拼成api给出的那个格式

0
0
分享到:
评论

相关推荐

    extjs4 treeGrid实例

    在本实例中,我们关注的是如何利用ExtJS4实现一个TreeGrid来创建一个report报表。 首先,理解TreeGrid的基础概念。TreeGrid是树形结构和网格的结合,它将树节点的层次结构与表格的列布局结合在一起,每个树节点都...

    Extjs4 Treegrid 使用心得分享(经验篇)

    Extjs4 Treegrid使用心得分享(经验篇) Extjs4 Treegrid是基于Ext JS框架的一个模块,用于创建树形结构的数据网格。Ext JS是一个成熟的、基于JavaScript的前端框架,它提供了一套丰富的UI组件,用来创建丰富的交互...

    ExtJs4.1 treegrid CRUD 读取、新增、修改、删除

    实现treegrid组件的(CRUD)读取、新增、修改、删除 //设置grid单元格处于编辑状态 selcell:function(arow,acol){ this.editingPlugin.startEditByPosition({row:arow,column:acol}); }, selcell2:function(node,...

    SSH Extjs treeGrid conboxTree 分页实例

    最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...

    Extjs treeGrid 本地数据 例子

    在这个“Extjs treeGrid 本地数据 例子”中,我们将探讨如何使用ExtJS创建一个本地数据驱动的TreeGrid,并了解相关的核心概念和技术。 首先,我们要理解TreeGrid的基础构成。TreeGrid由行(rows)组成,这些行可以...

    Extjs4的TreeGrid例子

    在"Extjs4的TreeGrid例子"这个主题中,我们将深入探讨TreeGrid的各种特性,以及如何在实际项目中应用这些示例。 1. **多语言支持**:描述中提到的"多语言"功能在ExtJS 4中通常通过i18n(国际化)实现。开发人员可以...

    extjs4带checked的treegrid.rar

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

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

    在提供的压缩包文件"extjs4.1_TreeGrid"中,可能包含了一些EXTJS 4树形表格组件的示例代码和资源,通过学习和分析这些示例,你可以更好地理解如何在项目中应用这个组件。 总结来说,EXTJS 4的树形表格组件是一个...

    extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面

    想要实现 TreeGrid的效果,打开官方例子却看不到效果,怎么办呢?我是这样实现的 代码如下: var root = new Ext.tree.TreeNode({ text: ‘根节点’, expanded: true }); tree.setRootNode(root); var nodes = {}; ...

    ExtJS4中文教程2 开发笔记 chm

    Extjs4 TreeGrid Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up...

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

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

    ext 可编辑treegrid组件

    4. **键盘导航**:通过键盘可以轻松地在TreeGrid的单元格间移动并进行编辑,提供无障碍访问。 5. **数据验证**:在用户输入数据后,可以进行实时验证,确保输入的数据符合预设的规则和格式。 6. **事件处理**:提供...

    EXTJS4.2 Sencha Architect22 treegrid tree checkbox

    EXTJS4.2 Sencha Architect22 treegrid tree checkbox treegrid tree 通过store显示内容,能够通过checkbox点击勾选 其他功能,网上都能找到,就没有再写

    Extjs 2.2 Extjs 3.21 js

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端Web应用程序。这个压缩包包含了ExtJS的两个重要版本:2.2和3.2.1。这两个版本在Web开发领域都有着广泛的运用,它们各自拥有不同的特性和改进,对于理解...

    extjs mask load

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

    treeGrid目录拖动到formPanel

    在本文中,我们将深入探讨如何将`...总结起来,将`treeGrid`目录拖放到`formPanel`涉及了`ExtJS`的拖放API、事件处理、数据同步和UI交互等多个方面。理解并熟练运用这些技术,可以创建出更加动态和用户友好的Web应用。

    Extjs动态树的实现以及节点拖拽

    首先,我们来看如何处理ExtJS TreeGrid的叶子节点拖拽问题。在ExtJS 3.1版本中,默认情况下,节点不能被拖放到叶子节点上。这是因为树的默认配置限制了这种行为。为解决这个问题,我们需要监听`nodedragover`事件,...

Global site tag (gtag.js) - Google Analytics