问题描述
嗨，我有一个甘特图。我在左侧放置了一个弹出菜单，并添加了一些按钮。由于添加了这些按钮，因此单击的主要任务出现在屏幕上。我的代码如下 下拉菜单：
Ext.Ajax.request({
method: 'GET',url: 'ganttcrud/Test',success: function (response,opts) {
var obj = Ext.decode(response.responseText);
for (var i = 0; i < obj.length; i++) {
yourItemsArray.push({
items: [{
text: obj[i][0].Name,name: obj[i][0].Id,xtype:'button',handler: btn => {
var crudMgr = btn.up('#gantt').getCrudManager();
crudMgr.transport.load.params.id = parseInt(btn.name);
crudMgr.load();
}
}]
});
}
},failure: function (response,opts) {
console.log('server-side failure with status code ' + response.status);
}
});
var yourItemsArray = [];
Ext.define('Gnt.examples.advanced.view.GanttSecondaryToolbar',{
extend : 'Ext.panel.Panel',xtype : 'details',width: 200,title: 'Gorevlerim',collapsible: true,collapsed: true,draggable: true,titleCollapse: true,bodyBorder: true,bodyPadding: 15,region: 'north',split: true,border: false,scrollable: true,cls: 'ks-cmp',tpl: '<pre data-src="{src}">{content}</pre>',items: yourItemsArray
});Ganttgörünümüm：
Ext.define('Gnt.examples.advanced.view.Gantt',{
extend : 'Gnt.panel.Gantt',xtype : 'advanced-gantt',itemId: 'gantt',requires : [
'Ext.grid.filters.Filters','Ext.form.field.Text','Sch.plugin.TreeCellEditing','Sch.plugin.Pan','Gnt.plugin.taskeditor.TaskEditor','Gnt.plugin.taskeditor.ProjectEditor','Gnt.plugin.DependencyEditor','Gnt.plugin.Clipboard','Gnt.plugin.ProgressLine','Gnt.column.Sequence','Gnt.column.Name','Gnt.column.StartDate','Gnt.column.EndDate','Gnt.column.Duration','Gnt.column.ConstraintType','Gnt.column.ConstraintDate','Gnt.column.PercentDone','Gnt.column.Predecessor','Gnt.column.ManuallyScheduled','Gnt.column.AddNew','Gnt.column.DeadlineDate','Gnt.column.DragDrop','Gnt.selection.SpreadsheetModel','Gnt.column.ResourceAssignment',/* */
'Gnt.examples.advanced.plugin.TaskArea','Gnt.examples.advanced.plugin.TaskContextMenu','Gnt.examples.advanced.field.Filter','Gnt.examples.advanced.view.TaskEditorGeneralForm'
],showTodayLine : true,loadMask : true,enableProgressBarResize : true,showRollupTasks : true,rowHeight : 30,viewPreset : 'weekAndDayLetter',projectLinesConfig : {
// Configure the gantt to mark project start dates w/ lines.
// Options are:
// 'start' - to show lines for start dates,// 'end' - to show lines for end dates,// 'both' - to show lines for both start and end dates.
linesFor : 'start'
},allowdeselect : true,selModel : {
type : 'gantt_spreadsheet',// The WBS column width
rowNumbererHeaderWidth : 70
},// Define properties for the left 'locked' and scrollable tree grid
lockedGridConfig : {
width : 400
},// Define properties for the left 'locked' and scrollable tree view
lockedViewConfig : {
// Adds a CSS class returned to each row element
getRowClass : function (rec) {
return rec.isRoot() ? 'root-row' : '';
}
},// Define a custom HTML template for regular tasks
taskBodyTemplate : '<div class="sch-gantt-progress-bar" style="width:{progressBarWidth}px;{progressBarStyle}" unselectable="on">' +
'<span class="sch-gantt-progress-bar-label">{[Gnt.column.PercentDone.prototype.defaultRenderer(values.percentDone)]}%</span>' +
'</div>',// Define what should be shown in the left label field,along with the type of editor
leftLabelField : {
dataIndex : 'Name',editor : { xtype : 'textfield' }
},// Uncomment to show labels above rollup elements
// rollupLabelField : 'Name',plugins : [
'advanced_taskcontextmenu','scheduler_pan',{
ptype : 'gantt_taskeditor',height : 450,// tell editor to use our custom TaskEditorGeneralForm for the "General" tab
taskFormClass: 'Gnt.examples.advanced.view.TaskEditorGeneralForm',taskEditorCls: 'Gnt.examples.advanced.view.TaskEditor'
// https://app.assembla.com/spaces/bryntum/tickets/6846
// dependencyGridConfig : {
// useSequenceNumber : true
// }
},'gantt_projecteditor','gridfilters',{
ptype : 'gantt_progressline',disabled : true,statusDate : new Date(2017,1,6),// Optional
id : 'progressline'
},{
ptype : 'gantt_dependencyeditor',width : 320
},{
pluginId : 'taskarea',ptype : 'taskarea'
},{
ptype : 'scheduler_treecellediting',clicksToEdit : 2,pluginId : 'editingInterface'
},{
ptype : 'gantt_clipboard',// data copied in raw format can be copied and pasted to gantt
// data in text format is copied to system clipboard and can be pasted anywhere
source : ['raw','text']
},'gantt_selectionreplicator'
],// Define the static columns
// Any regular Ext JS columns are ok too
columns : [
{ xtype : 'dragdropcolumn' },{
xtype : 'namecolumn',width : 200,cls : 'namecolumn',layout : 'vBox',items : {
xtype : 'gantt-filter-field'
}
},{
xtype : 'startdatecolumn',width : 130,dataIndex : 'StartDate',filter : {
type : 'date'
}
},{
xtype : 'enddatecolumn',dataIndex : 'EndDate',{
xtype : 'durationcolumn',width : 100
},{
xtype : 'percentdonecolumn',width : 100,dataIndex : 'PercentDone',filter : {
type : 'number'
}
},{
xtype: 'resourceassignmentcolumn',width: 100,dataIndex: 'ResourceAssignment'
},{
xtype : 'addnewcolumn'
}
],eventRenderer : function (task,tplData) {
var style,segments,i,result;
if (task.get('Color')) {
style = Ext.String.format('background-color: #{0};border-color:#{0}',task.get('Color'));
if (!tplData.segments) {
result = {
// Here you can add custom per-task styles
style : style
};
}
// if task is segmented we cannot use above code
// since it will set color of background visible between segments
// in this case instead we need to provide "style" for each individual segment
else {
segments = tplData.segments;
for (i = 0; i < segments.length; i++) {
segments[i].style = style;
}
}
}
return result;
}
});
// Prevent Ext grid header key navigation reacting to arrow keys inside a text input
Ext.grid.header.Container.override({
privates : {
onFocusableContainerLeftKey : function (e) {
if (e.target.tagName.toLowerCase() !== 'input') {
e.preventDefault();
return this.moveChildFocus(e,false);
}
},onFocusableContainerRightKey : function (e) {
if (e.target.tagName.toLowerCase() !== 'input') {
e.preventDefault();
return this.moveChildFocus(e,true);
}
}
}
});视口：
Ext.define("Gnt.examples.advanced.view.MainViewport",{
extend: 'Ext.Viewport',alias : 'widget.advanced-viewport',requires: [
'Gnt.examples.advanced.view.GanttSecondaryToolbar','Gnt.examples.advanced.view.MainViewportController','Gnt.examples.advanced.view.MainViewportModel','Gnt.examples.advanced.view.ControlHeader','Gnt.examples.advanced.view.Gantt','Gnt.examples.advanced.view.DetayPaneli'
],viewmodel : 'advanced-viewport',controller: 'advanced-viewport',layout: 'border',initComponent: function () {
this.items = [
{
xtype : 'container',region: 'center',items : [
/* */
{
xtype : 'advanced-gantt',region : 'center',reference : 'gantt',crudManager: this.crudManager,startDate : this.startDate,endDate : this.endDate,header : {xtype: 'controlheader'}
//bbar : {
// xtype: 'gantt-secondary-toolbar'
//}
}
]
},{
xtype: 'details'
}
];
this.callParent(arguments);
}
});ViewportContoller：
Ext.define('Gnt.examples.advanced.view.MainViewportController',{
extend : 'Ext.app.ViewController',alias : 'controller.advanced-viewport',requires : ['Gnt.widget.calendar.CalendarManagerWindow'],control : {
'#' : { afterrender : 'onAfterRender' },'tool[reference]' : { click : 'onButtonClick',priority : 1000 },'[reference=gantt]' : { selectionchange : 'onGanttSelectionChange' },'[reference=shiftPrevIoUs]' : { click : 'onShiftPrevIoUs' },'[reference=shiftNext]' : { click : 'onShiftNext' },'[reference=collapseAll]' : { click : 'onCollapseAll' },'[reference=expandAll]' : { click : 'onExpandAll' },'[reference=zoomOut]' : { click : 'onZoomOut' },'[reference=zoomIn]' : { click : 'onZoomIn' },'[reference=zoomToFit]' : { click : 'onZoomToFit' },'[reference=undo]' : { click : 'onUndo' },'[reference=redo]' : { click : 'onRedo' },'[reference=viewFullScreen]' : { click : 'onFullScreen' },'[reference=criticalPath]' : { click : 'onHighlightCriticalPath' },'[reference=addTask]' : { click : 'onAddTask' },'[reference=removeSelected]' : { click : 'onRemoveSelectedTasks' },'[reference=indentTask]' : { click : 'onIndent' },'[reference=outdentTask]' : { click : 'onOutdent' },'[reference=manageCalendars]' : { click : 'onManageCalendars' },'[reference=saveChanges]' : { click : 'onSaveChanges' },'[reference=toggleGrouping]' : { click : 'onToggleGrouping' },'[reference=toggleProgressLine]' : { click : 'onToggleProgressLine' },'[reference=toggleRollup]' : { click : 'onToggleRollup' },'[reference=highlightLong]' : { click : 'onHighlightLongTasks' },'[reference=filterTasks]' : { click : 'onFilterTasks' },'[reference=clearTasksFilter]' : { click : 'onClearTasksFilter' },'[reference=scrollToLast]' : { click : 'onScrollToLast' },'[reference=tryMore]' : { click : 'onTryMore' },'[reference=detailspanel]' : { click: 'onDetail' },'[reference=print]': { click: 'onPrint' },'combo[reference=langSelector]' : { select : 'onLanguageSelected' },'gantt_timelinescheduler' : {
eventclick : 'onTimelineEventClick',eventdblclick : 'onTimelineEventDblClick'
}
},getSelectedTasks : function () {
var tasks = [],selected = this.getGantt().getSelectionModel().getSelected();
if (selected instanceof Ext.grid.selection.Rows) {
tasks = selected.getRecords();
} else if (selected instanceof Ext.grid.selection.Cells) {
selected.eachRow(function (record) {
// Some bug in cell selection,it doesn't update correctly after removing a record
if (record) {
tasks.push(record);
}
});
} else {
tasks = this.getGantt().getSelectedRows();
}
return tasks;
},getGantt : function () {
return this.getView().lookupReference('gantt');
},onButtonClick : function() {
// stop editing process before changing the UI
this.getGantt().cancelEdit();
},onGanttSelectionChange : function (grid) {
var selected = this.getSelectedTasks();
this.getviewmodel().set('hasSelection',selected.length > 0);
var allowIndentationChange = Ext.Array.every(selected,function (record) {
return !(record instanceof Gnt.model.Project);
});
this.getviewmodel().set('allowIndentationChange',allowIndentationChange);
},onDetail:function() {
this.getGantt().detailsPanel();
},onShiftPrevIoUs : function () {
this.getGantt().shiftPrevIoUs();
},onShiftNext : function () {
this.getGantt().shiftNext();
},onCollapseAll : function () {
this.getGantt().collapseAll();
},onExpandAll : function () {
this.getGantt().expandAll();
},onZoomOut : function () {
this.getGantt().zoomOut();
},onZoomIn : function () {
this.getGantt().zoomIn();
},onZoomToFit : function () {
this.getGantt().zoomToFit(null,{ leftMargin : 100,rightMargin : 100 });
},onUndo : function() {
this.getviewmodel().get('undoManager').undo();
},onRedo : function() {
this.getviewmodel().get('undoManager').redo();
},onFullScreen : function () {
document.body[this.getFullscreenFn()](Element.ALLOW_KEYBOARD_INPUT);
},// Experimental,not X-browser
getFullscreenFn : function () {
var docElm = document.documentElement,fn;
if (docElm.requestFullscreen) {
fn = "requestFullscreen";
}
else if (docElm.mozRequestFullScreen) {
fn = "mozRequestFullScreen";
}
else if (docElm.webkitRequestFullScreen) {
fn = "webkitRequestFullScreen";
}
else if (docElm.msRequestFullscreen) {
fn = "msRequestFullscreen";
}
return fn;
},onHighlightCriticalPath : function (btn) {
var v = this.getGantt().getSchedulingView();
btn.pressed = !btn.pressed;
if (btn.pressed) {
v.highlightCriticalPaths(true);
} else {
v.unhighlightCriticalPaths(true);
}
},onAddTask : function (btn) {
var gantt = this.getGantt(),tasks = this.getSelectedTasks(),selectedTask = tasks[0] || gantt.getTaskStore().getRoot(),editingInterface = gantt.lockedGrid.getPlugin('editingInterface'),node = selectedTask.isLeaf() ? selectedTask.parentNode : selectedTask;
var record = node.appendChild({
Name : btn.newTaskName || 'New Task',leaf : true
});
editingInterface.completeEdit();
gantt.ensureVisible(record,{
column : Ext.Array.findBy(gantt.columns,function(col) { return col.xtype === 'namecolumn'; })
});
gantt.lockedGrid.getPlugin('editingInterface').startEdit(record,2);
gantt.getSchedulingView().scrollEventIntoView(record,false,false);
gantt.getSelectionModel().select(record);
},onRemoveSelectedTasks : function () {
this.getGantt().getTaskStore().removeTasks(this.getSelectedTasks());
},onIndent : function () {
var gantt = this.getGantt();
// filter out attempts to get into a readonly task
var tasks = Ext.Array.filter(this.getSelectedTasks(),function (task) {
return task.prevIoUsSibling && !task.prevIoUsSibling.isReadOnly();
});
gantt.getTaskStore().indent([].concat(tasks));
},onOutdent : function () {
var gantt = this.getGantt();
// filter out readonly tasks
var tasks = Ext.Array.filter(this.getSelectedTasks(),function (task) { return !task.isReadOnly(); });
gantt.getTaskStore().outdent([].concat(tasks));
},onSaveChanges : function () {
this.getGantt().crudManager.sync();
},onLanguageSelected : function (field,record) {
this.fireEvent('locale-change',record.get('id'),record);
},onToggleProgressLine : function () {
var plugin = this.getGantt().getPlugin('progressline');
if (plugin.disabled) {
plugin.enable();
} else {
plugin.disable();
}
},onToggleGrouping : function () {
var taPlugin = this.getGantt().getPlugin('taskarea');
taPlugin.setEnabled(!taPlugin.getEnabled());
},onToggleRollup : function () {
var gantt = this.getGantt();
gantt.setShowRollupTasks(!gantt.showRollupTasks);
},onHighlightLongTasks : function () {
var gantt = this.getGantt();
gantt.taskStore.queryBy(function (task) {
if (task.data.leaf && task.getDuration() > 8) {
var elements = gantt.getSchedulingView().getElementsFromEventRecord(task),el = elements && elements[0];
el && el.frame('lime');
}
});
},onFilterTasks : function () {
this.getGantt().taskStore.filterTreeBy(function (task) {
return task.getPercentDone() <= 30;
});
},onClearTasksFilter : function () {
this.getGantt().taskStore.clearTreeFilter();
},onScrollToLast : function () {
var gantt = this.getGantt();
var tasks = gantt.taskStore.getRange();
if (tasks.length > 0) {
gantt.getSchedulingView().scrollEventIntoView(tasks[ tasks.length - 1 ],true);
}
},onAfterRender : function () {
var me = this,viewmodel = me.getviewmodel(),taskStore = viewmodel.get('taskStore');
viewmodel.set('fullscreenEnabled',!!this.getFullscreenFn());
me.mon(taskStore,'filter-set',function () {
viewmodel.set('filterSet',true);
});
me.mon(taskStore,'filter-clear',false);
});
// track CRUD manager changes
me.mon(viewmodel.get('crud'),{
haschanges : function () {
me.getviewmodel().set('hasChanges',true);
},nochanges : function () {
me.getviewmodel().set('hasChanges',false);
}
});
// track UNDO manager changes
me.mon(viewmodel.get('undoManager'),{
undoqueuechange : function(undoManager,queue) {
me.getviewmodel().set('canUndo',queue.length > 0);
},redoqueuechange : function(undoManager,queue) {
me.getviewmodel().set('canRedo',queue.length > 0);
}
});
viewmodel.get('undoManager').start();
var gantt = this.getGantt();
gantt.on('groupchange',this.onGroupChange,this);
},// Clear undo manager queue,undo/redo on grouped store will result in lost leaf nodes
onGroupChange : function () {
var undoManager = this.getviewmodel().get('undoManager');
undoManager.stop();
undoManager.start();
},onManageCalendars : function () {
var gantt = this.getGantt();
this.calendarsWindow = new Gnt.widget.calendar.CalendarManagerWindow({
calendarManager : gantt.getTaskStore().calendarManager,modal : true
});
this.calendarsWindow.show();
},onTryMore : function () {
var tbar = this.getView().down('gantt-secondary-toolbar');
tbar.setVisible(!tbar.isVisible());
},onTimelineEventClick : function(panel,task) {
this.getGantt().getSchedulingView().scrollEventIntoView(task,true,true);
},onTimelineEventDblClick : function(panel,task) {
this.getGantt().getTaskEditor(task).showTask(task);
},onPrint : function () {
this.getGantt().print();
}
});视口模型：
Ext.define('Gnt.examples.advanced.view.MainViewportModel',{
extend : 'Ext.app.viewmodel',alias : 'viewmodel.advanced-viewport',data : {
crud : null,undoManager : null,taskStore : null,hasSelection : false,allowIndentationChange : false,fullscreenEnabled : false,filterSet : false,availableLocales : null,currentLocale : null,calendarManager : null,hasChanges : false,canUndo : false,canRedo : false
},formulas : {
// This is used for not showing the "Save changes" button in the advanced demo
// since the example code is shared between the advanced demo and multiple backend demos.
crudPersistable : function (get) {
var crudManager = get('crud');
// hide "Save changes" if sync URL is 'data/sync.json' (which is true for the advanced demo)
return crudManager && crudManager.transport.sync.url != 'data/sync.json';
}
}
});我已经在甘特图中定义了一个商品ID，我想在下拉菜单中捕获该商品ID字段。当我在gantt中键入代码但我想将其添加到弹出面板中时，它会起作用。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）