extjs中tabpanel里使用autoLoad方法

0 0

extjs中tabpanel里使用autoLoad方法5

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>

<script>
Ext.onReady(function()
{
new Ext.Viewport({
layout:'border',
enableTabScroll:true,
items:[{title:"admin",
region:"north"
},
{title:"菜单",
region:"west",
width:200,
collapsible:true,
layout:"accordion",
items:[
{title:"系统询",html:"一"},
{title:"查询",html:"二个"},
{title:"热量",html:"第2个"},
{title:"历史",html:"第3个"}]
},
{xtype:"tabpanel",
region:"center",
items:[{title:"欢迎"},
{title:"信息查询",
autoLoad{url:'chaxun.html',
         scripts:true,
         scope:this
         }},
{title:"综合查询"}
      ]
}
   ]
});
});
</script>
</head>
<body>
</body>
</html>

chaxun.html代码：
Ext.onReady(function()
{
var data=[['1','Easy','sd','www.qw.com'],
['2','qwe','we','www.we.com'],
['3','jdon','jdon','www.we.com'],
['4','fa','trew','www.df.com']];
var store=new Ext.data.SimpleStore({data:data,
fields:["id","name","organization","homepage"]});
var grid=new Ext.grid.GridPanel({
renderTo:Ext.getBody(),
title:"隧道",
height:150,
width:500,
columns:[{header:"项目",
dataIndex:"name"},
{header:"团队",
                        dataIndex:"organization"},
{header:"网址",
dataIndex:"homepage"}],
store:store,
autoExpandColumn:2});
});
不知道为什么运行后查询信息里一直是加载状态，而不是显示出表格

问题补充：不行啊。。。

ExtJS

2012年7月31日 10:53

bea555
7
0 0 4

1个答案按时间排序按投票排序

0 0

tabPanel上面添加的各个panel（就是各个子页面）rendTo的DIV的id不能相同-----所有，建议各个子页面的id都不要重复

主页面例子如下：

Ext.onReady(function(){
var center=new Ext.TabPanel({
   defaults:{autoScroll:true},
   enableTabScroll:true,
   collapsible:true,
   autoHeight:true,
   renderTo:'indexdiv',
   items:[{
    id:'01',
    title:'Event任务分配',
    autoHeight:true,                      // 自动加载jsp页面
    autoLoad:{url:ctx+'/toEventTaskPage.action?optType=E',scripts:true},


   listeners:{                   // 添加监听器，点击此页面的tab时候要重新加载（刷新功能）
     activate:function(){
      this.getUpdater().refresh();
     }
     }
    },{
    id:'02',
    title:'拆条任务分配',
    autoHeight:true,
    autoLoad:{url:ctx+'/toSplitEventTaskPage.action?optType=S',scripts:true},
    listeners:{
     activate:function(){
      this.getUpdater().refresh();
     }
      }
    },{
    id:'03',
    title:'其他任务分配',
    autoHeight:true,
    autoLoad:{url:ctx+'/toOtherTaskPage.action?optType=O',scripts:true},
    listeners:{
     activate:function(){
      this.getUpdater().refresh();
     }
     }
    }]
});
center.setActiveTab(0); 
});

2012年7月31日 12:37