【问题标题】:Drag and drop in Itemselector extJS在Itemselector extJS中拖放
【发布时间】:2017-12-17 23:17:15
【问题描述】:
如何禁用Itemselector 中的项目(见附件)?我想在将项目移动到目标字段时禁用源字段中的某些项目。你能帮我解决这个问题吗?
ATTACHMENT - Image
我进行了很多搜索并应用了所有可能的方法。我发现没有办法。
由于默认情况下没有禁用选项(据我所知),我将删除列表中的项目并在需要时再次添加。在这里我有一个疑问。用户可以从左边拖到右边,也可以从右边拖到左边。怎么知道他从哪里拖?是否有任何方法或功能可以确定源位置?
【问题讨论】:
标签:
javascript
extjs
itemselector
【解决方案1】:
不幸的是,这需要相当多的手动工作,因为 ExtJS 不支持开箱即用地禁用网格、组合框等中的记录。
我已经描述了here 如何创建一个带有禁用记录的组合框。由于组合框和 itemselector 都依赖于 boundlist,所以这很方便。
正如您在ItemSelector 的源代码中所见,它有两个属性,fromField 和toField,其中包含两个multiselect 组件。您可以将事件附加到这些列表或它们各自的boundlist。
一个快速的小提琴,它展示了如何使禁用的元素变灰以及如何防止禁用元素的拖放:https://fiddle.sencha.com/#view/editor&fiddle/2382
缺少的是按钮在添加之前不会检查记录是否被禁用,您必须为此覆盖 ItemSelector 的 onAddBtnClick 方法。如果您从 ItemSelector 派生一个新的自定义组件,这比在我的 Quick and Dirty fiddle 中要容易得多。所以我强烈建议你定义自己的从 ItemSelector 派生的自定义组件。