MODExt

Last updated Apr 17th, 2019 | Page history | Improve this page | Report an issue

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$306 per month—let's make that $500!

Learn more

What is MODExt?¶

MODExt is an extension of the ExtJS3 JavaScript Framework that provides extra, customized-to-MODx functionality. It drives MODX Revolution's manager interface, and it is also available to developers wanting to use it in their CMP development. A developer simply needs to use Ext.extend on the MODx.* class to instantly get the benefit of custom MODExt components.

Why Ext JS? There are lots of Javascript libraries and frameworks out there, and all of them let you manipulate the DOM, but only a couple of them offer a mature UI library (the Yahoo User Interface and Ext JS are the biggest players in the field). Ext JS is well suited to creating a rich internet application such as the MODX manager.

Commonly-Used Components¶

There are a few components that are used throughout the MODx Manager, and will likely be used in CMPs

More MODExt Components¶

Of course, there are more MODExt components at your disposal. For a full list (and source code to examine), browse to the manager/assets/modext/widgets/core/ directory of your MODx installation.

xcheckbox¶

The xcheckbox xtype is an extension to the regular ExtJS checkbox added in MODX 2.1 that, when the checkbox is not checked, will send the value "0" instead of an empty string compared to the original checkbox form input.

Extending a MODExt Class¶

Extending a MODExt component is actually quite simple. Let's extend the MODx.grid.Grid class to create our own custom grid, complete with a custom toolbar.

First, create a new JavaScript file and place the following code:

MyComponent.grid.MyGrid = function( config ) {
    /* Class parent constructor */
    MyComponent.grid.MyGrid.superclass.constructor.call( this, config );
};
Ext.extend( MyComponent.grid.MyGrid, MODx.grid.Grid, {
    /* Class members will go here */
} );
/* Register "mycomponent-grid-mygrid" as an xtype */
Ext.reg( "mycomponent-grid-mygrid", MyComponent.grid.MyGrid );

Here, we've created our own class (MyComponent.grid.MyGrid) which extends MODx.grid.Grid. We have also registered "mycomponent-grid-mygrid" as an Ext xtype, which can be used to display this grid in a FormPanel or other component. It has no additional functionality -- yet!

Now, let's add some configuration options:

MyComponent.grid.MyGrid = function( config ) {
    config = config || {};

    /* Grid configuration options */
    Ext.applyIf( config, {
        id : "mycomponent-grid-mygrid",
        title : _( "my_grid" ),
        url : MyComponent.config.connectors_url + "list.php",
        baseParams : {
            action : "getlist"
        },
        paging : true,
        autosave : true,
        remoteSort : true,
        /* Store field list */
        fields : [ {
            name : "id",
            type : "int"
        }, {
            name : "name",
            type : "string"
        }, {
            name : "menu"
        } ],
        /* Grid ColumnModel */
        columns : [ {
            header : _( "id" ),
            dataIndex : "id",
            sortable : true
        }, {
            header : _( "name" ),
            dataIndex : "name",
            sortable : true
        } ],
        /* Top toolbar */
        tbar : [ {
            xtype : "button",
            text : _( "create" ),
            handler : {
                xtype : "mycomponent-window-create",
                blankValues : true
            },
            scope : this
        } ]
    } );

    /* Class parent constructor */
    MyComponent.grid.MyGrid.superclass.constructor.call( this, config );
};

Ext.extend( MyComponent.grid.MyGrid, MODx.grid.Grid, {
    /* Class members will go here */
} );

/* Register "mycomponent-grid-mygrid" as an xtype */
Ext.reg( "mycomponent-grid-mygrid", MyComponent.grid.MyGrid );

Our basic configuration sets the grid up to work with a "list" connector, using the "getlist" action parameter. It also sets up paging, sorting, and enables "autosave" functionality so that whenever a record is changed, it's automatically updated in the database.

We then set up our fields (id, name, and menu), and our ColumnModel which references the fields in our store.

Lastly, we create the top toolbar, consisting of a button. The handler creates a window used for creating a record to add to our database.