diff --git a/examples/table/container/MainContainer.mjs b/examples/table/container/MainContainer.mjs index 6ccaabf46..da5b6bf20 100644 --- a/examples/table/container/MainContainer.mjs +++ b/examples/table/container/MainContainer.mjs @@ -27,7 +27,8 @@ class MainContainer extends ConfigurationViewport { } createConfigurationComponents() { - let me = this; + let me = this, + {selectionModel} = me.exampleComponent.view; const selectionModelRadioDefaults = { module : Radio, @@ -47,35 +48,35 @@ class MainContainer extends ConfigurationViewport { value : me.exampleComponent.height }, { ...selectionModelRadioDefaults, - checked : me.exampleComponent.selectionModel.ntype === 'selection-table-cellmodel', + checked : selectionModel.ntype === 'selection-table-cellmodel', labelText : 'selectionModel', - listeners : {change: me.onRadioChange.bind(me, 'selectionModel', CellModel)}, + listeners : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellModel)}, style : {marginTop: '10px'}, valueLabelText: 'Cell' }, { ...selectionModelRadioDefaults, - checked : me.exampleComponent.selectionModel.ntype === 'selection-table-columnmodel', - listeners : {change: me.onRadioChange.bind(me, 'selectionModel', ColumnModel)}, + checked : selectionModel.ntype === 'selection-table-columnmodel', + listeners : {change: me.onRadioViewChange.bind(me, 'selectionModel', ColumnModel)}, valueLabelText: 'Column' }, { ...selectionModelRadioDefaults, - checked : me.exampleComponent.selectionModel.ntype === 'selection-table-rowmodel', - listeners : {change: me.onRadioChange.bind(me, 'selectionModel', RowModel)}, + checked : selectionModel.ntype === 'selection-table-rowmodel', + listeners : {change: me.onRadioViewChange.bind(me, 'selectionModel', RowModel)}, valueLabelText: 'Row' }, { ...selectionModelRadioDefaults, - checked : me.exampleComponent.selectionModel.ntype === 'selection-table-cellcolumnmodel', - listeners : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnModel)}, + checked : selectionModel.ntype === 'selection-table-cellcolumnmodel', + listeners : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnModel)}, valueLabelText: 'Cell & Column' }, { ...selectionModelRadioDefaults, - checked : me.exampleComponent.selectionModel.ntype === 'selection-table-cellrowmodel', - listeners : {change: me.onRadioChange.bind(me, 'selectionModel', CellRowModel)}, + checked : selectionModel.ntype === 'selection-table-cellrowmodel', + listeners : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellRowModel)}, valueLabelText: 'Cell & Row' }, { ...selectionModelRadioDefaults, - checked : me.exampleComponent.selectionModel.ntype === 'selection-table-cellcolumnrowmodel', - listeners : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)}, + checked : selectionModel.ntype === 'selection-table-cellcolumnrowmodel', + listeners : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnRowModel)}, valueLabelText: 'Cell & Column & Row' }, { module : Checkbox, @@ -88,8 +89,8 @@ class MainContainer extends ConfigurationViewport { checked : false, labelText: 'Fit width', listeners: { - change({ value }) { - const { style } = me.exampleComponent; + change({value}) { + const {style} = me.exampleComponent; if (value) { style.width = '100%'; @@ -100,7 +101,7 @@ class MainContainer extends ConfigurationViewport { } me.exampleComponent.style = style; - me.exampleComponent.update(); + me.exampleComponent.update() } }, style: {marginTop: '10px'} @@ -112,9 +113,12 @@ class MainContainer extends ConfigurationViewport { */ createExampleComponent() { return Neo.create(TableContainer, { - id : 'myTableStoreContainer', - selectionModel: CellModel, - store : MainStore, + id : 'myTableStoreContainer', + store: MainStore, + + viewConfig: { + selectionModel: CellModel + }, columns: [ {dataField: 'firstname', text: 'Firstname'}, @@ -180,6 +184,17 @@ class MainContainer extends ConfigurationViewport { editButtonHandler(data) { console.log(data) } + + /** + * @param {String} config + * @param {String} value + * @param {Object} opts + */ + onRadioViewChange(config, value, opts) { + if (opts.value === true) { // we only want to listen to check events, not uncheck + this.exampleComponent.view[config] = value + } + } } export default Neo.setupClass(MainContainer); diff --git a/src/selection/table/CellModel.mjs b/src/selection/table/CellModel.mjs index b07cc08b9..3977c7982 100644 --- a/src/selection/table/CellModel.mjs +++ b/src/selection/table/CellModel.mjs @@ -29,7 +29,7 @@ class CellModel extends BaseModel { addDomListener() { let me = this; - me.view.on('cellClick', me.onCellClick, me) + me.view.parent.on('cellClick', me.onCellClick, me) } /** @@ -38,7 +38,7 @@ class CellModel extends BaseModel { destroy(...args) { let me = this; - me.view.un('cellClick', me.onCellClick, me); + me.view.parent.un('cellClick', me.onCellClick, me); super.destroy(...args) } @@ -87,7 +87,7 @@ class CellModel extends BaseModel { {view} = me, idArray = data.path[0].id.split('__'), currentColumn = idArray[2], - dataFields = view.columns.map(c => c.dataField), + dataFields = view.parent.columns.map(c => c.dataField), newIndex = (dataFields.indexOf(currentColumn) + step) % dataFields.length, id; diff --git a/src/table/Container.mjs b/src/table/Container.mjs index db653da11..7c6c65436 100644 --- a/src/table/Container.mjs +++ b/src/table/Container.mjs @@ -2,7 +2,6 @@ import BaseContainer from '../container/Base.mjs'; import ClassSystemUtil from '../util/ClassSystem.mjs'; import CssUtil from '../util/Css.mjs'; import NeoArray from '../util/Array.mjs'; -import RowModel from '../selection/table/RowModel.mjs'; import Store from '../data/Store.mjs'; import View from './View.mjs'; import * as header from './header/_export.mjs'; @@ -50,11 +49,6 @@ class Container extends BaseContainer { * @member {String|null} headerToolbarId_=null */ headerToolbarId_: null, - /** - * Additional used keys for the selection model - * @member {Object} keys - */ - keys: {}, /** * @member {String} layout='base' */ @@ -65,7 +59,9 @@ class Container extends BaseContainer { */ scrollbarsCssApplied: false, /** + * Will get removed in neo v9, assign selection models to table.View instead * @member {Neo.selection.Model} selectionModel_=null + * @deprecated */ selectionModel_: null, /** @@ -143,10 +139,11 @@ class Container extends BaseContainer { sortable : me.sortable, ...me.headerToolbarConfig }, { - module : View, - containerId: me.id, - id : me.viewId, - store : me.store, + module : View, + containerId : me.id, + id : me.viewId, + selectionModel: me.selectionModel, // todo: remove this line in neo v9 + store : me.store, ...me.viewConfig }]; @@ -204,9 +201,12 @@ class Container extends BaseContainer { * @param {Neo.selection.Model} value * @param {Neo.selection.Model} oldValue * @protected + * @deprecated */ afterSetSelectionModel(value, oldValue) { - this.rendered && value.register(this) + if (value && this.view) { + this.view.selectionModel = value + } } /** @@ -292,18 +292,6 @@ class Container extends BaseContainer { return value || oldValue } - /** - * Triggered before the selectionModel config gets changed. - * @param {Neo.selection.Model} value - * @param {Neo.selection.Model} oldValue - * @protected - */ - beforeSetSelectionModel(value, oldValue) { - oldValue?.destroy(); - - return ClassSystemUtil.beforeSetInstance(value, RowModel) - } - /** * Triggered before the store config gets changed. * @param {Neo.data.Store} value @@ -461,14 +449,6 @@ class Container extends BaseContainer { return `${this.id}__wrapper` } - /** - * - */ - onConstructed() { - super.onConstructed(); - this.selectionModel?.register(this) - } - /** * @param {Object} opts * @param {String} opts.direction diff --git a/src/table/View.mjs b/src/table/View.mjs index c803f7729..93fce1352 100644 --- a/src/table/View.mjs +++ b/src/table/View.mjs @@ -1,6 +1,8 @@ -import Component from '../component/Base.mjs'; -import NeoArray from '../util/Array.mjs'; -import VDomUtil from '../util/VDom.mjs'; +import ClassSystemUtil from '../util/ClassSystem.mjs'; +import Component from '../component/Base.mjs'; +import NeoArray from '../util/Array.mjs'; +import RowModel from '../selection/table/RowModel.mjs'; +import VDomUtil from '../util/VDom.mjs'; /** * @class Neo.table.View @@ -36,10 +38,19 @@ class View extends Component { * @member {Boolean} highlightModifiedCells_=false */ highlightModifiedCells_: false, + /** + * Additional used keys for the selection model + * @member {Object} keys + */ + keys: {}, /** * @member {Object} recordVnodeMap={} */ recordVnodeMap: {}, + /** + * @member {Neo.selection.Model} selectionModel_=null + */ + selectionModel_: null, /** * @member {String} selectedRecordField='annotations.selected' */ @@ -63,10 +74,8 @@ class View extends Component { * @member {String[]} selectedRows */ get selectedRows() { - let tableContainer = this.parent; - - if (tableContainer.selectionModel.ntype === 'selection-table-rowmodel') { - return tableContainer.selectionModel.items + if (this.selectionModel.ntype === 'selection-table-rowmodel') { + return this.selectionModel.items } return [] @@ -93,6 +102,16 @@ class View extends Component { }]) } + /** + * Triggered after the selectionModel config got changed + * @param {Neo.selection.Model} value + * @param {Neo.selection.Model} oldValue + * @protected + */ + afterSetSelectionModel(value, oldValue) { + this.rendered && value.register(this) + } + /** * @param {Object} data * @param {String} [data.cellId] @@ -190,6 +209,18 @@ class View extends Component { return cellConfig } + /** + * Triggered before the selectionModel config gets changed. + * @param {Neo.selection.Model} value + * @param {Neo.selection.Model} oldValue + * @protected + */ + beforeSetSelectionModel(value, oldValue) { + oldValue?.destroy(); + + return ClassSystemUtil.beforeSetInstance(value, RowModel) + } + /** * @param {Object} opts * @param {Object} opts.record @@ -454,6 +485,14 @@ class View extends Component { this.fireCellEvent(data, 'cellDoubleClick') } + /** + * + */ + onConstructed() { + super.onConstructed(); + this.selectionModel?.register(this) + } + /** * @param {Object} data */