PDA

View Full Version : Ext.draw.Component doesn't display when viewBox=true



ybendana
5 Oct 2012, 5:05 PM
Can anyone explain why when the viewBox config is true (as it is by default) the Ext.draw.Component as configured doesn't display? When I set viewBox=false, it displays. I know it will display if I specify the width or height for the Ext.draw.Component, but I'm wondering what is the effect of the viewBox. When viewBox=true, the created viewBox is [0 0 200 200] so it seems like it should display the Sprite, although for some reason the enclosing panel has a height of 2px.



var drawComponent = Ext.create("Ext.draw.Component", {
items: [{
type: "circle",
fill: "#79BB3F",
radius: 100,
x: 100,
y: 100
}]
});
Ext.create("Ext.panel.Panel", {
renderTo: "sandbox",
items: [drawComponent]
});

vietits
5 Oct 2012, 6:49 PM
Setting viewBox to true will force to scale all sprites so that the view of all sprites will fit the drawing surface (something likes zoom in or zoom out). In this case, you must explicitly set the size of drawing surface. If not, the surface size will be [0, 0] and nothing will be shown.


var drawComponent = Ext.create("Ext.draw.Component", {
viewBox: true,
width: 100,
height: 100,
items: [{
type: "circle",
fill: "#79BB3F",
radius: 100,
x: 100,
y: 100
}]
});


Setting viewBox to false will keep showing all sprites to their size. In this case, if you don't specify the size of drawing surface, it will be sized to fit all sprites. This is done by layout mechanism. If you specify the drawing size then what is inside the area of drawing surface will be shown and what is outside will not.