CODEWITHSUNDEEP
sencha-architect
David
David

Reputation: 123

Making Sencha architect aware of an xtype

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.

Upvotes: 0

Views: 54

Answers (1)

pjackson
pjackson

Reputation: 47

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.
    enter image description here
  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;
}

Upvotes: 0

Related Questions