Question

我有两个html页面：
的 1。 Complex.htm

<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

    <!-- GC -->

<style type="text/css">

</style>
<script type="text/javascript" src="../ext-all-debug.js"></script>

<script type="text/javascript">
    //Ext.require(['*']);

    Ext.onReady(function() {

        //Ext.QuickTips.init();
        Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    //title: 'Container Panel',
    split: true,
    //bodyStyle: 'padding:15px',
height : '100%',
width : '100%',
layout:'border',
defaults: {
    collapsible: true,
    split: true,
    bodyStyle: 'padding:15px'
},
items: [{
    title: 'Footer',
    region: 'south',
    cmargins: '5 0 0 0'
},{
    title: 'Navigation',
    region:'west',
    margins: '5 0 0 0',
    cmargins: '5 5 0 0',
    width: 175,
    minSize: 100,
    maxSize: 250
},
{
    xtype:'tabpanel',
    title: 'Main Content',
    collapsible: false,
    region:'center',
    //margins: '5 0 0 0',
    items : [
        {
            //xtype:'tabpanel',
            title: 'Tab1',
            collapsible: false,
            //region:'center',
            margins: '5 0 0 0',
            activeTab:0,
            //
            items: [{
                html : 'dsfds'
            }
            ]
            //
        },
        {
            //xtype:'tabpanel',
            title: 'Tab2',
            collapsible: false,
            //region:'center',
            margins: '5 0 0 0',
            activeTab:0,
            items:[{
            html :'Html'
            }]
        },
        { 
            title : 'Tab3',  
            loader: {
                autoLoad: true,
                url: 'http://localhost/MVC/ExtJs/demo/Form.htm',
                renderer: 'html',
                scripts : true,
            }
         }
    ]
}]
});
    });
    </script>
</head>
<body>

</body>
</html>

2。 Form.htm

<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

    <!-- GC -->
<script type="text/javascript">
    alert("sdfdsf");
</script>
<style type="text/css">

</style>
<script type="text/javascript" src="../ext-all-debug.js"></script>

<script type="text/javascript">
    //Ext.require(['*']);
    alert("alert");
    Ext.onReady(function() {

        //Ext.QuickTips.init();


        Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    //title: 'Container Panel',
    split: true,
    //bodyStyle: 'padding:15px',
height : '100%',
width : '100%',
layout:'border',
defaults: {
    collapsible: true,
    split: true,
    bodyStyle: 'padding:15px'
},
items: [
{
    //xtype:'tabpanel',
    title: 'Main Content',
    collapsible: false,
    region:'center',
            items: [{
   xtype: 'textfield',
   fieldLabel: 'Director in form',
   name: 'director',
   anchor: '100%',
   vtype: 'name'
},{
   xtype: 'datefield',
   fieldLabel: 'Released',
   name: 'released',
   disabledDays: [1,2,3,4,5]
},{
   xtype: 'radio',
   fieldLabel: 'Filmed In',
   name: 'filmed_in',
   boxLabel: 'Color'
} // more fields go here //
]

}]
});


        /*global Ext:false */
    });
    </script>
</head>
<body>
    Form Content

</body>
</html>

如您所见，我正在尝试在Complex.htm的选项卡中加载Form.htm。 form.htm的内容即“表单内容”已成功加载，但未加载Form.htm中的ExtJs组件。甚至不执行警报。我google了很多，但找不到任何有用的东西。

感谢任何帮助。

Answer 1

如果必须单独显示两个页面，请将Form.htm包裹在IFrame中以将其与Complex.htm分开：

{
    xtype: "uxiframe",
    id: "idiframe",
    src: "http://localhost/MVC/ExtJs/demo/Form.htm"
}

即使我使用脚本自动加载页面，也不会执行JavaScript代码：true

1 个答案: