`
linwei_211
  • 浏览: 192058 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

修改ext中拖拽和CheckboxSelectionModel冲突的问题

阅读更多
因为gridpanel定义了拖拽 所以致使选中gridpanel的数据行 就不能取消了
作如下扩展:

Ext.grid.RowSelectionModel.override(
{
    // FIX: added this function so it could be overrided in CheckboxSelectionModel
    handleDDRowClick: function(grid, rowIndex, e)
    {
        if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
            this.selectRow(rowIndex, false);
            grid.view.focusRow(rowIndex);
        }
    },
   
    initEvents: function ()
    {
        if(!this.grid.enableDragDrop && !this.grid.enableDrag){
            this.grid.on("rowmousedown", this.handleMouseDown, this);
        }else{ // allow click to work like normal
            // FIX: made this handler function overrideable
            this.grid.on("rowclick", this.handleDDRowClick, this);
        }

        this.rowNav = new Ext.KeyNav(this.grid.getGridEl(), {
            "up" : function(e){
                if(!e.shiftKey){
                    this.selectPrevious(e.shiftKey);
                }else if(this.last !== false && this.lastActive !== false){
                    var last = this.last;
                    this.selectRange(this.last,  this.lastActive-1);
                    this.grid.getView().focusRow(this.lastActive);
                    if(last !== false){
                        this.last = last;
                    }
                }else{
                    this.selectFirstRow();
                }
            },
            "down" : function(e){
                if(!e.shiftKey){
                    this.selectNext(e.shiftKey);
                }else if(this.last !== false && this.lastActive !== false){
                    var last = this.last;
                    this.selectRange(this.last,  this.lastActive+1);
                    this.grid.getView().focusRow(this.lastActive);
                    if(last !== false){
                        this.last = last;
                    }
                }else{
                    this.selectFirstRow();
                }
            },
            scope: this
        });

        var view = this.grid.view;
        view.on("refresh", this.onRefresh, this);
        view.on("rowupdated", this.onRowUpdated, this);
        view.on("rowremoved", this.onRemove, this);
    }
});

Ext.grid.CheckboxSelectionModel.override(
{
    // FIX: added this function to check if the click occured on the checkbox.
    //      If so, then this handler should do nothing...
    handleDDRowClick: function(grid, rowIndex, e)
    {
        var t = Ext.lib.Event.getTarget(e);
        if (t.className != "x-grid3-row-checker") {
            Ext.grid.CheckboxSelectionModel.superclass.handleDDRowClick.apply(this, arguments);
        }
    }
});

Ext.grid.GridDragZone.override(
{
    getDragData: function (e)
    {
        var t = Ext.lib.Event.getTarget(e);
        var rowIndex = this.view.findRowIndex(t);
        if(rowIndex !== false){
            var sm = this.grid.selModel;
            // FIX: Added additional check (t.className != "x-grid3-row-checker"). It may not
            //      be beautiful solution but it solves my problem at the moment.
            if ( (t.className != "x-grid3-row-checker") && (!sm.isSelected(rowIndex) || e.hasModifier()) ){
                sm.handleMouseDown(this.grid, rowIndex, e);
            }
            return {grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections:sm.getSelections()};
        }

        return false;
    }
});
分享到:
评论

相关推荐

    EXT学习心得,ext

    在EXT中,下拉框(ComboBox)的事件处理可以通过`on`方法绑定事件监听器。例如,当`bankFullName`下拉框发生改变时,触发`Ext.getCmp('bankTypeCd').setValue(Ext.getCmp('bankFullName').getValue());`,这使得`...

    Ext TreePanel

    【Ext TreePanel】是Ext JS库中的一个组件,主要用于展示层次结构...总之,Ext TreePanel和EditorGridPanel是Ext JS中处理树形数据和可编辑表格的强大工具,它们提供了丰富的功能和定制选项,满足各种复杂的应用场景。

    Ext2.0示例讲解

    在描述中提到,Ext2.0的Grid控件不仅美观,还支持多种数据格式,如二维数组、JSON和XML,甚至允许自定义数据类型。 Grid的核心组成部分包括ColumnModel(列模型)和Store(数据存储)。ColumnModel定义了表格的结构...

    Ext框架的Grid使用介绍

    Grid组件在EXT JS中扮演着数据表格的角色,可以展示多列数据,并且支持排序、分页、筛选、编辑等功能。它的灵活性在于能够根据需求定制各种复杂的行为,如自定义列渲染、行编辑、拖放排序等。以下是一些关于EXT JS ...

    Ext2.0框架的grid使用

    Grid组件在Ext2.0框架中主要用于展示表格形式的数据,支持多样的数据源类型,包括二维数组、JSON数据和XML数据,甚至是用户自定义的数据格式。这一灵活性得益于框架提供的`Ext.data.Store`,它作为数据与Grid间的...

    grid js 例子一个 ext 的

    根据给定的信息,我们可以推断出这是一篇关于如何使用 Ext JS 框架中的 Grid 组件的文章。Ext JS 是一款基于 JavaScript 的前端框架,它提供了丰富的用户界面组件,包括表格(Grid)。以下是对该文章内容的详细解读...

    Ext常用功能开发总结

    在本文中,我们将深入探讨基于ExtJS库的前端开发中的一些关键功能,特别是与表格相关的操作,以及对话框、弹出窗口和可伸缩面板的使用。ExtJS是一款强大的JavaScript框架,它为创建复杂的Web应用程序提供了丰富的...

    Ext2[1].0框架的Grid使用介绍

    与其他框架如YUI相比,Ext2.0拥有更加完善的控件集合和强大的数据处理能力,特别是对于数据展示方面,Ext2.0中的Grid控件功能强大,能够满足大多数数据展示的需求。 #### 二、Grid控件介绍 Grid控件是Ext2.0中最...

    Ext2.0框架的Grid使用介绍

    Grid是Ext2.0中用于展示数据的重要组件之一,它不仅能够显示各种格式的数据(如二维数组、JSON或XML),还支持数据的排序、过滤和分页等功能。Grid的核心在于`Ext.grid.GridPanel`类及其相关的配置项。 ##### 1. ...

    弥补ExtJs CheckboxSelectionModel不能级联的自定义控件

    这篇名为"弥补ExtJs CheckboxSelectionModel不能级联的自定义控件"的博客文章,显然是为了解决这个问题,提供了一个自定义的解决方案。作者Brooke在ITEYE博客上分享了这个方法,帮助开发者实现级联选择的功能。虽然...

    JSP+EXt2.0实现分页的方法

    var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号',dataIndex:'id',sortable:true}, {header:'名称',dataIndex:'name',...

    第三方控件Coolite使用教程

    在本文中,我们将深入探讨如何使用第三方控件Coolite,特别是关于Ext2.0框架的Grid控件。Ext2.0是一个JavaScript库,它提供了强大的数据展示能力,支持多种数据格式,如二维数组、JSON、XML,以及自定义数据类型。...

    ext 代码生成器

    `ext 代码生成器`是一个工具,用于自动化生成EXTJS框架中的代码,特别是与数据展示、编辑和删除相关的部分。在给定的描述中提到,XCodeBuilder是一个这样的工具,它不仅能够生成.NET三层架构的代码,还能生成处理层...

    ExtJs grid多选时获取选中的所有值

    在ExtJs中,实现Grid的多选功能主要通过`CheckboxSelectionModel`来完成。下面将详细介绍如何设置并使用`CheckboxSelectionModel`实现Grid的多选功能。 #### 三、配置CheckboxSelectionModel 1. **创建Store**:...

    combobox Ext之扩展组件多选下拉框

    - 如果需要在下拉列表中显示复选框,可以使用`checkboxSelectionModel`作为列表的`selModel`,并根据需要配置相关属性,如`showHeader`(是否显示列头,列头中包含复选框)。 5. **值的管理**: - `value`:多选...

    Extjs树菜单的构成

    `href`和`hrefTarget`分别用于设置链接地址和打开方式,`draggable`决定节点是否可拖动,`checked`控制是否显示复选框,`allowChildren`和`allowDrag`分别指节点是否允许添加子节点和是否允许拖动等。创建树节点时,...

    Extjs Grid 用法 pdf版

    var sm = new Ext.grid.CheckboxSelectionModel(); // 定义 ColumnModel var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), // 自动行号 sm, // 添加 CheckBox {header: '编号', dataIndex: 'id...

    汇总Extjs中GridPanel的各个属性与方法.doc.docx

    13. **Ext.grid.CheckboxSelectionModel**: 这是一种特殊的选择模型,允许用户通过复选框选择行。它提供了一种方便的多选方式。 14. **Ext.grid.GridView**: GridView 是 GridPanel 的视图组件,控制着数据的...

    Grid得到选择行数据的方法总结

    //得到选择所有行 //注:如果不声明var sm = new Ext.grid.CheckboxSelectionModel();则会报此句没有该对象或属性 Var selectRows = grid.getSelectionModel().getSelections(); selectRows[0].get(“gird中某列的...

Global site tag (gtag.js) - Google Analytics