ExtJS for dummies. Part 1 — Namespace and Controller

We will see the creation of MODX extra step by step in the next few lessons. In the lessons we do not use ready solutions, such as modExtra or Doodles. We will take all of the steps manually.



We will analyze the creation of «extra» and not «package» or «component». To understand the difference I give the example of working with snippets in MODX. We can click «New snippet» in manager, enter the snippet name “Hodor” and the code:

<?php
return 'Hodor!';

After saving we can call it anywhere on the template and use the snippet. But if we want to use this snippet on several sites, we must make a transport package that will contain the snippet Hodor.

If you haven't created extra before, you first need to understand how extras work and what are their component parts. And then you ask how «to pack» extra in the transport package.

I strongly suggest to create a test website for example, in this service: https://modhost.pro/ and repeat all steps of the lessons. If you are not going to repeat all the actions manually, you will find it difficult to understand the mechanism of the extras

Create in the root of the website folder things — this will be the folder of our extra. Now MODX doesn't know that this folder exists.
Well, let's create a «namespace» (in the drop-down list inside the gear ilyaut.ru/cloud/1WpAB1.png )



Name: things
Core path: {base_path}things/

URL of MODX extras contains: /manager/?a={controller}&namespace={namespace}
We have created a namespace things. The controller name doesn't matter. Let's call it index (like in HTML for the main pages). Open this link in your browser:

/manager/?a=index&namespace=things

The error is displayed. This is understandable — our folder is empty. Create a file with the name that we chose for the controller. For our controller file name will be: index.class.php.

Use FTP or add to upload_files system setting php extension. Don't forget to remove it from this list after completion of the work!

When an empty file is created, the our extra will fall off with an error 500. You probably won't see the error text. If it is, then just append to the file /manager/index.php this line:

ini_set('display_errors', 1);

Now the text of error will be displayed.

There are rules of the class names in MODX. For file controller class name is:
{namespace}{controller}ManagerController. You don't need to remember it. You can always find the required class name in the error text.

Describe in our file needed class:

<?php
class ThingsIndexManagerController {}

After that, the error text changed — now MODX is reported that he is trying to call the method setProperties of some object that does not exist (on null). Look the error code deeper.

Press Crtl+U to see page source — the error text will be divided into lines. There are name of our class and the method getInstance in line with number 0. Perhaps the problem is that method does not exist in our file. Let's add it. The method should “get an instance". Instance of the class is $this. So method will look like this:

<?php
class ThingsIndexManagerController {
    public function getInstance(){
        return $this;
    }
}

Looking now MODX wants from us. MODX needs method setProperties. Create it. We don't have any properties, so the method will not do anything.

public function setProperties() {}

The following required method is initialize. Will do the same trick:

public function initialize() {}

New error and a new method:

public function render() {}

Now the error is already different from the previous one. Stop and analyze the recent actions. We have added the render method. This word means «display». Let's return the string Hello world from method:

<?php
class ThingsIndexManagerController {
    public function getInstance(){
        return $this;
    }
    
    public function setProperties() {}
    
    public function initialize() {}
    
    public function render() {
        return 'Hello world';
    }
}

Great! The string is displayed. But we need manager page — not just an HTML page. We have to add in our file displaying the top menu, the left panel with a tree of resources, etc.

That's a lot of work! But MODX will help us. There is class modExtraManagerController at MODX core. Such classes called «abstract» — they do nothing, but we can use pre-written methods of such classes.

To use this class and display all of the elements of the manager, we need our class to inherit from a class modExtraManagerController. Remove all our methods (they are already exists the abstract class):

<?php
class ThingsIndexManagerController extends modExtraManagerController {}

Now our page is a full manager page. To understand functionality of class look and read names of the methods: /core/model/modx/modmanagercontroller.class.php.

For example, I was interested in the method getPageTitle. Let's try to change the page title of our extra:

<?php
class ThingsIndexManagerController extends modExtraManagerController {
    public function getPageTitle() {
        return 'Things';
    }
}

In addition, there is a method getTemplateFile. Well, let's create the template file for our component. Create a file home.tpl in /things/ folder:

<h2>Things</h2>

And specify the path to this file in the method getTemplateFile:

<?php
class ThingsIndexManagerController extends modExtraManagerController {
    public function getPageTitle() {
        return 'Things';
    }
    public function getTemplateFile() {
        return dirname(__FILE__) . '/home.tpl';
    }
}

Great! Now, the template code is displayed in the content part, the title of page changed to «Things». Now we can add the top menu link for our extra.

Go to the «Menu» and create the item in the right place (e.g. inside the «Extras»):


And now, we have our own MODX extra.


You can connect, for example, jQuery and Bootstrap and bring some interactive information. But, MODX is not accepted to connect third-party frameworks. MODX includes a wonderful framework ExtJS, which replaces jQuery and Bootstrap. In the next lesson we will begin to use ExtJS.