程序博客网 > linux配置dhcp服务器

Extjs tabpanel实例

来源：互联网发布：linux配置dhcp服务器编辑：程序博客网时间：2024/04/29 04:35

今天做了一个tabpanel实例，就是几个简单的功能：动态添加选项卡，右键菜单关闭其他和关闭当前，参考了网上一些例子和API，记录了一些问题：

1. 内容不显示原因：没有设置 height属性其实就是因为高度默认为0 显示了看不到
2. js错误例外被抛出并未被捕获原因：没有设置region属性（使用viewport）
3. 用viewport和用renderTo的区别：这俩属性都能把tabpanel渲染到页面上，区别就是viewport感觉是一种针对整天页面来说的布局管理器，要是你页面啥都没有，他就会把这个唯一的元素tabpanel放大到整个页面，同时width和height属性就不起作用了；renderTo这个属性就比较侧重于局部，就是说布局这个事由自己管理，所以可以自由的设置width和height，但是如果height属性忘了设置，那么内容就显示不了了，因为height默认为0，显示了看不到

放代码：

jsp部分：

<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" href="<%=path %>/ext/resources/css/ext-all.css" type="text/css"></link>
   <script type="text/javascript" src="<%=path %>/ext/adapter/ext/ext-base.js"></script>
   <script type="text/javascript" src="<%=path %>/ext/ext-all.js"></script>
   <script type="text/javascript" src="<%=path %>/tab.js"></script>
   </head>

<body>
    <div id="tabdiv"></div>
</body>
</html>

老规矩导入这仨文件！一个css 俩js

js部分：tab.js

var index=0;
var contentPanel;
Ext.onReady(function() {
contentPanel = new Ext.TabPanel({
  renderTo: Ext.getBody(),
  resizeTabs: true, //自动调整每个tab页的尺寸
  minTabWidth: 100,//tab标签最小宽度（在页面缩放时）
  tabWidth: 150,//正常状态下tab标签的宽度
  activeTab:0, //默认显示的选项卡 0表示第一个
  enableTabScroll: true,//设置为true 标签页带滚动动画（页面缩放）
  width: 600,
  height: 150,
  region : 'center',//布局方式
  defaults: { autoScroll: true },//默认带自动滚动
  plugins: new Ext.ux.TabCloseMenu(),//右键菜单这个属性还可以设置其他的功能算是个插件属性哈哈
  tbar: [{ text: '新建Tab', iconCls: 'new-tab',handler:addTab}]//老面孔了头部菜单添加tab用的
});
//下面这个循环就是添加几个tab 懒得一个一个add了
while(1==1){
  contentPanel.add({
   id:'a'+index,
   name:'aa'+index,
   title:'aa'+index,
   html:'<span>a'+index+'</span>',
   closable:true,//带关闭按钮
   draggable:true//能拖动
  }).show();//不调用show方法无法显示
  if(index>3) break;
  index++;
}
// var viewport = new Ext.Viewport({//一种布局管理器
//  layout : 'border',
//  items : [{
//   region : 'center',
//   split : true,
//   border : true,
//   layout : 'border',
//   items : [contentPanel]
//  }]
// });
});
//添加选项卡的函数这里注意id如果和之前的重复那么会添加不上
function addTab(tab){
index++;
contentPanel.add({
  title:'aa'+index,
  id:'a'+index,
  name:'aa'+index,
  html:'aa'+index,
  closable:true
});
}
//上面tabpanel用到的右键菜单这个看起来有点小复杂其实逻辑没那么麻烦
Ext.ux.TabCloseMenu=function(){
  var contentPanelTemp,menu,ctxItem;//定义了三个临时变量第一个就是tabpanel 第二个是菜单对象三个就是被你右键的那个选项卡对象
  this.init=function(tb){//初始化函数据api说 tabpanel设置了plugins之后会来自动执行这个init方法这样重要的tabpanel对象就有了
   contentPanelTemp=tb;//把tabpanel赋值给临时变量后面对tabpanel的操作都用他了
   contentPanelTemp.on("contextmenu",onContextMenu);//把菜单绑定上去
  };
  //绑定菜单的函数
  function onContextMenu(ts,item,e){
   ctxItem=item;//当前选中的选项卡
   if(!menu){//如果菜单不存在就给他创建个新的这样只会在第一次的时候创建
    menu=new Ext.menu.Menu([{//俩菜单一个删除当前一个删除其他
     id:ts.id+'_id',
     text:'关闭当前',
     handler:function(){
      contentPanel.remove(ctxItem);
     }
    },{
     id:ts.id+'_close_id',
     text:'关闭其他',
     handler:function(){
      contentPanelTemp.items.each(function(item){//这个函数是遍历用的跟foreach一个意思他的这个item其实就是当前遍历的对象
       if(item.closable&&item!=ctxItem){//这里判断下如果遍历的这个选项卡没关闭并且不是选中的选项卡就给他删除掉
        contentPanelTemp.remove(item);
       }
      });
     }
    }]);
   }
   var items=menu.items;//为了操作方便放到了临时变量里
   items.get(ts.id+'_id').setDisabled(!ctxItem.closable);//上面俩id 对号入座吧这里说一下 disabled设置为true 则按钮不可用而选项卡的closable为true 为显示状态正好相反
   if(contentPanelTemp.items.length==1){//不能全删除必须留下一个
    items.get(ts.id+'_id').setDisabled(true);
   }
   var otherallclose=true;//在只有一个选项卡的情况下禁用关闭其他菜单选项
   contentPanelTemp.items.each(function(temp){
    if(temp!=item&&temp.closable){
     otherallclose=false;//说明有1个以上的选项卡
     return false;
    }
   });
   //这里说一下根据上面的逻辑如果有显示并且不是被点击的那个选项卡（就是有一个以上的选项卡还显示）就会进if 只要进了if otherallclose就是false 那么关闭其他菜单项就可以用否则就是只有一个选项卡自然就不用关闭其他了
   items.get(ts.id+'_close_id').setDisabled(otherallclose);
   menu.showAt(e.getPoint());//设置下坐标也就是菜单出现的位置发现要是弹了alert 位置就跑上面去了
  }
};

注释都写了仅供个人学习用途~ 如有雷同纯属坑爹~

linux配置dhcp服务器

linux配置dhcp服务器

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子小泪痣全文免费阅读泪痣图片小泪痣无防盗全文桃花痣和泪痣小泪痣番外怀孕泪痣的位置女生泪痣的正确位置正确的泪痣的位置图泪痣的三种位置图解小泪痣鹿灵有泪痣的女人男人泪痣的位置图片桃花痣和泪痣的照片泪痣的正确位置图片他的小泪痣有泪痣的人代表什么桃花痣和泪痣的区别泪痣的位置与命运图小泪痣番外二则什么是泪痣泪痣好不好左眼泪痣代表什么好看的泪痣图片泪痣的传说泪痣是什么长泪痣的女生好不好泪痣是什么意思有泪痣的人泪痣在哪流泪痣泪痣好吗滴泪痣滴泪痣的位置与命运图泪目泪目什么意思泪目是什么梗永不消逝的电波全程泪目泪窝图片泪窝怎么消除泪腺泪腺脱垂