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

发布时间:2019-03-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-[Ext JS 4] 布局之实战二 - 中间区块不会自动伸展 (tab)续脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 中间的tab 区块无法自动伸展的原因一句话说就是: 使用contentEL的方式,相关HTML元素不会参与组件使用的布局方案

但是在实际的开发过程中, 有时后这种方式可能无法避免, 或者说已经开发的代码,如何最简单的修正这个问题。

 

解决方法

利用center 区块的resize 事件可以解决这个问题。

因为在左边收合时,会触发center 区块的resize. 贴代码:

[htML

<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="extjs/ext-all.js"></script>  

<link  

    href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css"  

    rel="stylesheet" type="text/css" />  

<script type="text/javascript">  

    Ext.require([ &#39;*' ]);  

  

Ext.onReady(function() {  

  

    Ext.QuickTips.init();  

  

    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>'  

                                                    }  

                                                }),  

                                {  

                                    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%',  

                                    layout : 'fit',  

                                    contentEl : ';maintabs',  

                                    listeners: {  

                                        reSize: function(thisObj,iWidth, iHeight, oldWidth, oldHeight)  

                                        {        

                                            var tabPanel = Ext.getCmp("tabPanel");  

                                            if (tabPanel!=null)  

                                            {  

                                                tabPanel.doLayout();          

                                            }  

                                        }  

                                    }  

                                } ]  

                    });  

  

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

        id: 'tabPanel',  

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

        deferredRender : false,  

        activeTab : 0, // First tab initially active  

        renderTo : 'maintabs',  

        layout : 'fit',  

        items : [ {  

            contentEl : 'center1',  

            title : 'Close Me',  

            layout : 'fit',  

            closable : true,  

            autoScroll : true  

        }, {  

            contentEl : 'center2',  

            title : 'Center Panel',  

            autoScroll : true  

        } ]  

    });  

});  

</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 和 CSS需导入)

以上生效的代码是:

[html]  

listeners: {  

    resize: function(thisObj,iWidth, iHeight, oldWidth, oldHeight)  

                         {        

        var tabPanel = Ext.getCmp("tabPanel");  

                                if (tabPanel!=null)  

                                {  

                                    tabPanel.doLayout();          

                                }  

                         }  

}  

 

在触发resize 时,对tab panel进行doLayout.

 

延伸

如果tab 中不是简单的html ,而是其他的Ext Component 的话,  有可能会出现tab 的头部展开了,但是子的Component的度没有自动伸展。

这时需调用Component 的setWidth设置一下就可以了。

 

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

脚本宝典总结

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

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

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