Extjs 将行拖放到列中
我是ExtJS新手,我尝试过“拖放”,当我拖动行时,它工作得很好。我现在尝试的是从左侧网格中拖出一行(MySQL中的一个字段),然后将其放到右侧网格中,该网格将数据库表中的数据作为一列提供 我现在使用的代码是Extjs 将行拖放到列中,extjs,Extjs,我是ExtJS新手,我尝试过“拖放”,当我拖动行时,它工作得很好。我现在尝试的是从左侧网格中拖出一行(MySQL中的一个字段),然后将其放到右侧网格中,该网格将数据库表中的数据作为一列提供 我现在使用的代码是 Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.dd.*' ]); Ext.define('DataObject', { extend: 'Ext.data.Mo
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*'
]);
Ext.define('DataObject', {
extend: 'Ext.data.Model',
fields: ['Field']
});
Ext.onReady(function(){
var firstGridStore = Ext.create('Ext.data.Store', {
model: 'DataObject',
autoLoad: true,
pageSize: 4,
proxy: {
type: 'ajax',
url : 'user.php',
reader: {
type: 'json',
root: 'users'
}
}
});
// Column Model shortcut array
var columns = [
{text: "Fields", sortable: true, width: 50, dataIndex: 'Field'}
];
var firstGrid = Ext.create('Ext.grid.Panel', {
multiSelect: true,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'firstGridDDGroup',
dropGroup: 'secondGridDDGroup'
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
}
}
},
store : firstGridStore,
columns : columns,
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0'
});
var secondGridStore = Ext.create('Ext.data.Store', {
model: 'DataObject'
});
// create the destination Grid
var secondGrid = Ext.create('Ext.grid.Panel', {
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'secondGridDDGroup',
dropGroup: 'firstGridDDGroup'
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);
}
}
},
store : secondGridStore,
columns : columns,
stripeRows : true,
title : 'Second Grid',
margins : '0 0 0 3'
});
//Simple 'border layout' panel to house both grids
var displayPanel = Ext.create('Ext.Panel', {
layout: 'fit',
height : 300,
layout : {
type: 'hbox',
align: 'stretch',
padding: 5
},
renderTo : 'panel',
defaults : { flex : 1 }, //auto stretch
items : [
firstGrid,
secondGrid
],
dockedItems: {
xtype: 'toolbar',
dock: 'bottom',
items: ['->', // Fill
{
text: 'Reset both grids',
handler: function(){
//refresh source grid
firstGridStore.loadData(myData);
//purge destination grid
secondGridStore.removeAll();
}
}]
}
});
});
根据我的要求,左网格中的字段应该是右网格中数据(来自数据库)的标题
左侧网格将具有如下网格数据:字段
id
名称
数据
从左侧网格拖动数据后,右侧网格应具有如下数据:
id
1
2
3
注意:此处仅拖动id 有人能帮我吗 谢谢。您可以使用“beforedrop”而不是“drop”事件,但是您可以通过为dropFunction属性指定一个新函数来设置自己的自定义drop处理程序,希望它能成为帮助您解决问题的聚光灯!!
另外,请注意要记住的几件事
Ext.define('DataObject', {
extend: 'Ext.data.Model',
fields: [
'id',
'name',
'data'
]
});
items: [
{ dataIndex: 'id', hidden: true } ,
{ dataIndex: 'name', hidden: true },
{ text: 'title', dataIndex: 'data', width: xx } // loose example
]