{
	xtype: 'panel',
	require: [
		"Ext.ux.navigation.model.RolePermissionTree",
		'Ext.ux.navigation.controller.RolePermissionTree',
		'Ext.ux.navigation.controller.RolePermissionGrid',
		'Ext.ux.navigation.viewmodel.RolePermissionTree',
		'Ext.ux.navigation.view.RolePermissionTree',
		'Ext.ux.navigation.view.RolePermissionGrid'
	],
	border: false,
	autoScroll: true,
	bodyStyle: 'background-image: none;',
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
	border: false,
	header: false,
	onInitialize: function(widget, owner) {
		var record = owner.dataParent.getRecord();

		widget.rolePermissionTree = Ext.widget('rolepermissiontree', {
			flex: 1,
			registry: 'navrolprm',
			rolerecord: record
		});

		widget.rolePermissionGrid = Ext.widget('rolepermissiongrid', {
			flex: 1,
			features: [{
				ftype: "grouping",
				hideGroupedHeader: true,
				enableGroupingMenu: false
			}],
			columns :[
				{
					text: ip2.i18n({ "da": "Id", "en": "Id" }),
					dataIndex: 'id',
					flex: 1
				},
				{
					text: ip2.i18n({ "da": "Beskrivelse", "en": "Description" }),
					dataIndex: 'description',
					flex: 3
				},
				{
					text: ip2.i18n({ "da": "Applikation", "en": "Application" }),
					dataIndex: 'group',
					flex: 1
				}
			],
			store : Ext.create('Ext.data.Store', {
				pageSize: 100,
				groupField: "group",
				fields: [
					{ name: 'id', type: 'auto' },
					{ name: 'description', type: 'string' },
					{ name: 'group', type: 'string' }
				],
				proxy: {
					type: "memory"
				}
			})
		});

		var viewmodel = widget.rolePermissionTree.getViewModel();
		viewmodel.setData({
			grid: widget.rolePermissionGrid
		});

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

		widget.add(this.rolePermissionTree);
		widget.add(this.rolePermissionGrid);
	},
	doSave: function(f_callback) {
		this.rolePermissionTree.getController().doSave();

		f_callback && f_callback();
	},
	doDelete: function(f_callback) {
		this.rolePermissionTree.getController().doDelete();

		f_callback && f_callback();
	},
	isDirty: function() {
		return this.rolePermissionTree.getController().isDirty();
	}
}
