我想在将项目从一个面板拖动到另一个面板时在Extjs中创建占位符。项目是dataView记录。
Ext.application({
name: 'Fiddle',
launch: function () {
simpsonsStore = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['id', 'name', 'email'],
data: [{
name: 'Lisa',
email: '[email protected]',
id: 1
}, {
name: 'Bart',
email: '[email protected]',
id: 2
}, {
name: 'Homer',
email: '[email protected]',
id: 3
}, {
name: 'Marge',
email: '[email protected]',
id: 4
}]
});
Ext.create('Ext.panel.Panel', {
scrollable: 'horizontal',
bodyCls: 'scrollBarOn',
region: 'center',
width: '100%',
height: 800,
layout: 'hbox',
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
width: 200,
height: 500,
items: [{
xtype: 'dataview',
itemSelector: 'div.detail',
tpl: ['<tpl for=".">',
'<div class="detail">{name}</div>', '</tpl>'
],
margin: '0 0 0 0',
store: simpsonsStore,
scrollable: 'vertical',
focusable: false,
setTemplate: function (template, itemSelector) {
this.tpl = template;
this.itemSelector = itemSelector;
this.refresh();
},
listeners: {
render: function (v) {
var currentRef = this;
new Ext.view.DragZone({ //Create Drag Zone
view: currentRef,
ddGroup: 'kanbanDataviewDrag',
dragText: '1 row selected'
});
new Ext.view.DropZone({ //Create Drop Zone
view: currentRef,
ddGroup: 'kanbanDataviewDrag',
handleNodeDrop: function (data, record,
position) { //When Handle Node Drop
var view = this.view,
store = view.getStore(),
index, records, i, len;
if (data.copy) {
records = data.records;
data.records = [];
for (i = 0, len = records.length; i <
len; i++) {
data.records.push(records[i].copy(
records[i].getId()));
}
} else {
data.view.store.remove(data.records,
data.view === view);
}
index = store.indexOf(record);
if (position !== 'before') {
index++;
}
store.insert(index, data.records);
store.commitChanges();
}
});
}
}
}]
}, {
xtype: 'panel',
width: 200,
height: 500,
items: [{
xtype: 'dataview',
itemSelector: 'div.detail',
tpl: ['<tpl for=".">',
'<div class="detail">{name}</div>', '</tpl>'
],
margin: '0 0 0 0',
store: simpsonsStore,
scrollable: 'vertical',
focusable: false,
setTemplate: function (template, itemSelector) {
this.tpl = template;
this.itemSelector = itemSelector;
this.refresh();
},
listeners: {
render: function (v) {
var currentRef = this;
new Ext.view.DragZone({ //Create Drag Zone
view: currentRef,
ddGroup: 'kanbanDataviewDrag',
dragText: '1 row selected'
});
new Ext.view.DropZone({ //Create Drop Zone
view: currentRef,
ddGroup: 'kanbanDataviewDrag',
handleNodeDrop: function (data, record,
position) { //When Handle Node Drop
var view = this.view,
store = view.getStore(),
index, records, i, len;
if (data.copy) {
records = data.records;
data.records = [];
for (i = 0, len = records.length; i <
len; i++) {
data.records.push(records[i].copy(
records[i].getId()));
}
} else {
data.view.store.remove(data.records,
data.view === view);
}
index = store.indexOf(record);
if (position !== 'before') {
index++;
}
store.insert(index, data.records);
store.commitChanges();
}
});
}
}
}]
}]
});
}
});
小提琴：https://fiddle.sencha.com/#fiddle/1i2u
我想在你拖动任何项目时创建这样的占位符：http://www.bryntum.com/examples/taskboard-latest/examples/kitchensink/index.html#examples/basic
我已经更新了您的小提琴示例并制定了可行的解决方案。主要问题是拖动时选择文本。通过这个解决方案，我们通过使用平面按钮摆脱了这一点。
变化
我没有小提琴帐户，所以我将在这里分享代码。
index.css
.detail
{
border: 0;
background: none;
box-shadow:none;
border-radius: 0px;
}
app.js
var renderFunc = function(v) {
var currentRef = this;
new Ext.view.DragZone({ //Create Drag Zone
view: currentRef,
ddGroup: 'kanbanDataviewDrag',
dragText: '1 row selected'
});
new Ext.view.DropZone({ //Create Drop Zone
view: currentRef,
ddGroup: 'kanbanDataviewDrag',
handleNodeDrop: function(data, record, position) { //When Handle Node Drop
var view = this.view,
store = view.getStore(),
index, records, i, len;
if (data.copy) {
records = data.records;
data.records = [];
for (i = 0, len = records.length; i < len; i++) {
data.records.push(records[i].copy(records[i].getId()));
}
} else {
data.view.store.remove(data.records, data.view === view);
}
index = store.indexOf(record);
if (position !== 'before') {
index++;
}
store.insert(index, data.records);
store.commitChanges();
}
});
}
var itemTeplate = function(){
return '<div><button class="detail">{name}</button></div>';
}
Ext.application({
name: 'Fiddle',
launch: function() {
simpsonsStore = Ext.create('Ext.data.Store', {
fields: ['id', 'name', 'email'],
data: [
{name: 'Lisa', email: '[email protected]', id: 101},
{name: 'Bart', email: '[email protected]', id: 102},
{name: 'Homer', email: '[email protected]', id: 103},
{name: 'Marge', email: '[email protected]', id: 104}
]
});
jetsonsStore = Ext.create('Ext.data.Store', {
fields: ['id', 'name', 'email'],
data: [
{name: 'George', email: '[email protected]', id: 201},
{name: 'Jane', email: '[email protected]', id: 202},
{name: 'Judy', email: '[email protected]', id: 203},
{name: 'Elroy', email: '[email protected]', id: 204}
]
});
Ext.create('Ext.panel.Panel', {
scrollable: 'horizontal',
bodyCls: 'scrollBarOn',
region: 'center',
width: '100%',
height: 800,
layout: 'hbox',
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
width: 200,
height: 500,
items: [
{
xtype: 'dataview',
itemSelector: 'div',
tpl: ['<tpl for=".">', itemTeplate(), '</tpl>'],
margin: '0 0 0 0',
store: simpsonsStore,
scrollable: 'vertical',
focusable: false,
mode: 'single',
setTemplate: function(template, itemSelector) {
this.tpl = template;
this.itemSelector = itemSelector;
this.refresh();
},
listeners: {
render: renderFunc
}
}
]
},
{
xtype: 'panel',
width: 200,
height: 500,
items: [
{
xtype: 'dataview',
itemSelector: 'div',
tpl: ['<tpl for=".">', itemTeplate(), '</tpl>'],
margin: '0 0 0 0',
store: jetsonsStore,
scrollable: 'vertical',
mode: 'single',
focusable: false,
setTemplate: function(template, itemSelector) {
this.tpl = template;
this.itemSelector = itemSelector;
this.refresh();
},
listeners: {
render: renderFunc
}
}
]
}]
});
}
});