初始学习EXT，小实例（viewport容器3）

初步学习EXT，小实例（viewport容器3）
//叶子节点移动时触发的nodedrop事件，内部自动实现了观察者模式 
  tp.on('nodedrop',function(n){
          if(n.point=='append'){Ext.Msg.alert('message information',"当前的" + n.dropNode.text + "被" + n.target.text + "录取");}
          else if(n.point=='above'){Ext.Msg.alert('message information',"当前的" + n.dropNode.text + "放在了" + n.target.text + "上面");}
          else if(n.point=='below'){Ext.Msg.alert('message information',"当前的" + n.dropNode.text + "放在了" + n.target.text + "下面");}
      });
 
      //构建一个TAB面板
      var tabpanel = new Ext.TabPanel({
          region:'center',
          items:[{title:'Default Tab',
          html:'This is a first TabPanel '},{title:'tow',html:'I am tow'},{title:'three',html:'I am three'}],
          activeTab:2 //默认第一个TAB面板为初始化内容
      });
     
      //这是一个VIEWPORT的容器
      var vw = new Ext.Viewport({
          layout:'border',
          id:'viewport',
          enableTabScroll:true,
          items:[
          {
          region:'north',
          autoHeight:true,
          border:false,
          margins:'1 1 5 1',
          html:'<h1 class="x-panel-header">ViewPort Title</h1>'
          },
          tp,
          tabpanel,
          {
          region:'south',
          title:'Information',
          collapsible:true,
          html:'i am going here',
          split:true,
          height:100,
          minHeight:100}]
      });
  });