I am trying to create a custom column with combobox in gannt with CRUD manager. I read CRUD documentation, Store, ColumnStore etc. documentation but i have no luck. Also i read viewtopic.php?f=39&t=8523&p=47370&hilit=custom+column+crud#p47370 this forum post but i have lack of Ext.js knowledge and i don't know how to implement in pure javascript. I can successfully bind the data to my store. But values can't show in the combobox. Because i can't attach my defined store to comboBox. If you share a tutorial like i writed above forum post that will be very good. Any help will be appreciated.
I'am sending column data from server like this;
"operasyonDurumlari": {
"rows": [
{
"id": "5b59ee71-6916-ea11-8720-000c29411baa",
"durum": "DURAKLATILDI",
"renkKodu": "#CF1F1FFF"
},
{
"id": "ebe8d9cc-eea9-e911-80ec-000c29e68256",
"durum": "BAŞLAMADI",
"renkKodu": "#6B6B6B"
},
]
}
mounted() {
const gantt = (this.gantt = new Gantt(
this.$store.getters.getGanttConfig
)),
project = gantt.project,
....
...
project.on('beforeLoadApply', function() {
project.addCrudStore(
new Store({
storeId: 'operasyonDurumlari',
valueField: 'id',
displayField: 'durum',
fields: [
{ name: 'id', type: 'string' },
{ name: 'durum', type: 'string' },
{ name: 'renkKodu', type: 'string' }
]
})
)
})
....
..
}
var ganttConfig = {
startDate: new Date(),
project: new ProjectModel({
taskModelClass: Task,
transport: {
load: {
url: Vue.http.options.root + '/api/Planlama/UretimPlanlama/GorevleriGetir',
....
....
}
columns: [
{ type: 'isemrino', field: 'isemrino', text: 'İŞ EMRİ NO'},
{ type: 'name', width: 250 },
{ type: 'startdate' },
{ type: 'enddate' },
{ type: 'duration' },
{ type: 'operasyonDurumu', width: 200 },
{ type: 'kaynaklarkolonu', width: 200, text: 'KAYNAKLAR' },
{ type: 'addnew' }
], // eo columns
.....
..
import { Column, ColumnStore, Combo, BryntumWidgetAdapterRegister, Store } from 'bryntum-gantt'
class OperasyonDurumuKolonu extends Column {
static get type () {
return 'operasyonDurumu'
}
static get isGanttColumn () {
return true
}
static get defaults () {
return {
field: 'operasyondurumu',
text: 'Operasyon Durumu',
editor: {
type: OperasyonDurumuPicker.type,
clearable: true,
allowInvalid: false,
store: 'operasyonDurumlari'
}
}
}
afterConstruct () {
const me = this
super.afterConstruct()
}
renderer ({ value }) {
const me = this
if (value && value.id) {
const model = me.editor.store.getById(value.id)
return model && model[me.editor.displayField] || ''
}else {
return ''
}
}
}
ColumnStore.registerColumnType(OperasyonDurumuKolonu)
class OperasyonDurumuPicker extends Combo {
static get $name () {
return 'OperasyonDurumuPicker'
}
static get type () {
return 'operasyondurumupicker'
}
get store () {
if (!this._store) {
this.store = new Store()
}
return this._store
}
set store (store) {
super.store = store
}
get value () {
return super.value
}
set value (value) {
if (value) {
if (value.isDefault && value.isDefault()) {
value = null
}
else if (value.id) {
value = value.id
}
}
super.value = value
}
}
BryntumWidgetAdapterRegister.register(OperasyonDurumuPicker.type, OperasyonDurumuPicker)