`

ExtJs 中的TreeGrid(Ext.ux.maximgb.tg.EditorGridPanel详解与其他问题解决办法)2

EXT 
阅读更多
Ext.ux.maximgb.tg.EditorGridPanel


所形成的树形表格,如果当右侧数据更改后,会出现节点位置偏(左)移,这要怎么解决了,

解决方法:

   在引入的js文件TreeGrid.js中,只要重写这些方法即可:

 

    onAdd : function(ds, records, index)
    {
        Ext.ux.maximgb.tg.GridView.superclass.onAdd.call(this, ds, records, index);
        if (this.mainWrap) {
           //this.updateAllColumnWidths();
           this.processRows(0);
        }
    },
    
    onRemove : function(ds, record, index, isUpdate)
    {
        Ext.ux.maximgb.tg.GridView.superclass.onRemove.call(this, ds, record, index, isUpdate);
        if(isUpdate !== true){
            if (this.mainWrap) {
                //this.updateAllColumnWidths();
                this.processRows(0);
            }
        }
    },
    
    onUpdate : function(ds, record)
    {
        Ext.ux.maximgb.tg.GridView.superclass.onUpdate.call(this, ds, record);
        if (this.mainWrap) {
            //this.updateAllColumnWidths();
            this.processRows(0);
        }
    },

  在每个方法中加入以下代码即可:

this.grid.view.refresh();

 

 重写后为:

 onAdd : function(ds, records, index)
    {
        Ext.ux.maximgb.tg.GridView.superclass.onAdd.call(this, ds, records, index);
        if (this.mainWrap) {
           //this.updateAllColumnWidths();
           this.processRows(0);
           //  add 
           this.grid.view.refresh();
         }
    },
    
    onRemove : function(ds, record, index, isUpdate)
    {
        Ext.ux.maximgb.tg.GridView.superclass.onRemove.call(this, ds, record, index, isUpdate);
        if(isUpdate !== true){
            if (this.mainWrap) {
                //this.updateAllColumnWidths();
                this.processRows(0);
           		//  add 
          		 this.grid.view.refresh();
            }
        }
    },
    
    onUpdate : function(ds, record)
    {
        Ext.ux.maximgb.tg.GridView.superclass.onUpdate.call(this, ds, record);
        if (this.mainWrap) {
            //this.updateAllColumnWidths();
            this.processRows(0);
           //  add 
           this.grid.view.refresh();            
        }
    },
 

   即在添加、删除、更改后,刷新一遍即可!

 

   另外在Grid中有时候会统计所有子节点的值进行汇总时,store中只有query()方法,但有时会有问题,出现统计子节点出现计算错误:

 var mixedCollection=s.queryExact("_parent",record.get("_id"));

 这个时候就要重写store中原的的方法query了:

    store中原有方法query为:

    query : function(property, value, anyMatch, caseSensitive){
        var fn = this.createFilterFn(property, value, anyMatch, caseSensitive);
        return fn ? this.queryBy(fn) : this.data.clone();
    },

  重写query方法,改名后(queryExact --自定义)为:

Ext.override(Ext.data.Store,{
    
    queryExact : function(property, value, anyMatch, caseSensitive){
        var fn = this.createFilterFn(property, value, anyMatch, caseSensitive, true);
        return fn ? this.queryBy(fn) : this.data.clone();
    }
});
 

 

 

 

  • 大小: 5.4 KB
分享到:
评论
7 楼 wokao_wg 2013-11-20  
大伙可以看看作者说的
http://www.sencha.com/forum/showthread.php?76331-TreeGrid-(Ext.ux.maximgb.tg)-a-tree-grid-component-based-on-Ext-s-native-grid.
很有用
6 楼 tlp080931 2013-10-12  
你好!朋友,求demo,1063865233@qq.com,谢谢!
5 楼 seveny 2013-07-11  
求demo,谢谢,weiyan87811@126.com
4 楼 wancaihua 2013-05-05  
求DEMO,83636306@qq.com,多谢!
3 楼 Inspiration 2012-02-02  
能不能给我发一个DEMO
chengxiangwu@sohu.com
2 楼 008zlj 2011-11-05  
谢谢你哈!!!
1 楼 008zlj 2011-11-05  
请问有treegrid的demo吗?
008zlj@163.com

相关推荐

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    Ext.ux.tree.treegrid异步加载

    在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过这种组件,用户可以在一个界面上同时查看数据的层次结构以及具体数据内容。 #### 二、...

    extjs4.1-ux.rar

    2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid.plugin.DragSelector 8、Ext....

    ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

    ### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域,特别是使用ExtJs框架进行复杂用户界面构建时,`RowEditor` 是一个非常实用的功能,它允许用户直接在表格行内编辑数据,极大地提高了...

    Ext.ux.UploadDialog.zip

    这个"Ext.ux.UploadDialog.zip"压缩包包含了EXTjs的UploadDialog组件,方便开发者在自己的项目中直接使用。 UploadDialog组件的核心功能是提供一个用户友好的界面,让用户能够选择并上传文件到服务器。这个组件通常...

    Ext.ux.SwfUploadPanel.js

    总的来说,`Ext.ux.SwfUploadPanel.js`是一个强大而灵活的文件上传解决方案,它结合了ExtJS的组件化和SwfUpload的高级上传功能,使得在Web应用中实现多文件上传变得简单易行。然而,随着HTML5技术的发展,现代浏览器...

    Ext.ux.UploadDialog

    Most configuration options are inherited from Ext.Window (see ExtJs docs). The added ones are: url - the url where to post uploaded files. base_params - additional post params (default to {}). ...

    Ext.ux.UploadDialog批量上传文件实例

    Ext.ux.UploadDialog批量上传文件实例是一个基于ExtJS组件库扩展插件的文件上传解决方案,主要针对需要一次性处理多个文件上传的应用场景。ExtJS是一个强大的JavaScript框架,它提供了丰富的用户界面组件,而Ext.ux....

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    ext 多文件上传控件 Ext.ux.UploadDialog 使用中的问题

    首先,Ext.ux.UploadDialog是一个基于ExtJS框架的组件,它允许用户在一个对话框中选择并上传多个文件。这个组件通常包含一个文件选择输入框、上传按钮、进度条和取消上传的功能。它的主要优势在于能够提供友好的用户...

    [Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree

    【Ext 3.x + Ext 2.x 下拉树 Ext.ux.ComboBoxTree】是基于ExtJS框架的一个组件,它结合了下拉框(ComboBox)和树形控件(TreePanel)的功能,提供了一种用户友好的选择界面。在网页应用中,这种控件常用于展示层级...

    Ext JS Notification 插件

    在Ext JS中,“Notification”插件是用于显示通知消息的一个组件,它可以帮助开发者在用户界面上创建吸引人且易于理解的提示信息。本文将深入探讨Ext JS Notification插件的使用方法、功能特性以及如何集成到项目中...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    在ExtJS 4.x框架中,ComboboxTree是一种特殊的组件,它将传统的下拉框与树形结构结合在一起,提供了一种更为灵活的用户输入方式。这种组件在数据选择上非常实用,尤其当数据层级关系复杂时,可以方便地进行多选或...

    Ext 3.2的一个TreeGrid

    感谢 Ericzhen 远离颠倒梦想,蕴籍无上清凉 这里引用它的资源 仅作分享 http://www.cnblogs.com/Ericzhen/archive/2012/06/11/2545186.html

    如何在服务器端 读取Ext.ux.UploadDialog上传的文件?

    在使用 Ext.ux.UploadDialog 进行文件上传时,客户端与服务器端的交互是一个关键环节。Ext.ux.UploadDialog 是一个 ExtJS 框架的扩展组件,它提供了一个友好的用户界面来处理文件上传。在服务器端,我们需要正确解析...

    Ext.ux.GoogleChart extjs插件

    "Ext.ux.GoogleChart"就是这样一个插件,它允许开发者在ExtJS应用中集成Google Charts,以展示各种复杂的数据可视化图表。 Google Charts 是Google提供的一种免费服务,它提供了多种图表类型,如柱状图、折线图、...

    ExtJs3.* 分页树 Ext.ux.tree.PagingTreeLoader

    ExtJs 3.x 分页树(Ext.ux.tree.PagingTreeLoader)是一个强大的扩展,它在处理大量数据时尤其有用,因为树形结构通常需要显示大量的层级和节点。这个组件引入了分页功能,允许用户逐步加载树节点,而不是一次性加载...

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

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

    Ext.ux 收集

    NULL 博文链接:https://lingf.iteye.com/blog/1188654

    ext.ux.menu.storemenu.zip

    标题 "ext.ux.menu.storemenu.zip" 暗示我们关注的是一个与 ExtJS 框架相关的扩展组件,具体是 `ux.menu.storemenu`。这个扩展可能为 ExtJS 的菜单系统提供了一种新的功能,可能涉及到数据存储和动态加载菜单项。在...

Global site tag (gtag.js) - Google Analytics