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:

 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:

 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:

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: