extjs实现自定义 拖拽效果

首先引用extjs

    <script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.1.1/ext-all.js"></script>
<script type="text/javascript" src="ext-3.1.1/examples/ux/Portal.js"></script>
<script type="text/javascript" src="ext-3.1.1/examples/ux/PortalColumn.js"></script>
<script type="text/javascript" src="ext-3.1.1/examples/ux/Portlet.js"></script>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />

主要是在ux下的portal.js

<script type="text/javascript">
Ext.onReady(function(){
      //创建一个viewPort
      new Ext.Viewport({
           title:"自定义拖动布局",
           layout:"border",
           items:[{title:"导航管理",width:200,region:"west"},{}]
          
           })
     
      })
</script>

效果图如下: