Change xtype of Architect generated code

[lufton]

Hi everyone, I try to use Sencha Architect for some time and get stuck with such problem. I want to use BoxSelect extension but I can't set xtype property of my default Combo. How can I use custom xtype? Can I somehow override my Combo and in Constructor or initComponent replace it with my BoxSelect control?

[scottmartin]

I have alerted the SA dev team about your question. It may help in the future to post your SA questions in the Architect forums.

Scott.

[lufton]

This isn't actually about SA, I solve this only adding event binding on my "main" panel and creating my custom Control there:

abstractcomponent.add({
	xtype: 'boxselect',
	id: 'tags',
	name: 'tags',
	clearable: true,
	autoHeight: true,
	fieldLabel: 'Тэги',
	labelAlign: 'right',
	displayField: 'title',
	minChars: 1,
	multiSelect: true,
	queryParam: 'cmstartsortkeyprefix',
	store: 'Tags',
	valueField: 'title',
	delimiter: '|'
});

But what if I want create something huge and complex like TabControl or FormPanel?

[aconran]

Hi everyone, I try to use Sencha Architect for some time and get stuck with such problem. I want to use BoxSelect extension but I can't set xtype property of my default Combo. How can I use custom xtype? Can I somehow override my Combo and in Constructor or initComponent replace it with my BoxSelect control?

Using an override or event handler as you've done below is the correct way to do this in the current public release of Architect (<= 2.1).

In a future release of Architect, 2.2+ we are experimenting with allowing users to set an additional architect specific configuration on every component like `createAlias`. This would allow you to drag out a standard combo, and configure all of the options you want and then later change the createAlias to `boxselect`.

[gbjk]

aconran,

We've got a TreeGrid with a few columns.
I needed to change one of them to checkcolumn.
To do that, I've had to override the whole of the initComponent for the grid, because I can't promote the column to a class for treegrids.

Is there a cleaner and less intrusive way to change the xtype without having to copy the whole of the initComponent?

Thanks

Gareth

[sunaku]

I solve this only adding event binding on my "main" panel and creating my custom Control there:

abstractcomponent.add({
    xtype: 'boxselect',
    id: 'tags',
    name: 'tags',
    clearable: true,
    autoHeight: true,
    fieldLabel: 'Тэги',
    labelAlign: 'right',
    displayField: 'title',
    minChars: 1,
    multiSelect: true,
    queryParam: 'cmstartsortkeyprefix',
    store: 'Tags',
    valueField: 'title',
    delimiter: '|'
});

To make the above code work, I had to add it to my panel's beforerender event binding.

[gbjk]

I ended up solving it like this:

Ext.define('Ext.treegrid.plugin.MyGrid', {
    extend: 'Ext.AbstractPlugin',
    init: function(grid){
        var me  = this;
        me.grid = grid;
        // Take the columns, remove them, and turn them into check columns
        for (var i=1;i<=2;i++){
            var initial_config = grid.columns[i];
            initial_config.xtype = 'checkcolumn';
            grid.columns[i] = Ext.create('Ext.ux.CheckColumn', initial_config);
            }


        return;
    }
});

Ext.define('carsplus.view.override.MyGrid', {
    override: 'carsplus.view.PermissionGrid',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            ptype: 'cellediting',
            clicksToEdit: 1
        }),
        Ext.create('Ext.treegrid.plugin.MyGrid')
    ],
});

But I'm fairly sure there's a better way to hook in than a plugin, possibly globally.

Note: For this use-case, I just wanted to convert columns 1 and 2.
Could be replaced with changing columns whose attribute matches a pattern.

G