{
    xtype: 'container',

    require: [
        'Ext.ux.folderorganizer.TreeSelector'
    ],
    
    border: false,
    
    autoScroll: true,

    bodyStyle: 'background-image: none;',
    
    title: "Selection with check boxes a group of data",

    isDirty: function() {

        var dirty = false,
        widget = this,
        selector = widget.treeSelector;

        if ( selector.checkedItems.ID.length || selector.uncheckedItems.ID.length ) {
            dirty = true;
        }

        return dirty;
    },

    onInitialize: function(widget, owner) {

        var serviceUrl = '/wsh-services/wshproxy.aspx';

        widget.treeSelector = Ext.create('Ext.ux.folderorganizer.TreeSelector', {
            dmd: 'webshop.dmd',
            entity: 'WSHFLDET00',
            xpd: 'folder.xpd',
            proxy: serviceUrl,
            cid: {
                root: 5,
                child: 3
            },
            omitCid: 3,
            displayRootNode: false,
            expandRootNode: false,
            wrapper: owner
        });

        widget.relayEvents(widget.treeSelector, ['savecomplete']);

        widget.add(this.treeSelector);
    },

    doSave: function(f_callback) {
        this.treeSelector.doSave();

        f_callback && f_callback();
    },

    doDelete: function(f_callback) {
        this.treeSelector.doDelete();

        f_callback && f_callback();
    }
}