Docker-in-Docker (DinD) capabilities of public runners deactivated. More info

Commit e4e15d71 authored by LE GAC Renaud's avatar LE GAC Renaud
Browse files

Update RowEventData, the user can now modify the value.

parent bb7199bc
/**
* Component to display the event model in Ext.grid.Panel.
* Component to display an to update the event model in Ext.grid.Panel.
* It has been design to work with the plugin {@link Ext.grid.plugin.RowWidget}.
*
* Only the value of the model can be modified by the user.
* In order to add properties or to modify their types use
* the Event.form.field.UserData.
*
* The link between the row and this component is performed via the binding
* mechanism [View model and data binding](http://docs.sencha.com/extjs/6.2.0/guides/application_architecture/view_models_data_binding.html)
* via the configuration {@link Event.grid.RowEventData#eventData}.
......@@ -15,30 +19,42 @@ Ext.define("Event.grid.RowEventData", {
alias: "widget.xroweventdata",
uses: "Ext.data.Store",
/**
* @cfg {Object}
* Contains the event model which will be displayed in a grid:
*
* {
* property1: {
* type: "string",
* value: ""
* },
* property2: {
* type: "string",
* value: "[val1, val2, val3]"
* }
* }
*
* This configuration has to be bind to the grid by the RowWidget plugin:
*
* eventData = "{record.EventsData}"
*
*/
eventData: null,
config: {
/**
* @cfg {Object}
* Contains the event model which will be displayed in a grid:
*
* {
* property1: {
* type: "string",
* value: ""
* },
* property2: {
* type: "string",
* value: "[val1, val2, val3]"
* }
* }
*
* This configuration has to be bind to the grid by the RowWidget plugin:
*
* eventData = "{record.EventsData}"
*
*/
eventData: null,
/**
* @cfg {Boolean}
* Activate the read only mode when it is true.
* In that case, the user cannot modify the value anymore.
*
*/
readOnly: false
},
// Predefined configuration options
// Predefined configuration options for the grid
forceFit: true,
plugins: [{ptype: 'cellediting', clicksToEdit: 1}],
// private properties for internationalization
textProperty: "property",
......@@ -50,7 +66,8 @@ Ext.define("Event.grid.RowEventData", {
// private method requests by the component model of ExtJS
initComponent: function () {
var me = this;
var me = this,
readOnly = me.readOnly;
// the store for the grid
me.store = Ext.create("Ext.data.Store", {
......@@ -75,21 +92,89 @@ Ext.define("Event.grid.RowEventData", {
text: me.textType
}, {
dataIndex: "value",
editor: (readOnly ? undefined : 'textfield'),
flex: 4,
sortable: true,
text: me.textValue
}];
me.selType = (readOnly ? undefined : 'cellmodel');
// instantiate the base class
me.callParent(arguments);
// hide the dirty flag when a cell is modified
me.getView().markDirty = false;
// activate the two way binding
// the event model is update in the database when the user
// modify a value. Here we mimic the behaviour of a spreadsheet.
if (!readOnly) {
me.store.on("update", me.onUpdate, me);
}
},
// private method requests by the component model of ExtJS
beforeDestroy: function () {
var me = this;
if (!me.readOnly) {
me.store.un("update", me.onUpdate, me);
}
me.callParent(arguments);
},
// jshint strict: true
/**
* Setter for the eventData property.
* Method required by the binding model.
*
* @return {Object}
*
* {
* property1: {
* type: "string",
* value: ""
* },
* property2: {
* type: "string",
* value: "[val1, val2, val3]"
* }
* }
*
*/
getEventData: function () {
"use strict";
var me = this,
value = {};
me.getStore().each(function(record) {
value[record.get("property")] = {
"type": record.get("type"),
"value": record.get("value")
};
});
return value;
},
/**
* Handler to update the database
*
*/
onUpdate: function () {
"use strict";
var me = this;
me.publishState("eventData", me.getEventData());
},
/**
* Setter for the eventData property.
* Method required by the binding model.
*
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment