`

itemselector-multiselect的数据过滤

    博客分类:
  • EXT
EXT 
阅读更多
纠结了半天,重写不了方法,只好改源码了。
itemselector.js 源码:
    //从左到右的图片点击按钮时间,包括双击事件。
    fromTo : function() {
        var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();
        var records = [];
        if (selectionsArray.length > 0) {
            for (var i=0; i<selectionsArray.length; i++) {
                record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
                records.push(record);
            }
            if(!this.allowDup)selectionsArray = [];
            for (var i=0; i<records.length; i++) {
                record = records[i];
                /**
                  *添加的代码
                  */
                for(var j=0; j<this.toMultiselect.view.store.getCount();j++){
                    var _toStoreRecord = this.toMultiselect.view.store.getAt(j);
                    if(record.get('列名')==_toStoreRecord.get('列名')){
                    //相同则不添加
                       return;
                    }
                }
                if(this.allowDup){
                    var x=new Ext.data.Record();
                    record.id=x.id;
                    delete x;
                    this.toMultiselect.view.store.add(record);
                }else{
                    this.fromMultiselect.view.store.remove(record);
                    this.toMultiselect.view.store.add(record);
                    selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
                }
            }
        }
        this.toMultiselect.view.refresh();
        this.fromMultiselect.view.refresh();
        var si = this.toMultiselect.store.sortInfo;
        if(si){
            this.toMultiselect.store.sort(si.field, si.direction);
        }
        this.toMultiselect.view.select(selectionsArray);
    },
   //从右到左的图片点击按钮时间,包括双击事件。

    toFrom : function() {
        var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
        var records = [];
        /**这里和上面差不多*/
        if (selectionsArray.length > 0) {
            for (var i=0; i<selectionsArray.length; i++) {
                record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
                records.push(record);
            }
            selectionsArray = [];
            for (var i=0; i<records.length; i++) {
                record = records[i];
                this.toMultiselect.view.store.remove(record);
                if(!this.allowDup){
                    this.fromMultiselect.view.store.add(record);
                    selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
                }
            }
        }
        this.fromMultiselect.view.refresh();
        this.toMultiselect.view.refresh();
        var si = this.fromMultiselect.store.sortInfo;
        if (si){
            this.fromMultiselect.store.sort(si.field, si.direction);
        }
        this.fromMultiselect.view.select(selectionsArray);
    }

multiselect.js 源码(拖拽时的数据过滤):
源码中在继承Ext.dd.DropZone时有重写该方法,当拖拽的数据源对象在目标区域降落时会调用该函数。在里面改吧。
    // private
    onNodeDrop : function(n, dd, e, data){
        //略 当数据不符合时return false;才能取消拖拽
     }


改源码不太好,最好是自己重写组件。我是查了N久没查到能有帮助的资料,重写组件能力不行就只好改源码了。希望大虾提供更好的办法哈。
分享到:
评论

相关推荐

    extjs4.2的itemselector

    `MultiSelect.js` 文件可能是修改后的 `itemselector` 组件实现,包含了对多选功能的扩展或优化。在这个文件中,我们可能会看到自定义的事件处理程序,用于监听用户在两个列表间的交互,以及与两个数据存储之间的...

    flex 模拟 ext 的 ItemSelector 双选框控件

    博客可能会讲解如何将数据源绑定到ItemSelector的各个部分,以确保UI的实时更新。 4. **事件处理**:为了响应用户的添加、删除或移动操作,自定义组件需要监听和处理各种事件,如点击、选择变化等。博客会介绍如何...

    最近项目需要,写个了itemSelector组件,半成品

    这里提到的`itemSelector`组件显然是一种定制化的选择器,可能用于用户在应用中进行项选择或者过滤操作。从标题“半成品”来看,这个组件可能还在开发阶段,尚未完全成熟,但已经具备一定的功能。 `itemSelector`...

    模仿Ext4实现ItemSelector

    模仿Ext4实现ItemSelector,在Rally App开发中虽然是Ext4,但ux包下面的对象被阉割了 所以手动实现了一个,布局和组件化方面还有待改进。

    Ext combobox 下拉多选框带搜索功能

    通常,这会涉及`queryMode`配置项设为`local`,然后在输入框的`keyup`事件中对数据源进行过滤。 5. **数据源**:多选下拉框可能需要处理多值的数据源,例如使用`Store`来存储和管理数据,同时确保数据源能支持多值...

    Extjs treeselector 树结构选择器

    ExtJS TreeSelector是一款基于ExtJS库的组件,它扩展了基础的itemselector功能,提供了一种以树形结构展示数据的选择器。这个组件特别适用于那些需要用户从层次化的数据集中进行选择的应用场景,例如组织架构、目录...

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

    itemSelector: 'div.x-combo-list-item' } }); ``` 这个例子创建了一个多选的ComboboxTree,其数据源是一个包含部门信息的TreeStore。 8. **优化与注意事项** - 对于大数据量的树形结构,考虑使用异步加载(`...

    jquery滚动滚动条加载数据 类似瀑布流

    itemSelector: '.item', columnWidth: 200 // 可以设置列宽 }); }); $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() == $(document).height()) { loadMoreData(); } }); ...

    ext-----多选下拉框

    9. **自定义渲染**: 通过`itemSelector`和`tpl`属性,你可以自定义每个选项在列表中的呈现方式,添加更多视觉元素或者复杂逻辑。 10. ** Accessibility**: 为了让无障碍性(Accessibility)更强,确保`ComboBox`遵循...

    extjs+struts2的一个套路模式

    例如,`getImageDataView()`函数创建了一个`DataView`实例,其中`itemSelector`定义了项的选择器,`style`控制滚动条行为,`multiSelect`允许多选。 #### 2.2 JsonStore实例化 `getPhotosJsonStore()`函数创建了一...

    Extjs MultiselectItemSelector

    `Multiselect.css` 文件是该组件的样式表,它定义了MultiselectItemSelector在页面上的视觉呈现,包括选中项的样式、滚动条的外观、布局以及其他UI元素。理解并自定义这些CSS规则对于调整组件以符合项目整体风格至关...

    筛选插件Shuffle.js和响应式网格分类、排序

    **描述分析:** "动画自适应,实现完美的布局,从移动端到pc端的完美变化,还可以搜索,过滤等功能" Shuffle.js的一个显著特点是其内置的动画效果。当用户对元素进行筛选或排序时,这些动画效果可以使过渡更为平滑...

    jQuery带图片过滤功能的Masonry瀑布流图片画廊

    itemSelector: '.item', // 选择器,指定要布局的元素 columnWidth: 200, // 列宽,可自定义 gutter: 10, // 列间距 }); ``` 5. **添加过滤功能**:创建过滤按钮,监听点击事件,根据所选类别动态调整可见图片...

    JavaScript插件化开发教程(六)

    这段代码定义了一个 `ItemSelector` 构造函数和它的原型对象 `ISProto`,原型对象用于定义方法,这样所有 `ItemSelector` 实例都可以共享这些方法。`getElem` 和 `getOpts` 方法被添加到原型上,这样通过 `...

    瀑布流+无限滚动加载数据

    itemSelector : '.item', // 选择要添加到页面的元素类名 loading: { finishedMsg: '没有更多内容了', img: 'loading.gif' // 加载动画 } }, function(newElements) { // 当新数据加载时执行的回调函数 var ...

    如何实现带有清单的组合框并选择ext js 4.2中的所有选项

    itemSelector: 'div.x-boundlist-item', getInnerTpl: function() { return '{name}'; } }, listeners: { checkchange: function(field, record, checked) { // 更新选择的值 } } }); ``` 6. **注意...

    jQuery分类排序

    itemSelector: '.item', sizer: '.item' // 如果需要精确尺寸计算,可以指定sizer元素 }); $('button').on('click', function() { var filterValue = $(this).data('shuffleFilter'); grid.shuffle('shuffle...

    Ext.DataView 图片列表显示

    itemSelector: 'li.phone', overClass : 'phone-hover', singleSelect: true, multiSelect : false, autoScroll : true }); new Ext.Panel({ layout: 'fit', items : dataview, height: document.body....

    Isotope 基于jQuery的智能布局插件实例大全

    itemSelector: '.element' }); }); ``` **5. 实例大全** 提供的"Isotope基于jQuery的智能布局插件实例大全"压缩包中,可能包含了多个示例,每个示例都展示了Isotope的不同应用场景和功能。通过学习这些实例,你...

    extJS3.1源码及demo

    它提供了丰富的组件库、强大的数据管理和用户界面组件,使得开发者能够创建出交互性强、功能丰富的网页应用。3.1版本是ExtJS的一个较早版本,尽管如此,它仍然包含了众多核心特性,如布局管理、数据绑定、表单组件等...

Global site tag (gtag.js) - Google Analytics