Making Sencha architect aware of an xtype

Question

I am using Architect 4.3.2.19, CMD 7.6.0.87 Modern framework. I have a couple of xtypes for things like Ext.Panel - example:

Ext.define('Ext.PanelSection', {
    extend: 'Ext.Panel',
    xtype: 'panelsection',
    alias: 'widget.panelsection',
    config: {
        shadow: true,
        ui: 'panel-section-title',
        layout: 'vbox',
        header: {
            height: 18,
            minHeight: 18,
            maxHeight: 18,
            style: 'text-decoration:underline'
        }
    }
});

The source for the xtype is held in a common.js file that is in the resource section of the Architect project inspector.

So in the architect I add an Ext.Panel to the canvas and then I then add a process config

config.xtype = 'panelsection';
return config;

It works beautifully but the architect will still show the panel header full height which makes laying out the panel a bit tricky. Is there a way of creating an xtype so that the architect is aware of it's config.

Answer 1

There was something I just now thought about in reading your question. It could be the Theme's .css is overriding your settings, possibly.

Two things you can try:

1. Once you place your PanelSection you could go down the Theme Config panel and change the default height to 18px.
   
2. You could you add another resource file containing .css, I did this, and allow it to override the panel header height. I did it for my Tabs in a TabPanel, it worked like a charm. But you'd need to find out what css class to override. In searching the .arch-internal-preview.css file, I found references to:

x-panel.x-header-position-top > .x-max-height-el { flex-direction: column }

You could try to add a height variable of 18px under the flex-direction and see if that changes the height of the header.

Anyway below is what I've done to change my Tabs in a separate resouce file.

Ex:

.x-tabpanel {
    font-size: 28px;
}

.x-tab{
    width: 250px;
}