EXTJS Tabpanel选项卡加载,布局变形

Question

Ext.onReady(function(){
var  tree1=new Ext.tree.TreePanel({
    id: 'tree-mianban',
    title : 'All publisher',
    region : 'west',
    frame:true,
    collapsible:true,
   height:1000,  defaults:{autoScroll:true},
    width:400,
    split:true,minSize:300,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);
//  tree1.render(document.body);
 root1.expand(true, true); 
 
 
 
 var  form1=new  Ext.form.FormPanel({
title:'左边',
width:350,
frame: true,
height:1200,
labelWidth:2,
region:'west',
layout:'form',
items:[
{
xtype: 'fieldset',
layout:'column',
defaultType:'radio',
items:[{
name:'radio',
id:'manradio',
boxLabel:'standard',
inputValue:'man',
checked:true,
 listeners:{
            'check':function(){
                //alert(adminRadio.getValue());
                if(document.getElementById("manradio").checked){
                 document.getElementById("womanradio").checked=false;
                 document.getElementById("manradio").checked=true;
                }
            }
 }

},{
name:'radio',
id:'womanradio',
boxLabel:'virtualGroup',
inputValue:'woman',
listeners:{
            'check':function(){
                //alert(adminRadio.getValue());
                if(document.getElementById("womanradio").checked){
                 document.getElementById("manradio").checked=false;
                 document.getElementById("womanradio").checked=true;
                }
            }
 }

}]
},
{
xtype:'textfield',
anchor:'98%',
value:'搜索',
id:'search',
 name:'text'
},
tree1
]   });
    form1.render("form1");     
    var  form2=new  Ext.form.FormPanel({
     title:'Media',
    region:'north',
    frame:true,
    height:80,
    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 tabs = new Ext.TabPanel({
     id:'tabs',
//          Layout:'border',
region:'center',
        activeTab: 0,
        collapsed: true,
            items: [{
                id: 'Campaigins',
                title: 'Campaigins',
                html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'http://www.baidu.com'+'"> </iframe>'
            },
            {
             id: 'Groups',
             title: 'Groups',
             html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'http://www.google.com'+'"> </iframe>'
            },
           {
             id: 'Ads',
             title: 'Ads',
             html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'gridpanel.jsp'+'"> </iframe>'
            },
            {
             id: 'Keywords',
             title: 'Keywords',
             html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'http://www.baidu.com'+'"> </iframe>'
            },
            {
             id: 'Placements',
             title: 'Placements',
             html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'gridpanel.jsp'+'"> </iframe>'
            },
            ]
        });
       
     
       var tab =tabs.getItem('Ads') //获得要显示的选项卡

//设置选项卡为活动状态
tabs.setActiveTab(tab);
//        tabs.getActiveTab().load({url:'printpage.jsp',scripts:true}); 
//       tab.load({url:'http://www.baidu.com',scripts:true});       
        tabs.addListener("tabchange", function(tabs, nowtab){
        
         tabs.setActiveTab(nowtab);        
        
        }
        );        
        var  viewport=new  Ext.Viewport({
        layout:'border',
        items:[
//               {region:'west',
//              width:400,
//                border: true,
//                   layout: 'border',
//                   items: [form1,tree1]  
//                
//               },
                  form1,{
             region:'center',
         layout:'border',
         items:[
        form2,tabs ]
            }]  
       
         });        }) 
 
 代码如上,为何点击加载不了呢?????????????????????????/帮我解答阿   如果加载成功 会瞬间消失  布局还变形了,这是什么原因呢???????

Answer 1

该改的都帮你改了 看下效果吧
Ext.onReady(function() {
var tree1 = new Ext.tree.TreePanel({
id : 'tree-mianban',
title : 'All publisher',
region : 'west',
frame : true,
collapsible : true,
height : 1000, defaults : {
autoScroll : true
},
width : 400,
split : true,
minSize : 300,
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);
// tree1.render(document.body);
root1.expand(true, true); var form1 = new Ext.form.FormPanel({
title : '左边',
width : 350,
frame : true,
height : 1200,
labelWidth : 2,
region : 'west',
layout : 'form',
items : [{
xtype : 'fieldset',
layout : '',
height : 100,
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]
});
form1.render("form1"); var form2 = new Ext.form.FormPanel({
title : 'Media',
region : 'north',
frame : true,
height : 80,
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 tabs = new Ext.TabPanel({
id : 'tabs',
// Layout:'border',
region : 'center',
activeTab : 0,
collapsed : true,
items : [{
id : 'Campaigins',
title : 'Campaigins',
html : ' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'
+ 'http://www.baidu.com' + '"> </iframe>'
}, {
id : 'Groups',
title : 'Groups',
html : ' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'
+ 'http://www.google.com' + '"> </iframe>'
}, {
id : 'Ads',
title : 'Ads',
html : ' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'
+ 'gridpanel.jsp' + '"> </iframe>'
}, {
id : 'Keywords',
title : 'Keywords',
html : ' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'
+ 'http://www.baidu.com' + '"> </iframe>'
}, {
id : 'Placements',
title : 'Placements',
html : ' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'
+ 'gridpanel.jsp' + '"> </iframe>'
}]
}); var tab = tabs.getItem('Ads') // 获得要显示的选项卡 // 设置选项卡为活动状态
tabs.setActiveTab(tab);
// tabs.getActiveTab().load({url:'printpage.jsp',scripts:true});
// tab.load({url:'http://www.baidu.com',scripts:true}); tabs.addListener("tabchange", function(tabs, nowtab) { tabs.setActiveTab(nowtab); }); var viewport = new Ext.Viewport({
layout : 'border',
items : [
// {region:'west',
// width:400,
// border: true,
// layout: 'border',
// items: [form1,tree1]
//   
// },
form1, {
region : 'center',
layout : 'border',
items : [form2, tabs]
}] });})

Answer 2

我知道原因了,是因为设置了form1.render("form1");,哎,可能是 tabs.render("tabs");,去掉了 而且jsp页面不设置div,就可以出来了,所以render到底是什么含义才是关键.正确的效果是这样:
 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] }
   ]
   });
  
       });

Answer 3

advancedTree01.json文件内容如下::treepanel的数据
[
  {
   "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":"她救活了一个暗器公司！"}
   ]
  }
 ]

Answer 4

其实是你的Div没有生成，你Render跟本就找不到那个DIV，不是ActiveTable的Panel是没有渲染的，那些只是在用的时候才渲染，要了解一个选后顺序才行 这一点很重要

Answer 5

我没有用div阿,最后 也可以,不让它渲染.渲染是提前加载?

Answer 6

render的作用就是将组件及样式渲染到那个div下