（Ext4.0.7） viewport 控件中让north导入html中的内容

最新推荐文章于 2019-02-24 16:00:28 发布

trassion

最新推荐文章于 2019-02-24 16:00:28 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Extjs 文章标签： html ext extjs stylesheet border div

本文链接：https://blog.youkuaiyun.com/Trassion/article/details/8024225

Extjs 专栏收录该内容

50 篇文章

订阅专栏

本文详细介绍了如何在EXTJS框架中使用North.js文件与HTML集成，通过配置Panel组件和Viewport来实现布局和交互，提供了实例代码和相关HTML结构说明。

TestNorth.js 文件

//-------------------------------------头部-----north设置-----------

var north=new Ext.Panel({
        border:false,
        region:"north",
        height:80,
        items:new Ext.Component({
            contentEl:'top',    //用html 中'top'控件代替该框架，（本例子中，html文件中 div 是‘top’ 的将填补该框架）
            height:80
        })

});

Ext.onReady(function () {

    //定义树形组件
    //Ext.Msg.alert('提示信息', '学习EXTJS');

    var vp=new Ext.Viewport({
        layout:"border",
        items:[north, center]
    });
});

testNorth.html 文件

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VV_ERP系统测试</title>
    <link rel="stylesheet" type="text/css" href="CSS/css.css" />
    <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs4/ext-all.js"></script>
   <script type="text/javascript" src="extjs4/locale/ext-lang-zh_CN.js"></script>
   <script type="text/javascript" src="../js/default.js"></script>
</head>

<body>
        <div id="top" class="fiterall">
            <div id="bg" style=" vertical-align:middle;width:700px;height:70px;">
                <img src="images/topbg.png"></img>
                <font size=4>OA系统</font>
                <font size=10 >欢迎大家</font>
            </div>
        </div>
</body>
</html>