我在ExtJS 7.2上使用现代材料主题的一个商店的记录的网格。我想从这个视图中创建多个浮动的、可拖动的formppanels,但是当我拖动formpanel时,关闭它,在formpanel的位置留下一个空白的白色空间,遮住了背景。这里是formpanel的来源。
onItemClick: function (grid,rowIndex,e) {
var record = grid.getStore().getAt(rowIndex);
var form = Ext.create({
xtype: 'formpanel',
id: `${record.id}_form_${record.get('blah')}`,
title: `Invoice ${record.get('blah')}`,
floating: true,
closable: true,
centered: true,
draggable: true,
shadow: true,
width:300,
height:window.innerHeight*0.8,
scrollable: true,
modal: null,
items: [
{
xtype: 'textfield',
name: 'Blah',
label: 'Blah',
value: record.get('blah'),
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [{
xtype: 'button',
text: 'Save',
ui: 'raised round',
iconCls: 'x-fa fa-save',
handler: function() {
var theform = this.up('formpanel').getFields();
record.set(
{
'blah': theform['Blah'].getValue(),
}
);
this.up('formpanel').destroy();
}
},'->', {
xtype: 'button',
text: 'Cancel',
ui: 'raised round',
iconCls: 'x-fa fa-close',
handler: function() {
this.up('formpanel').destroy();
},
}]
}
]
});
Ext.Viewport.add(form);
}
有谁有这个问题的经验吗?我试着用一个自定义的Ext.drag.Source对象来解决,但至今没有成功。当我试图关闭一个已被拖动的formpanel时,我得到一个错误。
TypeError: Node.replaceChild 的 Argument 1 不是一个对象。
希望得到任何帮助。
类似这样的方法。
onItemClick: function (grid,rowIndex,e) {
var record = grid.getStore().getAt(rowIndex);
var form = Ext.create({
xtype: 'formpanel',
id: `${record.id}_form_${record.get('blah')}`,
title: `Invoice ${record.get('blah')}`,
floated: true, // It is not called "floating"
closable: true,
centered: true,
draggable: true,
shadow: true,
width:300,
height:window.innerHeight*0.8,
scrollable: true,
modal: null,
items: [
{
xtype: 'textfield',
name: 'Blah',
label: 'Blah',
value: record.get('blah'),
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [{
xtype: 'button',
text: 'Save',
ui: 'raised round',
iconCls: 'x-fa fa-save',
handler: function() {
var theform = this.up('formpanel').getFields();
record.set(
{
'blah': theform['Blah'].getValue(),
}
);
this.up('formpanel').destroy();
}
},'->', {
xtype: 'button',
text: 'Cancel',
ui: 'raised round',
iconCls: 'x-fa fa-close',
handler: function() {
this.up('formpanel').destroy();
},
}]
}
]
});
form.show(); // Show instead of add to Viewport.
//Ext.Viewport.add(form);
}