MODx how to create a xtype combobox based on modResource

Written by

Hello everyone!

In this post I will try to explain how to create a xtype combobox for your custom CMP in MODx.
This can be helpful if you create a CMP page using this tutorial – Developing an Extra in MODX Revolution.

Let’s get started!

Part 1: create Javascript/Extjs template

In my case I need to create a combobox in an update window and I need to load to this combobox a modResource entity by some criteria. For example for these entities I need to set parent id in my query in xPDOObject.

First you need create combobox xtype/template and will name it – modx-combo-employees:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
MODx.combo.Template = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        name: 'manager_id'
        ,hiddenName: 'manager_id'
        ,displayField: 'pagetitle'
        ,valueField: 'id'
        ,pageSize: 20
        ,fields: ['id','pagetitle']
        ,tpl: new Ext.XTemplate('<tpl for="."><div class="x-combo-list-item"><span style="font-weight: bold">{pagetitle}</span>'
            ,'<tpl if="pagetitle"> - <span style="font-style:italic">{pagetitle}</span></tpl>'
            ,'<br />{description}</div></tpl>')
    ,url: testimonials.config.connectorUrl
        ,baseParams: {
            action: 'mgr/managers/getList'
        }
        ,allowBlank: true
    });
    MODx.combo.Template.superclass.constructor.call(this,config);
};
Ext.extend(MODx.combo.Template,MODx.combo.ComboBox);
Ext.reg('modx-combo-employees',MODx.combo.Template);

In this code example I use xtype/template from modx-combo-category but I have some changes.

According to the official tutorial you must have a separate directory with the name like – doodles.
In my case I created directory with the name – testimonials.
And entities/objects that are displayed on CMP page named – Testimonials.
Each testimonial has some parameters like name/text/phone/photos/avatar/etc.
And it has a parameter – manager_id.
The id of this parameter belongs to modResource object type which contain standard fields like – name/pagetitle/content/etc.
And I need to receive these fields in my combobox to display a name of managers in it.

For receive this data to in combobox you need to create processor for this combobox, path to this processor defined in JS code above:

1
2
3
baseParams: {
 action: 'mgr/managers/getList'
}

Part 2: create php processor

You need to create the processor for connector – getlist.class.php in directory – path_to_your_package/mgr/managers and then defined your class.
In my case like this:

1
2
3
4
5
6
7
8
9
class ManagersGetListProcessor extends modObjectGetListProcessor {
        public $classKey = 'modResource';
        public $defaultSortField = 'id';
        public function prepareQueryBeforeCount(xPDOQuery $c) {
                $c->where(array(
                    'parent' => 1683
                ));
                return $c;
        }

Public method prepareQueryBeforeCount provides a possibility to change query in xPDOObject before it executes and returns the results to the connector.
I change WHERE clause and set parent id because I have collection of my entities with this id. But you can set any other criterias for xPDOObject like – join/sort/limit and etc.
This collection contains managers that I need to displayed in my combobox.

In conclusion

After completing the above these actions you should get the combobox like this:
screen-shot-2017-08-28-at-20-12-31