Hello i want to share some plugin:
Ext.define('W.plugin.ResourceViewPlugin', {
extend: 'Ext.plugin.Abstract',
alias: 'plugin.gantt_resource_view_plugin',
tpl: '<label style="position:absolute;z-index: 100;left:{position}px;"><img title="{Name}" style=" width: 20px;margin-top: -3px; border-radius: 15px;" src="{Photo}"/></label>',
config: {
imageField: 'photo_125x125', // photo field in Gnt.model.Resource
nameField: 'Name', // name for tooltip field in Gnt.model.Resource
dateField:'EndDate', // date field (StartDate, EndDate, or some) for tooltip field in Gnt.model.Resource
margin: 15
},
constructor: function(config) {
this.initConfig(config);
},
init: function (cmp) {
this.setCmp(cmp);
if (!(this.tpl instanceof Ext.XTemplate)) {
this.tpl = new Ext.XTemplate(this.tpl);
}
},
resourceRenderer: function(val, meta, task) {
var me = this,
endDateField = me.getDateField(),
endDate = task.get(endDateField),
nameField = me.getNameField(),
imageField = me.getImageField(),
cmp = me.getCmp(),
position = cmp.getSchedulingView().getCoordinateFromDate(endDate),
resources = task.getResources();
return Ext.Array.map(resources,function(resource){
position += me.getMargin();
return me.tpl.apply({
Name: resource.get(nameField),
Photo: resource.get(imageField),
position: position
});
}).join('');
},
disable: function() {
var me = this,
cmp = me.getCmp();
/*
unregister resourceRenderer from queue
*/
Ext.each(cmp.renderers, function(rend, i) {
if(rend.fn.$name === 'resourceRenderer') {
Ext.Array.removeAt(cmp.renderers, i);
return false;
}
});
cmp.refreshViews();
},
enable: function() {
var me = this,
cmp = me.getCmp();
/*
register resourceRenderer from queue
TODO: check if already render registered.
*/
cmp.registerRenderer(me.resourceRenderer, me);
cmp.refreshViews();
}
});
usage :
Ext.onReady(function(){
var ganttPanel = Ext.create('Gnt.panel.Gantt', {
plugins: [
{
ptype: 'gantt_resource_view_plugin',
id:'gantt_resource_view_plugin''
}
],
tbar: [
{
xtype:'button',
text:'enable',
handler: function(btn) {
plugin = ganttPanel.findPlugin('gantt_resource_view_plugin').enable();
}
},
{
xtype:'button',
text:'disable',
handler: function(btn) {
plugin = ganttPanel.findPlugin('gantt_resource_view_plugin').disable();
}
}
],
height : 300,
width : 800,
renderTo : document.body,
crudManager : {
autoLoad : true,
transport : {
load : {
method : 'GET',
url : 'data.json'
},
sync : {
method : 'POST',
url : 'TODO'
}
}
},
columns : [
{
xtype : 'namecolumn'
}
]
});
});