comindware.core.ui/src/form/editors/impl/context/views/PopoutWrapperView.js

Comindware Core UI provides the basic components like editors, lists, dropdowns, popups that we so desperately need while creating Marionette-based single-page applications.

import template from '../templates/popoutWrapperPanel.html';
import list from 'list';

export default Marionette.View.extend({
    classes: {
        itemTitleSelected: '.js-item-title-selected'
    },

    events: {
        'click .js-clear-value': '__onChildItemTitleSelectEmpty',
        mousewheel: '__handleMousewheel'
    },

    regions: {
        popoutWrapper: {
            el: '.js-popout-wrapper',
            replaceElement: true
        }
    },

    template: Handlebars.compile(template),

    className: 'data-source-popout-view',

    onRender() {
        const columns = [
            {
                key: 'name',
                type: 'ExtendedString',
                title: 'TextCell',
                sorting: 'asc'
            }
        ];

        const listView = list.factory.createDefaultGrid({
            gridViewOptions: {
                columns,
                selectableBehavior: 'multi',
                isTree: true,
                childrenAttribute: 'children',
                showHeader: false,
                expandOnShow: false,
                class: 'compact',
                maxHeight: 400
            },
            collection: this.model.get('context')
        });

        this.showChildView('popoutWrapper', listView);

        listView.on('click', model => this.trigger('context:selected', model));
    }
});