纠结了半天,重写不了方法,只好改源码了。
itemselector.js 源码:
multiselect.js 源码(拖拽时的数据过滤):
源码中在继承Ext.dd.DropZone时有重写该方法,当拖拽的数据源对象在目标区域降落时会调用该函数。在里面改吧。
改源码不太好,最好是自己重写组件。我是查了N久没查到能有帮助的资料,重写组件能力不行就只好改源码了。希望大虾提供更好的办法哈。
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久没查到能有帮助的资料,重写组件能力不行就只好改源码了。希望大虾提供更好的办法哈。
发表评论
-
ExtJS DeskTop组件的学习
2010-12-12 23:02 2422网上千篇一律的 sample.js的代码解释。 //菜单里 ... -
[转载]Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理
2010-12-12 23:00 1304使用Ext.Ajax.request提交数据的代码如下(这段代 ... -
[转载]ExtJS中tabPanel的实现详解
2010-12-12 22:59 1787在做这项目有快一年了,有些体会想和大家分享分享,所以决定利用这 ... -
[转载]Ext中TreePanel控件和TabPanel控件搭配测试
2010-12-12 22:58 1016在实际的项目中,左边树形菜单,提供各种功能点击,右边一个面板, ... -
[转载]EXT核心API详解Ext.widgets(二十)-grid(2)
2010-12-12 22:57 1097Ext.grid.EditorGridPanel 可编辑数据表 ... -
[转载]EXT核心API详解Ext.widgets(十九)-grid(1)
2010-12-12 22:56 859Ext.grid.ColumnModel 用于定义Grid的列 ... -
[转载]EXT核心API详解Ext.Toolbar(十八)
2010-12-12 22:55 1381构造 add( Mixed arg1, Mixed arg2 ... -
[转载]EXT核心API详解Ext.menu.Menu(十七)
2010-12-12 22:55 1219Ext.menu.Menu 菜单对象 config{ ... -
[转载]EXT核心API详解Ext.widgets(十六)-form(下)
2010-12-12 22:54 908Ext.form.NumberField 继承自E ... -
[转载]EXT核心API详解Ext.widgets(十五)-form(上)
2010-12-12 22:54 870Ext.form.BasicForm 对应一个dom中的for ... -
[转载]EXT核心API详解Ext.widgets(十四)-Button,SplitButton,CycleButton
2010-12-12 22:53 889Ext.Action action实现一个脱离了容 器的事件, ... -
[转载]EXT核心API详解Ext.data(十三)-Tree/Node
2010-12-12 22:51 952Ext.data.Tree 继承自Observab ... -
[转载]EXT核心API详解Ext.data(十二)-GroupingStore/JsonStore/SimpleStore javascript
2010-12-12 22:51 825Ext.data.GroupingStore 继承自Ext.d ... -
[转载]EXT核心API详解Ext.data(十一)-Store
2010-12-12 22:50 727Ext.data.Store store是一个为Ext器件提 ... -
[转载]EXT核心API详解Ext.data(十)-DataReader/ArrayReader/JsonReader/XmlReader javascript
2010-12-12 22:49 873Ext.data.DataReader 纯虚类,从数据源得到 ... -
EXT核心API详解(九)-Ext.data-DataProxy/HttpProxy/MemoryProxy/ScriptTagProxy javascript
2010-12-12 22:48 1203Ext.data.DataProxy 数据代理类是一个纯虚类 ... -
[转载]EXT核心API详解(八)-Ext.dat-Connection/Ajax/Record javascript
2010-12-12 22:46 724Ext.data.Connection 访问指 ... -
[转载]EXT核心API详解(七)-Ext.KeyNav/KeyMap/JSON/Format/DelayedTask/TaskRunner/TextMetri
2010-12-12 22:46 751Ext.KeyNav Ext的keyNav类能为Ext.El ... -
[转载]EXT核心API详解(六)Ext.Fx
2010-12-12 22:45 719Ext.Fx类 对于我这样的 ... -
[转载]EXT核心API详解(五)Ext.EventManager/EventObject/CompositeElement/CompositeElementL
2010-12-12 22:44 785Ext.EventManager 事件管理者中的大部分方法都 ...
相关推荐
`MultiSelect.js` 文件可能是修改后的 `itemselector` 组件实现,包含了对多选功能的扩展或优化。在这个文件中,我们可能会看到自定义的事件处理程序,用于监听用户在两个列表间的交互,以及与两个数据存储之间的...
博客可能会讲解如何将数据源绑定到ItemSelector的各个部分,以确保UI的实时更新。 4. **事件处理**:为了响应用户的添加、删除或移动操作,自定义组件需要监听和处理各种事件,如点击、选择变化等。博客会介绍如何...
这里提到的`itemSelector`组件显然是一种定制化的选择器,可能用于用户在应用中进行项选择或者过滤操作。从标题“半成品”来看,这个组件可能还在开发阶段,尚未完全成熟,但已经具备一定的功能。 `itemSelector`...
模仿Ext4实现ItemSelector,在Rally App开发中虽然是Ext4,但ux包下面的对象被阉割了 所以手动实现了一个,布局和组件化方面还有待改进。
通常,这会涉及`queryMode`配置项设为`local`,然后在输入框的`keyup`事件中对数据源进行过滤。 5. **数据源**:多选下拉框可能需要处理多值的数据源,例如使用`Store`来存储和管理数据,同时确保数据源能支持多值...
ExtJS TreeSelector是一款基于ExtJS库的组件,它扩展了基础的itemselector功能,提供了一种以树形结构展示数据的选择器。这个组件特别适用于那些需要用户从层次化的数据集中进行选择的应用场景,例如组织架构、目录...
itemSelector: 'div.x-combo-list-item' } }); ``` 这个例子创建了一个多选的ComboboxTree,其数据源是一个包含部门信息的TreeStore。 8. **优化与注意事项** - 对于大数据量的树形结构,考虑使用异步加载(`...
itemSelector: '.item', columnWidth: 200 // 可以设置列宽 }); }); $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() == $(document).height()) { loadMoreData(); } }); ...
9. **自定义渲染**: 通过`itemSelector`和`tpl`属性,你可以自定义每个选项在列表中的呈现方式,添加更多视觉元素或者复杂逻辑。 10. ** Accessibility**: 为了让无障碍性(Accessibility)更强,确保`ComboBox`遵循...
例如,`getImageDataView()`函数创建了一个`DataView`实例,其中`itemSelector`定义了项的选择器,`style`控制滚动条行为,`multiSelect`允许多选。 #### 2.2 JsonStore实例化 `getPhotosJsonStore()`函数创建了一...
`Multiselect.css` 文件是该组件的样式表,它定义了MultiselectItemSelector在页面上的视觉呈现,包括选中项的样式、滚动条的外观、布局以及其他UI元素。理解并自定义这些CSS规则对于调整组件以符合项目整体风格至关...
**描述分析:** "动画自适应,实现完美的布局,从移动端到pc端的完美变化,还可以搜索,过滤等功能" Shuffle.js的一个显著特点是其内置的动画效果。当用户对元素进行筛选或排序时,这些动画效果可以使过渡更为平滑...
itemSelector: '.item', // 选择器,指定要布局的元素 columnWidth: 200, // 列宽,可自定义 gutter: 10, // 列间距 }); ``` 5. **添加过滤功能**:创建过滤按钮,监听点击事件,根据所选类别动态调整可见图片...
这段代码定义了一个 `ItemSelector` 构造函数和它的原型对象 `ISProto`,原型对象用于定义方法,这样所有 `ItemSelector` 实例都可以共享这些方法。`getElem` 和 `getOpts` 方法被添加到原型上,这样通过 `...
itemSelector : '.item', // 选择要添加到页面的元素类名 loading: { finishedMsg: '没有更多内容了', img: 'loading.gif' // 加载动画 } }, function(newElements) { // 当新数据加载时执行的回调函数 var ...
itemSelector: 'div.x-boundlist-item', getInnerTpl: function() { return '{name}'; } }, listeners: { checkchange: function(field, record, checked) { // 更新选择的值 } } }); ``` 6. **注意...
itemSelector: '.item', sizer: '.item' // 如果需要精确尺寸计算,可以指定sizer元素 }); $('button').on('click', function() { var filterValue = $(this).data('shuffleFilter'); grid.shuffle('shuffle...
itemSelector: 'li.phone', overClass : 'phone-hover', singleSelect: true, multiSelect : false, autoScroll : true }); new Ext.Panel({ layout: 'fit', items : dataview, height: document.body....
itemSelector: '.element' }); }); ``` **5. 实例大全** 提供的"Isotope基于jQuery的智能布局插件实例大全"压缩包中,可能包含了多个示例,每个示例都展示了Isotope的不同应用场景和功能。通过学习这些实例,你...
它提供了丰富的组件库、强大的数据管理和用户界面组件,使得开发者能够创建出交互性强、功能丰富的网页应用。3.1版本是ExtJS的一个较早版本,尽管如此,它仍然包含了众多核心特性,如布局管理、数据绑定、表单组件等...