javascript代码实例教程-[Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab)

发布时间:2019-03-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-[Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 问题描述

看到一个Ext 布局的实例问题,当点击左边的收合时,中间的区块并不会自动的填充余下的页面,导致右边留下一段空白。点击一下tab 就正常了。

分析了一下,使用的是Ext 的border 进行布局,有north、 west和center 三个区块。north 和west 都很简单,导致问题的应该是center 区块。

这个center 区块的写法时: 使用contentEl 指定一个p, 然后创建一个 Ext tab 的component 来renderTo 到这个p, 简化的代码如下:

[javascript]  

<!--Add by oscar999-->  

<!DOCTYPE HTML PubLIC "-//W3C//DTD HTML 4.0 TransITional//EN">  

<HTML>  

<HEAD>  

<TITLE> New Document </TITLE>  

<;mETA NamE="Author" CONTENT="oscar999">  

<script>  

Ext.onReady(function() {  

  VAR viewport = Ext.create(&#39;Ext.Viewport', {  

        layout: {  

            type: 'border',  

            padding: 0            

        },  

        defaults: {  

            split: true  

        },  

        items: [  

        {  

            region: 'north',  

            contentEl: 'headerp'            

        },{           

            region: 'west',  

            contentEl: 'westp'               

        },{  

            region: 'center',  

            contentEl: 'centerp'    

        }  

        ]  

    });  

  

    Ext.create('Ext.tab.Panel', {  

            activeTab: 0,     // First tab initially active  

            renderTo: 'maintabs',  

            items: [{  

                html 'center1',  

                title: 'Close Me',  

                closable: true,  

                autoScroll: true  

            }, {  

                html: 'center2',  

                title: 'Center Panel',  

                autoScroll: true  

            }]  

    });  

  

});  

</script>  

</HEAD>  

  

<BODY>  

<p id="headerp"></p>  

<p id="westp"></p>  

<p id="centerp"></p>  

</BODY>  

</HTML>  

 

问题分析与解决

问题就出在center的处理上,

参考这篇

[Ext JS 4] contentEL,renderTo, applyTo 释义与区别

有这句 “ 使用contentEl这个HTML元素不会参与组件使用的布局方案”, 所以通过contentEl 添加的center 区块,在layout 时就会出现问题。

解决方式如下就可以了:

[javascript] 

 var viewport = Ext.create('Ext.Viewport', {  

       layout: {  

           type: 'border',  

           padding: 0             

       },  

       defaults: {  

           split: true  

       },  

       items: [  

       {  

           region: 'north',  

           contentEl: 'headerp'             

       },{            

           region: 'west',  

        contentEl: 'westp'               

       },Ext.create('Ext.tab.Panel', {  

           activeTab: 0,     // first tab initially active  

           region: 'center',  

           items: [{  

               html 'center1',  

               title: 'Close Me',  

               closable: true,  

               autoScroll: true  

           }, {  

               html: 'center2',  

               title: 'Center Panel',  

               autoScroll: true  

           }]  

         })  

    ]  

});  

 

 

延生考虑

Ext JS的SDK包的 examples/layout目录下有一个complex.html的例子就是用来演示布局的,是否按照以上错误的写法,也会出现这个问题。

试了一下,果不其然, 以下贴出错误改动的代码。

[javascript]  

<html>  

<head>  

<title>Complex Layout</title>  

  

    <!-- GC -->  

  

<style type="text/css">  

p {  

    margin:5px;  

}  

.settings {  

    background-image:url(../shared/icons/fam/folder_wrench.png);  

}  

.nav {  

    background-image:url(../shared/icons/fam/folder_go.png);  

}  

.info {  

    background-image:url(../shared/icons/fam/information.png);  

}  

</style>  

<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>  

<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>  

