Class type Ext_draw_Component.configs

class type configs = object .. end

method autoSize : bool Js.t Js.prop

Turn on autoSize support which will set the bounding div's size to the natural size of the contents.

Defaults to: false

method baseCls : Js.js_string Js.t Js.prop

The base CSS class to apply to this component's element. This will also be prepended to elements within this component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this component.

Defaults to: Ext.baseCSSPrefix + 'surface'

method componentLayout : 'a. 'a Js.t Js.prop

The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.

Generally, developers will not use this configuration as all provided Components which need their internal elements sizing (Such as input fields) come with their own componentLayout managers.

The default layout manager will be used on instances of the base Ext.Component class which simply sizes the Component's encapsulating element to the height and width specified in the setSize method.

Defaults to: 'draw'

method enginePriority : Js.js_string Js.t Js.js_array Js.t Js.prop

Defines the priority order for which Surface implementation to use. The first one supported by the current environment will be used.

Defaults to: 'Svg', 'Vml'

method gradients : 'b. 'b Js.t Js.js_array Js.t Js.prop

(optional) Define a set of gradients that can be used as fill property in sprites. The gradients array is an array of objects with the following properties:

• id - string - The unique name of the gradient.
• angle - number, optional - The angle of the gradient in degrees.
• stops - object - An object with numbers as keys (from 0 to 100) and style objects as values

Example

gradients: [{
    id: 'gradientId',
    angle: 45,
    stops: {
        0: {
            color: '#555'
        },
        100: {
            color: '#ddd'
        }
    }
}, {
    id: 'gradientId2',
    angle: 0,
    stops: {
        0: {
            color: '#590'
        },
        20: {
            color: '#599'
        },
        100: {
            color: '#ddd'
        }
    }
}]

Then the sprites can use gradientId and gradientId2 by setting the fill attributes to those ids, for example:

sprite.setAttributes({
    fill: 'url(#gradientId)'
}, true);

method items : Ext_draw_Sprite.t Js.js_array Js.t Js.prop

Array of sprites or sprite config objects to add initially to the surface.

method shrinkWrap : 'c. 'c Js.t Js.prop

If this property is a number, it is interpreted as follows:

• 0: Neither width nor height depend on content. This is equivalent to false.
• 1: Width depends on content (shrink wraps), but height does not.
• 2: Height depends on content (shrink wraps), but width does not. The default.
• 3: Both width and height depend on content (shrink wrap). This is equivalent to true.

In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed to a block-level element. Some container layouts always shrink-wrap their children, effectively ignoring this property (e.g., Ext.layout.container.HBox, Ext.layout.container.VBox, Ext.layout.component.Dock).

Defaults to: 3

method viewBox : bool Js.t Js.prop

Turn on view box support which will scale and position items in the draw component to fit to the component while maintaining aspect ratio. Note that this scaling can override other sizing settings on your items.

Defaults to: true