ExtJS for dummies. Part 2 — ExtJS Panel

LoadCustomCssJs method in class modExtraManagerController adds to the page your styles and scripts. Let's start our first extjs script using this method.

<?php
class ThingsIndexManagerController extends modExtraManagerController {
    public function getPageTitle() {
        return 'Things';
    }
    public function getTemplateFile() {
        return dirname(__FILE__) . '/home.tpl';
    }
    public function loadCustomCssJs() {
        $this->addHtml("<script>
            Ext.onReady(function() {
                var title = 'Мой заголовок';
                var msg = 'Модель DOM готова...';
                Ext.MessageBox.alert(title,msg);
            });
        </script>");
    }
}

The sample code I took from the article found in Google on request «Lessons ExtJS». The only feature — we don't need to include scripts and styles of ExtJS, because MODX already did it.

JS-scripts is better to make separate files and include via addJavascript:

<?php
class ThingsIndexManagerController extends modExtraManagerController {
    public function getPageTitle() {
        return 'Things';
    }
    public function getTemplateFile() {
        return dirname(__FILE__) . '/home.tpl';
    }
    public function loadCustomCssJs() {
        $this->addJavascript('/things/home.js');
    }
}

Specify an additional parameter. Then there is no need to clear the browser cache after the changes. Don't forget to remove it when you're done developing:

$this->addJavascript('/things/home.js?time=' .time());

We will use objects while developing in ExtJS. Everything in ExtJS is an object (simplified). For example, resources tree, resource edit panel, panel of system settings. Even any field or checkbox is an object. Each object can be inside another object. ExtJS objects have the items property for the implementation of nesting.

ExtJS items

If the object has a parent, the object will be placed (or rendered) on the inside of this parent element. But you can change this behavior by specifying the renderTo property — it specifies where to display a particular object. Usually the renderTo property specify only those objects that have no parent.

Another important property is xtype.

ExtJS xtype

This property specifies the type of the object. By analogy, we can say that xtype is the class of the object. Depending on the xtype object can have additional properties, methods, some behavior, and even a set of child objects.

All work with ExtJS usually built in the following way:

1. Looking for the most appropriate xtype. For search you can use the documentation. For example, if we need to display a window, go to the section Ext.Window and see that we need the xtype is a window: ilyaut.ru/cloud/1WpUHf.png
2. Decide what should be the parent of the new object, insert the object inside the items property
3. Override the properties and methods of the object in which we want to change the behavior.

Let's remove from the controller method getTemplateFile and display the title using ExtJS. File home.tpl is also possible to remove, we no longer need the entire HTML structure to create ExtJS.

MODX creates a DIV with id='modx-panel-holder' on the Extra page. Here we will create the structure of our Extra. MODx.add() adds an object to this div. We will initialize our ExtJS component at the end of the page load. Use the analog recording $(document).ready():

Ext.onReady(function() { // When page is loaded
    MODx.add({ // Add object
        xtype: 'panel', // Type - panel
        items: [{ // Other object in panel
            html: '<h2>Things</h2>', // Object is HTML block
        } ]
    });
});

Refresh the page of Extra and see that nothing has changed)) But this is the first look. Open the code inspector. ExtJS put the header inside the div, but not directly. ExtJS created a nested structure of divs. It works like that.

ExtJS helps to remove duplicated code and, at the same time, use it again if we need it. Define a new ExtJS component — then we will be able to access it from anywhere and even override some of its properties:

Things = function (config) { // Create object Things
    config = config || {}; // Define settings
    Ext.applyIf(config, { // Write structure of object
        components: [{
            xtype: 'panel',
            items: [{
                html: '<h2>Things</h2>',
            } ]
        } ]
    });
    Things.superclass.constructor.call(this, config); // Magic =)
};
Ext.extend(Things, MODx.Component); // Extends MODx.Component
Ext.reg('things', Things); // Register xtype for our object

Ext.onReady(function() {
    MODx.add({
        xtype: 'things', // Adding object on Extras page
    });
});

How are we going to override the properties of our object? Only need to pass them inside the config. Our object has only the components property. Let's get it and override, for the experiment:

// ...
Ext.onReady(function() {
    MODx.add({
        xtype: 'things',
        components: [{ // New structure of object
            xtype: 'panel',
            items: [{
                html: '<h2>Things override</h2>',
            } ]
        } ]
    });
});

A component is usually just a container that contains the objects that we are going to use. So often you can see that the component do not contains any elements. And it has child objects are of different entity — pages, panels, tables, windows etc.

For easy access to the different child objects, divide them into groups:

// Creating main object
var Things = function (config) {
    config = config || {};
    Things.superclass.constructor.call(this, config);
};
Ext.extend(Things, MODx.Component, { // List of groups for child objects
    panel: {}, page: {}, window: {}, grid: {}, tree: {}, combo: {}, config: {}, view: {}, utils: {}
});
Ext.reg('things', Things);
// Create instance of object for access to it properties
Things = new Things();

// Create panel in main object
// (in JS nested array is indicated with a dot,
// so we create object Home inside of the panel that is a child of Things)
Things.panel.Home = function (config) {
    config = config || {};
    Ext.apply(config, {
        items: [{
            html: '<h2>Things</h2>'
        } ]
    });
    Things.panel.Home.superclass.constructor.call(this, config); // Magic again
};
Ext.extend(Things.panel.Home, MODx.Panel); // Our panel extends MODX.Panel
Ext.reg('things-panel-home', Things.panel.Home); // Register new xtype for panel

Ext.onReady(function() {
    MODx.add({ // Show our panel on page
        xtype: 'things-panel-home'
    });
});

ExtJS TabPanel

We will decorate our page and see how to add items to it. Add the class «container» to our panel, to display the padding from other elements of the manager. Next we add the block with tabs and description. For tabs wtype is tabpanel, but MODX has its own object of tabs, which extends the Ext.TabPanel. This object adds CSS classes to the tabs look more organic within the manager. Also MODX tabs can be vertical.

// ...
Things.panel.Home = function (config) {
    config = config || {};
    Ext.apply(config, {
        cls: 'container', // Add padding
        items: [{
            html: '<h2>Things</h2>'
        }, {
            xtype: 'modx-tabs', // Add tabs
            items: [{ // List of tabs
                title: 'Things 1', // Title of first tab
                items: [{ // In tab will HTML block with class “panel-desc”
                    html: 'Things 1 description', 
                    cls: 'panel-desc',
                } ]
            }, {
                title: 'Things 2', // Title of second tab
                items: [{ // Other HTML-block
                    html: 'Things 2 description', 
                    cls: 'panel-desc',
                } ]
            } ]
        } ]
    });
    Things.panel.Home.superclass.constructor.call(this, config); // Magick =)
};
Ext.extend(Things.panel.Home, MODx.Panel);
Ext.reg('things-panel-home', Things.panel.Home);
// ...

As you understand, in addition to the documentation of ExtJS, we need to look also in the source code of MODX. Basically, all standard ExtJS objects in MODX are in the folder /manager/assets/modext/widgets/

In the next article, make our interface more interactive — consider sending requests and processing the response.