Panels

The aim of this article is to explain how to create and use jQuery Mobile panels in CKFinder.

Create the View

To create a panel first create a view that will be shown inside your new panel. The view can be any instance of Marionette.View, so you can pass a Marionette.ItemView for rendering a single object or a Marionette.Layout for displaying more complex UI.

In the example below a simple view that displays a message is created.

var myMessageModel = new Backbone.Model( { message: 'Hey you!' } );

var MessageView = Marionette.ItemView.extend( {
    template: doT.template( '<p>{{= it.message }}</p>' )
} );

var myPanelView = new MessageView( { model: myMessageModel } );

Create and Open the Panel

After the view is prepared, issue the panel:create request:

finder.request( 'panel:create', {
    name: 'myRightPanel',
    position: 'secondary',
    closeButton: 'true',
    view: myPanelView
} );

Next, open then panel with the panel:open request.

finder.request( 'panel:open', { name: 'myRightPanel' } );

Closing the Panel

If you set the closeButton property of the panel to true, CKFinder will display the "Close" button at the top of the panel. You can also close panels programatically with the panel:close request.

finder.request( 'panel:close', { name: 'myRightPanel' } );

To completely remove the panel from DOM, use the panel:destroy request.

finder.request( 'panel:destroy', { name: 'myRightPanel' } );

Updating the View

You can interact with your view inside the panel just like with any other Marionette.View.

myMessageModel.set( 'message', 'This message will be shown.' );

Example

See the CustomPanel plugin for a complete example of a plugin that adds a custom panel.