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}. * 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 * 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) * 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}. * via the configuration {@link Event.grid.RowEventData#eventData}.
...@@ -15,30 +19,42 @@ Ext.define("Event.grid.RowEventData", { ...@@ -15,30 +19,42 @@ Ext.define("Event.grid.RowEventData", {
alias: "widget.xroweventdata", alias: "widget.xroweventdata",
uses: "Ext.data.Store", uses: "Ext.data.Store",
/** config: {
* @cfg {Object} /**
* Contains the event model which will be displayed in a grid: * @cfg {Object}
* * Contains the event model which will be displayed in a grid:
* { *
* property1: { * {
* type: "string", * property1: {
* value: "" * type: "string",
* }, * value: ""
* property2: { * },
* type: "string", * property2: {
* value: "[val1, val2, val3]" * type: "string",
* } * value: "[val1, val2, val3]"
* } * }
* * }
* This configuration has to be bind to the grid by the RowWidget plugin: *
* * This configuration has to be bind to the grid by the RowWidget plugin:
* eventData = "{record.EventsData}" *
* * eventData = "{record.EventsData}"
*/ *
eventData: null, */
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, forceFit: true,
plugins: [{ptype: 'cellediting', clicksToEdit: 1}],
// private properties for internationalization // private properties for internationalization
textProperty: "property", textProperty: "property",
...@@ -50,7 +66,8 @@ Ext.define("Event.grid.RowEventData", { ...@@ -50,7 +66,8 @@ Ext.define("Event.grid.RowEventData", {
// private method requests by the component model of ExtJS // private method requests by the component model of ExtJS
initComponent: function () { initComponent: function () {
var me = this; var me = this,
readOnly = me.readOnly;
// the store for the grid // the store for the grid
me.store = Ext.create("Ext.data.Store", { me.store = Ext.create("Ext.data.Store", {
...@@ -75,21 +92,89 @@ Ext.define("Event.grid.RowEventData", { ...@@ -75,21 +92,89 @@ Ext.define("Event.grid.RowEventData", {
text: me.textType text: me.textType
}, { }, {
dataIndex: "value", dataIndex: "value",
editor: (readOnly ? undefined : 'textfield'),
flex: 4, flex: 4,
sortable: true, sortable: true,
text: me.textValue text: me.textValue
}]; }];
me.selType = (readOnly ? undefined : 'cellmodel');
// instantiate the base class // instantiate the base class
me.callParent(arguments); me.callParent(arguments);
// hide the dirty flag when a cell is modified // hide the dirty flag when a cell is modified
me.getView().markDirty = false; 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 // 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. * Setter for the eventData property.
* Method required by the binding model. * 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