Extjs中tree树结点拖动到grid显示数据
树结点的配置
items: [{
xtype: 'treepanel',
border: false,
title: '元素',
id: "subProcess_tree_" + currentTab.getIdIndex(),
useArrows: true,
rootVisible: false,
autoScroll: true,
enableDD: false,
viewConfig: {
// 加入允许拖动功能
plugins: [{
ptype: 'treeviewdragdrop',
// 元素节点的拖动
ddGroup: 'elementDrag',
// 设为false，不允许在中拖动
enableDrop: false
}]
},
// 不允许放
root: designMxgraph.updateTreeNode()
}]
grid的配置
renderFun: function (me, eOpts) {
var firstGridDropTarget = new Ext.dd.DropTarget(me.getEl().dom, {
ddGroup: 'DDGroup',
notifyOver: function (ddSource, e, data) {
var nodes = data.records;
var rtn = 'x-dd-drop-ok';
var iconCls = nodes[0].get('iconCls')
if (nodes[0].isLeaf() && (iconCls !== 'tr-node-rule-leaf')) {
return rtn;
}
return '';
},
notifyDrop: function (ddSource, e, data) {
var nodes = data.records;
var iconCls = nodes[0].get('iconCls')
// 判断单过程指标是否从业务视图拖动进入列表grid
if (nodes[0].isLeaf() && (iconCls !== 'tr-node-rule-leaf')) {
if (selTable.bizview && BizViewData.text !== selTable.bizview) {
Ext.MessageBox.show({
title: '提示',
msg: "引用无效，该子过程已经绑定（" + selTable.bizview + "），是否切换业务视图？",
buttons: Ext.MessageBox.YESNO,
icon: Ext.MessageBox.QUESTION,
fn: function (btn, text) {
if (btn === 'ok') {
//打开业务视图成功
function processData(data) {
var leftbox = Ext.getCmp('leftBox');
leftbox.loadData(data, myMask, win);
}
Ext.getCmp("leftTabPanel").getLayout().doResetActiveItem(0);
Ext.Ajax.request({
url: 'bizview/open',
method: 'post',
params: {
name: encodeURIComponent(targetTable.bizview)
},
success: function (obj) {
feedBackResult(obj.responseText, processData)
},
failure: function (obj) {
// console.log(obj);
}
});
} else {
if (myMask) myMask.hide();
return false;
}
}
});
return;
}
if (selTable.type === ruleTableType.from_unknow) {
selTable.type = ruleTableType.from_bizview;//表类型初始化
}
var dropNodes = nodes;
for (var i = 0; i < dropNodes.length; i++) {
var dropNode = dropNodes[i];
var expr_Type = dropNode.data.EXPR_TYPE;
if (!dropNode.isLeaf() || expr_Type === ExprType.Filter || expr_Type === ExprType.DynamicParameter) return false;
var displayName = funCol.getNewGridName(dropNode.data.text);
var dataType = getIdxDataType(dropNode);
var expr = [{
type: exprTokenType.field,
eName: displayName,
cName: displayName,
expr: dropNode.data.EXPR_ID,
rtType: dataType
}];
var new_output = true;
if (selTable.isCollection) {
new_output = false;
}
var record = {
columnExpr: expr,
columnId: 'ti_' + cosmoUtils.getRandomId(10),
columnDisplayName: displayName,
// false没有选中,true:选中
columnPartition: false,
// 计算类型
columnSummaryType: '',
columnSortmode: 'nosort',
columnType: dataType,
columnLength: '',
columnOutPut: new_output//,输出:false没有选中,true:选中
}
var records = {
columnCheckbox: '',
columnId: record.columnId,
columnFieldsName: record.columnDisplayName,
columnType: record.columnType,//类型
columnLength: record.columnLength, //长度
columnDisplayName: record.columnDisplayName,
columnExpr: record.columnExpr
}
}
if (BizViewData.text) {
selTable.bizview = BizViewData.text;
}
return true;
}
return true;
}
});
},
grid节点配置
QuerySetInZbTab.querySetGrid = Ext.create('GRE.view.commonJs.rule.GridPanel', {
reference: 'querySettingGrid',
bind: {
store: '{querySetGridStore}'
},
tbar: QuerySetInZbTab.zbSettingToolBar(),
region: 'center',
enableDragDrop: true,
border: false,
stripeRows: true,
columns: [
{
xtype: 'actioncolumn',
flex: 1,
align: "center",
menuDisabled: true,
items: [{
iconCls: 'zb_col_icon_div'
}]
},
{
header: '名称',
dataIndex: 'columnDisplayName',
flex: 2,
editor: new Ext.form.TextField({}),
renderer: function (value, metadata, record, rowIndex) {
debugger
return record.data.columnDisplayName;
}
},
{
header: "排序",
align: "center",
flex: 1,
dataIndex: 'columnSortmode',
renderer: function (value, metadata, record, rowIndex) {
var data = record.data;
var css = "adhoc_sort";
if (data.columnSortmode != "nosort")
css += "_" + data.columnSortmode;
return '<div row=' + rowIndex + ' order=' + data.columnSortmode + ' onclick="QuerySetInZbTab.setOrder(this)" class=' + css + '></div>';//gridTabs.setOrder(this)
}
}, {
xtype: 'checkcolumn',
header: "输出",
flex: 1,
dataIndex: 'columnOutPut'
},
{
header: "计算",
flex: 1,
stopSelection: true,
dataIndex: 'columnSummaryType',
editor: {
xtype: 'combo',
store: new Ext.data.Store({
fields: ["value", "text"],
data: [["", "无"], ["SUM", "合计"], ["COUNT", "计数"], ["AVG", "平均"],
["MAX", "最大值"], ["MIN", "最小值"]]
}),
displayField: 'text',
valueField: 'value',
editable: false,
listeners: {
focus: function (me, event) {
me.expand();
},
change: function (me, val) {
me.blur();
}
}
},
renderer: function (value, metadata, record, rowIndex) {
var str = '无';
switch (record.data.columnSummaryType) {
case'SUM':
str = '合计';
break;
case'COUNT':
str = '计数';
break;
case 'AVG':
str = '平均';
break;
case'MAX':
str = '最大值';
break;
case'MIN':
str = '最小值';
break;
default:
break;
}
return str;
}
}, {
xtype: 'actioncolumn',
align: "center",
fixed: true,
width: 30,
items: [{
iconCls: 'expr-edit-icon',
handler: function (view, rowIndex, colIndex, item, e, record) {
updateRuleTable()
// editExpression(record);
var querySetInZbTab = Ext.getCmp("querySetInZbTab_" + currentTab.getIdIndex());
editColumnId = record.data.columnId;
var ctr = querySetInZbTab.getController();
var grid = ctr.lookupReference("querySettingGrid");
grid.getSelectionModel().select(record);
ctr.editExpression(record);
}
}]
},
{
header: "类型",
flex: 1,
dataIndex: 'columnType',
renderer: function (value, metadata, record, rowIndex) {
//getIdxDataName(value)
//保险做法 估计是没用的 即使显示正确了 但存xml可能是错的
var showVal = "";
switch (value) {
case 'string':
showVal = "字符串";
break;
case 'num':
showVal = "数字";
break;
case 'date':
showVal = "日期";
break;
case 'none':
showVal = "计算列";
break;
case 'undefined':
showVal = "计算列";
break;
}
//修改 查询定义的类型
switch (value) {
case 'VARCHAR2':
showVal = "字符串";
break;
case 'NUMBER':
showVal = "数字";
break;
case 'DATE':
showVal = "日期";
break;
case 'CLOB':
showVal = "CLOB";
break;
default:
showVal = "计算列";
break;
}
return showVal;
}
}, {
xtype: 'actioncolumn',
flex: 1,
align: "center",
header: "删除",
dataIndex: 'columnDel',
items: [{
iconCls: 'adhoc_expr_del',
handler: 'deleteParamExpression'
}]
}, {
xtype: 'actioncolumn',
flex: 1,
menuDisabled: true,
sortable: false,
header: "筛选",
items: [{
iconCls: 'icon_add_filter',
handler: function (view, rowIndex, colIndex, item, e, record) {
var id = record.data.columnId;
var name = record.data.columnDisplayName;
var type = "field";
mxExprEdit.addQueryColToFilter(id, name, type, null, true)
}
}]
}
],
listeners: {
itemclick: function (me, record, item, index, e, eOpts) {
gridRecordIndex = index;
},
render: 'renderFun'
}
});
拓展使用
var expr_Form = new Ext.panel.Panel({
labelWidth: 50,
// frame: true,
cursorPos: 0,
height: 607,
border: false,
// id: 'new_expr_edit_panel',
items: [operators,
{
xtype: 'panel',
border: false,
bodyStyle: "background:#dfe9f6",
cls: 'operatorPanel',
html: '<div style="margin-top:10px;"><label style="float:left;">明细筛选:</label><div class="tag_edit" id="tag_edit_detail_main_' + currentTab.getIdIndex() + '" style="height:150px;width:398px;border:1px solid #b5b8c8;margin-left:55px;margin-bottom:10px;background-color:white;" > <div class="tag_kong"><b><i></i></b></div><div class="tag_end"><span><b>...</b></span></div></div></div>' +
'<div><label style="float:left;">统计筛选:</label><div class="tag_edit" id="tag_edit_summary_main_' + currentTab.getIdIndex() + '" style="height:80px;width:398px;border:1px solid #b5b8c8;margin-left:55px;margin-bottom:10px;background-color:white;" > <div class="tag_kong"><b><i></i></b></div><div class="tag_end"><span><b>...</b></span></div></div>',
listeners: {
afterrender: 'operatorsRenderFun'
}
}]
});
控制器里面
operatorsRenderFun: function () {
new Ext.dd.DropTarget("tag_edit_detail_main_" + currentTab.getIdIndex(), {
ddGroup: 'elementDrag',
notifyOver: function (ddSource, e, data) {
rtn = 'x-dd-drop-ok';
},
notifyDrop: function (ddSource, e, data) {
var isAdd = validDrag(ddSource, data);
var selTable = currentTab.currentZhiBiao.selTable;
return true;
}
});
},
tree里配置
{
xtype: 'treepanel',
border: false,
title: '元素',
id: "subProcess_tree_" + currentTab.getIdIndex(),
useArrows: true,
ootVisible: false,
autoScroll: true,
enableDD: false,
viewConfig: {
// 加入允许拖动功能
plugins: [{
ptype: 'treeviewdragdrop',
// 元素节点的拖动
ddGroup: 'elementDrag',
// 设为false，不允许在中拖动
enableDrop: false
}]
},
// 不允许放
root: designMxgraph.updateTreeNode()
}
(∩_∩)-----代码改变生活。
