extjs 控制一个组件component在panel里面限制拉动与拖动范围

    需求： 在一个panel里面添加一个component组件，然后可以拉动component组件大小与拖动组件位置，但只能限制在panel里面。

1、基本代码如下：

     Ext.onReady(function(){
                Ext.create('Ext.panel.Panel',{
					  renderTo: document.body
					  ,layout: 'absolute'
					  ,width: 300
					  ,height: 300
					  ,items: [{
					  　       xtype: 'component'　　　　　
  					           ,width: 50
						   ,header:false
						   ,height: 50
						   ,style: 'border: 1px solid red'
				           }]
			 });

 如图：

2、尝试初步想法： 给component添加属性

                          ,draggable: true //允许拖动
			  ,resizable: true //允许拉动大小
                          ,constrain: true //限制区域

结果不是想要的结果，看图说话。

1、预期可拖动的范围应该是整个panel，但结果只能在红色区域里面拖拽，不知为何上面与左边都留了空白。

2、并且拉动的时候，还是可以把拉动操作超出了panel.

3、 不断折腾后的终版代码如下：

	  ,width: 50
	  ,header:false
	  ,height: 50
	  ,style: 'border: 1px solid red'
	  ,draggable: {constrain: true}   //拖动范围限制
	  ,listeners:{
             afterrender: function(T){    //在渲染完后，再添加拉动支持
		 Ext.create('Ext.resizer.Resizer', {
		      constrainTo : T.up('panel').getEl()
		      ,handles: 'all'
		      ,target: T
		  });
	     }
	 }

本文出自 “随” 博客，转载请与作者联系！