首页新闻找找看学习计划

extjs4 tabpanel动态加载html里面exths写的panel,但是panel就出不来, 切换一下别的panel再切换就自动显

0
悬赏园豆:50 [待解决问题]

这个是动态添加html的代码htmlmix.html

 

var  iCom = Ext.create('Ext.panel.Panel', {

            title: 'mix',

            closable: true,

            sidebarChange: true,

            loader: {

                autoLoad: true,

                url: 'mix.html',

                scripts: true

            }

        });

    tabpanel.add(iCom);

    tabpanel.setActiveTab(iCom);

 

这个是mix.html: 

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

            Ext.Msg.alert('Status', 'Changes saved successfully.'); 

 

            var filterPanel = Ext.create('Ext.panel.Panel', {

                bodyPadding: 5,  // Don't want content to crunch against the borders

                width: 300,

                title: 'Filters',

                items: [{

                    xtype: 'datefield',

                    fieldLabel: 'Start date'

                }, {

                    xtype: 'datefield',

                    fieldLabel: 'End date'

                }],

                renderTo: 'demo1'

            });

       

    </script>

 

</head>

<body> 

    <div id="demo1"></div>

</body>

</html>

 

其中的    Ext.Msg.alert('Status', 'Changes saved successfully.');  这句可以显示出来 ,但是panel就出不来,  切换一下别的panel或者 ,浏览器的大小改变一下再或者点一下F12调试按钮,  它就会显示,  这是为啥啊?   跪求大神啊!

 

点击F12或者点击首页panel再切换回来之后就自动显示了

 

 

 

sylla1999的主页 sylla1999 | 初学一级 | 园豆:152
提问于:2013-11-18 11:42
< >
分享
所有回答(2)
0

加个 activeTab: 0,

设置下默认在那个页面下应该就加载了。

````` | 园豆:14268 (专家六级) | 2013-11-18 13:17

不行啊  我的tabpanel里面本来就有这个  大神可以自己修个代码试试运行一下 谢大神了

支持(0) 反对(0) sylla1999 | 园豆:152 (初学一级) | 2013-11-19 08:00

@sylla1999: 楼主把代码通过园子上传下我调试看下。应该是个很简单的问题的。

支持(0) 反对(0) ````` | 园豆:14268 (专家六级) | 2013-11-19 09:07

@imfunny: 我不会上传啊  我精简了一下   就2个html

第一个

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ExtJS培训</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">


<link href='../extjs4/resources/css/ext-all.css' rel='stylesheet' />
<script src='../extjs4/ext-all.js'></script>
<script src='../extjs4/locale/ext-lang-zh_CN.js'></script>

<script type="text/javascript">


Ext.define('YAYADU.ext.ui.MainFrame', {
extend: 'Ext.container.Viewport',
constructor: function (_cfg) {
Ext.apply(this, (_cfg || {}));

Ext.apply(this, {
layout: 'border',
items: [{
region: 'north',
border: false,
html: '<div>ExtJS</div>',
height: 83,
bbar: ['->', 'user', "<font style='font-size:13px;'>欢迎您:" + "sss" + "</font>", '-', {
text: '安全退出',
iconCls: 'exit'
}, '-', {
iconCls: 'close'
}]
}, {
region: 'west',
title: '控制面板',
iconCls: 'monitor',
collapsible: true,
width: 200,
layout: 'accordion',
items: [{
title: '领导班子',
layout: 'anchor',
items: [{
xtype: 'treepanel',
border: false,
store: Ext.create('Ext.data.TreeStore', {
root: {
text: '领导班子',
expanded: true,
children: [{
text: '新增人员',
id: 'UserInfo',
iconCls: 'adduser',
leaf: true
}]
}
}),
listeners: {
'itemclick': function (iArgView, mdl) {
var tab = Ext.getCmp('idMainTab');
var iCom = tab.getComponent(mdl.get('id'));

iCom = Ext.create('Ext.panel.Panel', {
title: 'mix',
closable: true,
loader: {
autoLoad: true,
url: 'mix.html',
scripts: true
}
});

tab.add(iCom);
tab.setActiveTab(iCom);
}
}
}]
}]
}, {
region: 'center',
layout: 'anchor',
border: false,
items: [{
xtype: 'tabpanel',
id: 'idMainTab',
border: false,
activeTab: 0,
items: [{
title: '首页',
border: false,
iconCls: 'detalguestbook'
}]
}]
}]
});
this.callParent(arguments);
}
});

