EXTJS_Tabpanel布局,选项卡加载页面,调用别的jsp页面,截图所示

 

EXTJS_Tabpanel布局,选项卡加载页面,调用别的jsp页面,截图所示

标签： extjsjspfunctionborderlayout

2011-07-21 14:01  2869人阅读  评论(1)  收藏  举报

  分类：

EXTJS（7） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

先上来:advancedTree01.json文件的的内容

[

  {
   "text":"卡卡西班",
   "id":"01",
   "allowDrag":false,
   "des":"最强的组合！",
    "children":[
    {"text":"小樱","id":"0101","allowDrag":false,"des":"一个很可爱的女孩！","children":[
            {"text":"小樱1","id":"010101","leaf":true,"allowDrag":true,"des":"一个很可爱的女孩！"},
            {"text":"鸣人1","id":"010202","leaf":true,"allowDrag":true,"des":"四代火影的儿子！"},
            {"text":"佐助1","id":"010303","leaf":true,"allowDrag":true,"des":"为了杀自己哥哥而活着的男人！"}
             ]
    },
    {"text":"鸣人","id":"0102","leaf":true,"allowDrag":true,"des":"四代火影的儿子！"},
    {"text":"佐助","id":"0103","leaf":true,"allowDrag":true,"des":"为了杀自己哥哥而活着的男人！"}
   ]
  },
  {
   "text":"凯班",
   "id":"02",
   "allowDrag":false,
   "des":"有一个很白痴的老师！",
   "children":[
    {"text":"小李","id":"0201","leaf":true,"allowDrag":true,"des":"他的努力意识值得任何人学习！"},
    {"text":"宁次","id":"0202","leaf":true,"allowDrag":true,"des":"白眼族的天才忍者！"},
    {"text":"天天","id":"0203","leaf":true,"allowDrag":true,"des":"她救活了一个暗器公司！"}
   ]
  }

 ]

 Ext.onReady(function(){
          var tree1 = new Ext.tree.TreePanel({
                id : 'tree-mianban',
                title : 'All publisher',
              
                frame : true, 
                collapsible : true, 
                  height:1200,    
                width : 400,
                split : true, 
                minSize : 200, 
                maxSize : 600, 
                loader : new Ext.tree.TreeLoader({ dataUrl : 'common/myjs/advancedTree01.json' }) }); 
            // 根节点 
            var root1 = new Ext.tree.AsyncTreeNode({ 
                text : '木叶',
                draggable : false,
                id : 'root1'//children : json
                }); 
                tree1.setRootNode(root1); 
                 root1.expand(true, true);
                
                var form1 = new Ext.form.FormPanel({ 
                    title : '广告管理',
                    width : 400,
                    collapsible : true, 
                    frame : true,
                    labelWidth : 2,
                    region : 'west',
                    items : [
                             { xtype : 'fieldset', 
                                 layout : 'column', 
                                 height : 50, 
                                 defaultType : 'radio', 
                                 items : [{ name : 'radio',
                                     id : 'manradio',
                                     boxLabel : 'standard', 
                                     hideLabel : true, 
                                     inputValue : 'man',
                                     checked : true,
                                     listeners : { 'check' : function(item,check) { 
                                         //监听check事件 你之前那么写是错的 Ext渲染完后 dom元素的id不再是manradio 
                                         alert(check);
                                         alert(item.id)
                                         } } }, 
                                         { name : 'radio',
                                             id : 'womanradio',
                                             hideLabel : true, 
                                             boxLabel : 'virtualGroup',
                                             inputValue : 'woman', 
                                             listeners : { 'check' : function(item,check) { 
                                                 alert(check);
                                                 alert(item.id) } } }] }, 
                                                 { xtype : 'textfield',
                                                     anchor : '98%', 
                                                     value : '搜索',
                                                     id : 'search', 
                                                     name : 'text'
                                                         }, tree1] });
                
                
                
    
                var form2 = new Ext.form.FormPanel({ 
                    title : 'Media',
                    region : 'north', 
                    frame : true, 
                    height :100,
                    layout : 'column', 
                    border : true,
                    anchor : '100%',
                    labelWidth : 30,
                    xtype : 'fieldset', 
                    items : [
                             { 
                        columnWidth : .3,
                        layout : 'form', 
                        border : false, 
                        items : [
                                 { xtype : 'textfield', fieldLabel : 'time', name : 'aaa', anchor : '40%' }] },
                    { columnWidth : .3, layout : 'form', border : false, items : [{ xtype : 'textfield', fieldLabel : 'area', name : 'bbb', anchor : '40%' }] },
                    { columnWidth : .3, layout : 'form', border : false, items : [{ xtype : 'textfield', fieldLabel : 'category', name : 'bbb', anchor : '40%' }] }
                    ] }); 
                
          var center = new Ext.TabPanel({
             title:'center',
             defaults:{autoScroll:true},
             frame:true,
             region:'center',
            
             items: [{
                 id: 'Campaigins',
                 title: 'Campaigins',
                  html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'gridpanel.jsp'+'"> </iframe>',

                 listeners:{                   // 添加监听器，点击此页面的tab时候要重新加载（刷新功能）
                   activate:function(){
                    this.getUpdater().refresh();
                   }
                   }
             },
             {
                 id: 'Groups',
                 title: 'Groups',

                html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'http://www.dangdang.com'+'"> </iframe>',

                 listeners:{                   // 添加监听器，点击此页面的tab时候要重新加载（刷新功能）
                   activate:function(){
                    this.getUpdater().refresh();
                   }
                   }
             },
            {
                 id: 'Ads',
                 title: 'Ads',

                html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'http://www.baidu.com'+'"> </iframe>',

                 listeners:{                   // 添加监听器，点击此页面的tab时候要重新加载（刷新功能）
                   activate:function(){
                    this.getUpdater().refresh();
                   }
                   }
             },
             {
                 id: 'Keywords',
                 title: 'Keywords',

                 html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'http://www.google.com'+'"> </iframe>',

                 listeners:{                   // 添加监听器，点击此页面的tab时候要重新加载（刷新功能）
                   activate:function(){
                    this.getUpdater().refresh();
                   }
                   }
             },
             {
                 id: 'Placements',
                 title: 'Placements',

                 html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'gridpanel.jsp'+'"> </iframe>',

                 listeners:{                   // 添加监听器，点击此页面的tab时候要重新加载（刷新功能）
                   activate:function(){
                    this.getUpdater().refresh();
                   }
                   }
             },
             ]
          });
         
          center.setActiveTab(0);
        
          
            
          var viewport = new Ext.Viewport({ 
              layout : 'border',
              items : [ form1,
                  { region : 'center',layout : 'border', items : [form2, center] }
              ]
          });
          
          });

