Parsed Manager Controller

After following the Custom Manager Page tutorial, it's time to start thinking about how to build your interface.

You can use ExtJS/modEXT, but with the introduction of the Parsed Manager Controller in 2.5, you can also create interfaces using MODX snippets and chunks.

Controller Example¶

Instead of extending modExtraManagerController, you would extend modParsedManagerController. For example:

class MycmpWelcomeManagerController extends modParsedManagerController
{
    public function getPageTitle()
    {
        return 'My Test CMP';
    }
    
    public function process(array $scriptProperties = [])
    {
        return '[[$chunk-name]]';
    }
}

Inside the chunk chunk-name, you could then add whatever you'd like to be displayed in your component.

ExtJS look, without the ExtJS¶

To make the page somewhat resemble the standard manager styling, you can use classes that are typically generated by ExtJS. For example, the following adds the big page title, followed by a panel with a description block.

<div class="container">
    <h2  class="modx-page-header">[[+ph._pagetitle]]</h2>

    <div class="x-panel-body shadowbox">
        <div class="panel-desc">Some description</div>
        <div class="x-panel main-wrapper">
            <p>Content can take place here Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolore minima unde voluptatem voluptates. Consequuntur delectus id quo reiciendis sapiente voluptatum. Amet dignissimos eaque eum quae. Ad eveniet minus sunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa debitis eligendi eveniet excepturi, fugiat harum inventore itaque laboriosam laudantium nisi repellat repellendus repudiandae tempora vel voluptatem. Aliquid deleniti laudantium ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias architecto at atque commodi deserunt, dolores fugiat harum in iste laboriosam molestias officiis omnis quam reprehenderit saepe sunt veritatis voluptas voluptates?</p>

            <div>
                <span class="x-btn">
                    <button>Some button</button>
                </span>
            </div>
        </div>
    </div>
</div>

<div id="modx-action-buttons" class="x-toolbar">
    <span class="x-btn x-btn-small primary-button">
        <em class="">
            <button type="button" class="x-btn-text">Some button</button>
        </em>
    </span>
    <span class="x-btn x-btn-small">
        <em class="">
            <button type="button" class="x-btn-text">Some other button</button>
        </em>
    </span>
</div>

Thanks to the MODX Cookbook for this example.