Ext.onReady(function () {
Ext.create('YAYADU.ext.ui.MainFrame');
});

 

</script>

</head>

<body>
</body>
</html>

 

第二个是:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/javascript">
Ext.Msg.alert('Status', 'Changes saved successfully.');

var filterPanel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5, // Don't want content to crunch against the borders
width: 300,
title: 'Filters',
items: [{
xtype: 'datefield',
fieldLabel: 'Start date'
}, {
xtype: 'datefield',
fieldLabel: 'End date'
}],
renderTo: 'demo1'
});

</script>

</head>
<body>
<div id="demo1"></div>
</body>
</html>

支持(0) 反对(0) sylla1999 | 园豆:152 (初学一级) | 2013-11-19 14:57

@sylla1999: filterPanel   执行了?

一般的时候都

Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
bodyPadding: 5, // Don't want content to crunch against the borders
width: 300,
title: 'Filters',
items: [{
xtype: 'datefield',
fieldLabel: 'Start date'
}, {
xtype: 'datefield',
fieldLabel: 'End date'
}],
renderTo: 'demo1'
});
});

 

支持(1) 反对(0) ````` | 园豆:14268 (专家六级) | 2013-11-19 15:11

@imfunny:没用的啊  我跟那个开始是有那个Ext.onReady函数的  后来发现  不写也可以执行  就不写了  我按照你的写了些 也没用啊  还是不出来 还是必须切换下 或者 按F12才可以显示 很是郁闷啊

支持(0) 反对(0) sylla1999 | 园豆:152 (初学一级) | 2013-11-19 16:29

@imfunny: 以前在extjs3里面 基本就是这样写的没啥问题  但这个弄的我很是不解 大神 看你的了 

支持(0) 反对(0) sylla1999 | 园豆:152 (初学一级) | 2013-11-19 16:33

@imfunny: 用iframe 确实可以实现这个效果 但是每次加载extjs库文件很烦的   不过虽然缓存里已经有了这个文件了 但是还是怕有影响

支持(0) 反对(0) sylla1999 | 园豆:152 (初学一级) | 2013-11-19 16:36

@sylla1999: 知道问题了,

{
xtype: 'tabpanel',
id: 'idMainTab',
border: false,
activeTab: 0,
items: [{
title: '首页',
border: false,
iconCls: 'detalguestbook'
}]
}]
}]
});

这个本来就没东西啊。

items:[{html:'iframe'}]

这样写的话肯定加载。

加载一个空的 这个地方首先没写入东西 开始总是没东西的。

支持(0) 反对(0) ````` | 园豆:14268 (专家六级) | 2013-11-19 16:38

@imfunny: 大哥  这个我不太清楚什么意思啊  你能不能把关键要修改的代码修改一下  放上来 我再试试  

支持(0) 反对(0) sylla1999 | 园豆:152 (初学一级) | 2013-11-19 16:47

@sylla1999: 大哥能上传个整个项目 这样复制代码配置环境 真的要一会功夫啊。

支持(0) 反对(0) ````` | 园豆:14268 (专家六级) | 2013-11-19 16:48

@imfunny: 很简单的 我加你qq吧   呵呵  这样方便讨论  我的576029680

支持(0) 反对(0) sylla1999 | 园豆:152 (初学一级) | 2013-11-19 16:49
0

设置断点,一步步的跟踪degger一下!!!清掉浏览器的缓存……

Angkor--:-- | 园豆:1082 (小虾三级) | 2013-11-18 13:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册