顶

0

踩

0

 

 

• 上一篇EXTjs 的ajax返回的response对应url中的数据,
• 下一篇Gridpanel数据加载成功后,触发事件,让表格第一行的数据显示在下面的formpanel

我的同类文章

EXTJS（7）

• •form中的button,添加在内部,多了一条线,解决办法2011-08-03阅读441
• •extjs 下拉框取值2011-07-15阅读1735
• •extjs项目案例2011-07-14阅读3358
• •extjs的例子2011-07-14阅读427

• •Gridpanel数据加载成功后,触发事件,让表格第一行的数据显示在下面的formpanel2011-07-22阅读1819
• •Extjs RadioGroup中Radio的切换2011-07-14阅读1458
• •功能强大的EXTJS的tree的节点操作2011-07-14阅读1741

猜你在找

Git代码管理工具速成视频课程

大规模敏捷需求管理

分布式资源管理系统的前世今生，深入剖析YARN资源调度架构

2016软考系统集成项目管理工程师视频教程精讲 基础知识（下）

PHP面向对象设计模式

给jsp页面加图片加载不出来的解决办法

37-002-1 通过spring的OpenSessionInViewFilter解决jsp页面懒加载显示的问题

JSP页面加载xls表格数据

当jsp页面完全加载完成后执行一个js函数

struts2实现首次打开默认jsp页面预加载数据库表的读取

查看评论

1楼  tanwencan 2011-09-29 11:29发表 [回复]

当同时加载多个tabpanel的时候,也能够实现多个tabpanel都刷新吗？