Ext问题——panel的aotoload配置中的url链接的内容不显示。。。

问题描述：

小弟写了一个Ext的小例子，，，在一个树的节点上添加了一个点击事件，事件执行的结果是在一个tabPanel中添加一个panel，panel中显示的内容是panel的autoload中传入的url指向的页面内容，但是结果panel创建出来了，内容却没有显示出来。。请问各位大哥们如何解决。。。。

以下是添加panel的函数定义：
//新建标签页。title是新标签页的标题。
addTab:function(id,title,html_url) {
//判断此tab页是否已经存在，存在则只是激活显示。否则才新建一个tab页。
if(Ext.get(id) == null){
this.add({
xtype : "panel",
id: id,
title: title,
iconCls: 'tabs',
closable:true,
autoload : {
url : html_url,
params : {},
scope : this,
scripts : true
}
}).show();
}
else{
this.setActiveTab(id);
}
}

这个方法是在点一个树节点之后调用的。
//给westChild1的节点添加上点击事件---在中间的面板中添加一个tab
westChild1.on("click",function(node,event){
var tp = this.ownerCt.ownerCt.items.items[2];
alert(node.attributes.html_url);
tp.addTab(node.attributes.id+"_tab",node.attributes.text,node.attributes.html_url);
});
测试中alert能打印出url，panel能添加到tabPanel中，但其中没有内容。。

答

我的代码:
(1)点击叶子节点
[code="java"]
// 主面板
var topicTabPanel = Ext.getCmp("topicTabPanel");
// 激活tab的ID: 为叶子节点的ID
var id = node.id;
// 激活的tab
var tab = topicTabPanel.getComponent(id);

//  点击是叶子节点,且tab不存在
if(node.isLeaf() && !tab)
{
    //  显示进度条
    Ext.MessageBox.wait('读取数据中...', '请稍候');
    //  面板添加新tab
    topicTabPanel.add(createPanel(node)).show();
    //  隐藏滚动条
    Ext.MessageBox.hide();
}
//  将该tab设置为活动的
topicTabPanel.setActiveTab(tab);

[/code]

(2)创建面板
[code="java"]
createPanel = function(node)
{
var id = node.id.replace("_package", "_ggPanel");

var panel = new Ext.Panel({
    id:id,
    title: node.text,
    layout:'border',
    closable:true,

// items:[

// // 创建图形
// createGraphPanel(node),
// // 创建表格
// createGridPanel(node)]
// 你要写的URL,就可以写在这里

html:node.text // 你的URL
});

//  重画时,强制布局,消除面板之间的缝隙
panel.on('resize',function(){panel.doLayout()});

return panel;

}
[/code]

答

[url]http://www.extjs.com/deploy/dev/examples/tabs/tabs.html[/url]

[code="js"]
/*!

Ext JS Library 3.0.0
licensing@extjs.com
http://www.extjs.com/license
*/
Ext.onReady(function(){
// basic tabs 1, built from existing content
var tabs = new Ext.TabPanel({
renderTo: 'tabs1',
width:450,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[
{contentEl:'script', title: 'Short Text'},
{contentEl:'markup', title: 'Long Text'}
]
});

// second tabs built from JS
var tabs2 = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Normal Tab',
html: "My content was added during construction."
},{
title: 'Ajax Tab 1',
autoLoad:'ajax1.htm' //参考
},{
title: 'Ajax Tab 2',
autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}//参考
},{
title: 'Event Tab',
listeners: {activate: handleActivate},
html: "I am tab 4's content. I also have an event listener attached."
},{
title: 'Disabled Tab',
disabled:true,
html: "Can't see me cause I'm disabled"
}
]
});

function handleActivate(tab){
alert(tab.title + ' was activated.');
}
});
[/code]

Ext问题——panel的aotoload配置中的url链接的内容不显示。。。

相关推荐