PDA

View Full Version : How to constrain a Ext.draw.Component in a panel?



Fent2
14 Apr 2014, 1:26 AM
I add a Ext.draw.Component as a item in a panel ,but it seen the component not
constraint in the panel,it can move outside the panel !
how to config it?
it try like the code below


Ext.onReady(function() {





Ext.define('PanelView', {

extend: 'Ext.panel.Panel',
closable : true,
title: 'title',
autoShow: true,
id :'PanelView',

width: 800,
height: 800,
//layout: 'auto',
bodyStyle: 'padding:3px',
// items:[drawComponent],
renderTo: Ext.getBody(),

initComponent: function() {

var me = this;

this.callParent(arguments);

}
});

var panel = Ext.create('PanelView');

var tiger = Ext.define('TigerDefine', {
extend: 'Ext.draw.Component',
width: 400,
height: 400,
cls: 'cursor-dragme',
draggable: {
constrain: true,
constrainTo: panel
},
floating: {
shadow: false
},
// renderTo: Ext.getBody(),
items: [{
type: "path",
path: "M-122.304 84.285C-122.304 84.285 -122.203 86.179 -123.027 86.16C-123.851 86.141 -140.305 38.066 -160.833 40.309C-160.833 40.309 -143.05 32.956 -122.304 84.285z","stroke-width":"0.172",
stroke:"#000",
fill:"#fff"
},
{
type: "path",
path: "M-118.774 81.262C-118.774 81.262 -119.323 83.078 -120.092 82.779C-120.86 82.481 -119.977 31.675 -140.043 26.801C-140.043 26.801 -120.82 25.937 -118.774 81.262z",
"stroke-width": "0.172",
stroke: "#000",
fill: "#fff"
},
{
type: "path",
path: "M-91.284 123.59C-91.284 123.59 -89.648 124.55 -90.118 125.227C-90.589 125.904 -139.763 113.102 -149.218 131.459C-149.218 131.459 -145.539 112.572 -91.284 123.59z",
"stroke-width": "0.172",
stroke: "#000",
fill: "#fff"
},
{
type: "path",
path: "M-94.093 133.801C-94.093 133.801 -92.237 134.197 -92.471 134.988C-92.704 135.779 -143.407 139.121 -146.597 159.522C-146.597 159.522 -149.055 140.437 -94.093 133.801z",
"stroke-width": "0.172",
stroke: "#000",
fill: "#fff"
},
]
});

var aaaa = Ext.create(tiger);


panel.items = [aaaa];

aaaa.show();










});