Sencha Ext JS Architect - how to add a plugin - extjs

Question

I have a basic grid with a toolbar but want to use a plugIn for the toolbar. I can get the code working just fine when writing it manually, but I want to be able to use Architect 2. Here is a snippet...
{
xtype: 'gridpanel',
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
width: 360,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
}
]
}
plugins: new Ext.ux.ProgressBarPager() is the line that I cannot add using Architect 2. I cannot find the plugins property anywhere on the config panel. Any idea on how to add the plugin?

Answer 1

I think what you can do is override your pagingtoolbar and do something like this:
Ext.define('MyApp.view.override.ProgressBarPager.PagingToolbar', {
requires: 'MyApp.view.ProgressBarPager.PagingToolbar'
}, function() {
Ext.override(MyApp.view.ProgressBarPager.PagingToolbar, {
initComponent: function () {
this.plugins = [new Ext.ux.ProgressBarPager()];
this.callParent(arguments);
}
});
});

Answer 2

I know the question was for an earlier version of SA. In SA 4.2.3 you can add a component property that doesn't appear in the configs list by typing the property name in the editor above the config and pressing enter. Then you can change the type of the property value to whatever suits your needs. Using this method you can add the plugins property, then you can make it of type Array, then you edit the value and you can enter something like [{ptype: 'datatip'}] or in your case [new Ext.ux.ProgressBarPager()]