There are a few components that are used throughout the MODx Manager, and will likely be used in CMPs
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.
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 component is actually quite simple. Let's extend the MODx.grid.Grid class to create our own custom grid, complete with a custom toolbar.
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:
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.