ExtJs学习笔记(9)_Window窗口的Border布局

最新推荐文章于 2021-08-03 21:06:15 发布

菩提树下的杨过

最新推荐文章于 2021-08-03 21:06:15 发布

阅读量832

点赞数

分类专栏： Javascript/CSS/Web Standard 文章标签： border extjs stylesheet button function html

本文链接：https://blog.youkuaiyun.com/yjmyzz/article/details/2875963

版权

Javascript/CSS/Web Standard 专栏收录该内容

35 篇文章

订阅专栏

本文展示了一个使用ExtJS框架创建布局窗口的例子。该示例包括一个带有TabPanel的窗口，其中包含多个标签页，以及一个导航面板。窗口支持显示隐藏操作，并且TabPanel能够动态加载内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下源自ExtJs的官方示例,稍加注释而已

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
     < title > Window LayOut </ 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-debug.js" ></ script >
     < style type ="text/css" >
    .x-panel-body p {
        margin : 10px ;
        font-size : 12px ;
     }
     </ style >
</ head >
< body >
< script type ="text/javascript" >
    Ext.onReady( function () {

         var button = Ext.get( ' show-btn ' );
         var win;

        button.on( ' click ' , function () {

             // 创建TabPanel
             var tabs = new Ext.TabPanel({
                region: ' center ' , // border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
                margins: ' 3 3 3 0 ' ,
                activeTab: 0 ,
                defaults: {
                    autoScroll: true
                },
                items: [{
                    title: ' Bogus Tab ' ,
                    html: " 第一个Tab的内容. "
                }, {
                    title: ' Another Tab ' ,
                    html: " 我是另一个Tab "
                }, {
                    title: ' Closable Tab ' ,
                    html: " 这是一个可以关闭的Tab " ,
                    closable: true
}]
                });

                 // 定义一个Panel
                 var nav = new Ext.Panel({
                    title: ' Navigation ' ,
                    region: ' west ' , // 放在西边，即左侧
                    split: true ,
                    width: 200 ,
                    collapsible: true , // 允许伸缩
                    margins: ' 3 0 3 3 ' ,
                    cmargins: ' 3 3 3 3 '
                });

                 // 如果窗口第一次被打开时才创建
                 if ( ! win) {
                    win = new Ext.Window({
                        title: ' Layout Window ' ,
                        closable: true ,
                        width: 600 ,
                        height: 350 ,
                        border : false ,
                        plain: true ,
                        layout: ' border ' ,
                        closeAction: ' hide ' ,
                        items: [nav, tabs] // 把上面创建的panel和TabPanel放在window中，并采用border方式布局
                    });
                }
                win.show(button);
            });
        });
</ script >

< input type ="button" id ="show-btn" value ="Show Window" />

</ body >
</ html >

效果图：