<script type="text/javascript">  

    Ext.require(['*']);  

  

    Ext.onReady(function() {  

  

        Ext.QuickTips.init();  

  

        // NOTE: This is an example showing simple state management. During development,  

        // it is generally best to disable state management as dynamically-generated ids  

        // can change across page loads, leading to unPRedictable results.  The developer  

        // should ensure that stable state ids are set for stateful components in real apps.  

        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));  

  

        var viewport = Ext.create('Ext.Viewport', {  

            id: 'border-example',  

            layout: 'border',  

            items: [  

            // create instance immediately  

            Ext.create('Ext.COMponent', {  

                region: 'north',  

                height: 32, // give north and south regions a height  

                autoEl: {  

                    tag: 'p',  

                    html:'<p>north - generally for menus, toolbars and/or advertiSEMents</p>'  

                }  

            }),   

            /*{ 

                // lazily created panel (xtype:'panel' is default) 

                region: 'south', 

                contentEl: 'south', 

                split: true, 

                height: 100, 

                minSize: 100, 

                maxSize: 200, 

                collapsible: true, 

                collapsed: true, 

                title: 'South', 

                margins: '0 0 0 0' 

            },*/  

            /*{ 

                xtype: 'tabpanel', 

                region: 'east', 

                title: 'East Side', 

                dockedItems: [{ 

                    dock: 'top', 

                    xtype: 'toolbar', 

                    items: [ '->', { 

                       xtype: 'button', 

                       text: 'test', 

                       tooltip: 'Test Button' 

                    }] 

                }], 

                animCollapse: true, 

                collapsible: true, 

                split: true, 

                width: 225, // give east and west regions a width 

                minSize: 175, 

                maxSize: 400, 

                margins: '0 5 0 0', 

                activeTab: 1, 

                tabPosition: 'bottom', 

                items: [{ 

                    html: '<p>A TabPanel component can be a region.</p>', 

                    title: 'A Tab', 

                    autoScroll: true 

                }, Ext.create('Ext.grid.PropertyGrid', { 

                        title: 'Property Grid', 

                        closable: true, 

                        source: { 

                            "(name)": "Properties Grid", 

                            "grouping": false, 

                            "autoFitColumns": true, 

                            "productionQuality": false, 

                            "created": Ext.Date.parse('10/15/2006', 'm/d/Y'), 

                            "tested": false, 

                            "version": 0.01, 

                            "borderWidth": 1 

                        } 

                    })] 

            } ,*/  

            {  

                region: 'west',  

                stateId: 'navigation-panel',  

                id: 'west-panel', // see Ext.getCmp() below  

                title: 'West',  

                split: true,  

                width: 200,  

                minWidth: 175,  

                maxWidth: 400,  

                collapsible: true,  

                animCollapse: true,  

                margins: '0 0 0 5',  

                layout: 'accordion',  

                items: [{  

                    contentEl: 'west',  

                    title: 'Navigation',  

                    iconCls: 'nav' // see the HEAD section for style used  

                }, {  

                    title: 'Settings',  

                    html: '<p>Some settings in here.</p>',  

                    iconCls: 'settings'  

                }, {  

                    title: 'Information',  

                    html: '<p>Some info in here.</p>',  

                    iconCls: 'info'  

                }]  

            },  

            {  

                region: 'center',  

                width: '100%',  

                height: '100%',           

                contentEl: 'maintabs'  

            }  

            // in this instance the TabPanel is not wrapped by another panel  

            // since no title is needed, this Panel is added directly  

            // as a Container  

           /* Ext.create('Ext.tab.Panel', { 

                region: 'center', // a center region is ALWAYS required for border layout 

                deferredRender: false, 

                activeTab: 0,     // first tab initially active 

                items: [{ 

                    contentEl: 'center1', 

                    title: 'Close Me', 

                    closable: true, 

                    autoScroll: true 

                }, { 

                    contentEl: 'center2', 

                    title: 'Center Panel', 

                    autoScroll: true 

                }] 

            })*/  

            ]  

        });  

          

        Ext.create('Ext.tab.Panel', {  

            region: 'center', // a center region is ALWAYS required for border layout  

            deferredRender: false,  

            activeTab: 0,     // first tab initially active  

            renderTo: 'maintabs',  

            items: [{  

                contentEl: 'center1',  

                title: 'Close Me',  

                closable: true,  

                autoScroll: true  

            }, {  

                contentEl: 'center2',  

                title: 'Center Panel',  

                autoScroll: true  

            }]  

        });  

        // get a reference to the HTML element with id "hideit" and add a click listener to it  

        Ext.get("hideit").on('click', function(){  

            // get a reference to the Panel that was created with id = 'west-panel'  

            /*var w = Ext.getCmp('west-panel'); 

            // expand or collapse that Panel based on its collapsed property state 

            w.collapsed ? w.expand() : w.collapse();*/  

            alert("11");  

        });  

    });  

    </script>  

</head>  

<body>  

    <!-- use class="x-hide-display" to prevent a brief flicker of the content -->  

    <p id="west" class="x-hide-display">  

        <p>Hi. I'm the west panel.</p>  

    </p>  

    <p id="maintabs" class="x-hide-display">  

    </p>  

      

    <p id="center2" class="x-hide-display">  

        <a id="hideit" href="#">Toggle the west region</a>  

        <p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>  

        <p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>  

        <hr>  

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>  

        <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>  

        <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>  

        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>  

        <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. PROIn quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>  

        <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>  

        <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>  

        <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>  

    </p>  

    <p id="center1" class="x-hide-display">  

        <p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>  

        <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>  

        <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>  

        <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>  

        <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>  

    </p>  

    <p id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">  

    </p>  

    <p id="south" class="x-hide-display">  

        <p>south - generally for informational stuff, also could be for status bar</p>  

    </p>  

</body>  

</html>  

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-[Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab)全部内容,希望文章能够帮你解决javascript代码实例教程-[Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。