Ext3.0 之弹出框Window -------------包括小图标iconCls

最新推荐文章于 2017-02-13 13:45:37 发布

nannan408

最新推荐文章于 2017-02-13 13:45:37 发布

阅读量344

点赞数

分类专栏： EXT

EXT 专栏收录该内容

6 篇文章

订阅专栏

本文将详细讲解如何在Ext JS中为按钮添加自定义样式，并结合TabPanel和Window组件实现窗口内的动态布局管理。通过实例演示，展示了如何创建具有不同功能的标签页和一个可调整大小的窗口，同时提供了代码片段和样式配置说明，旨在帮助开发者高效地构建交互式Web应用。

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

1.前言。
如题。
2.代码。
注意，图标是需要自己加样式的，否则显示不出来。


 var button=Ext.get('btnShh');

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

        // tabs for the center
        var tabs = new Ext.TabPanel({

            region: 'center',
            margins:'3 3 3 0', 
            activeTab: 0,
            defaults:{autoScroll:true},

            items:[{
                title: 'Bogus Tab',
                html: 'fewfw'
            },{
                title: 'Another Tab',
                html: 'fewfw'
            },{
                title: 'Closable Tab',
                html: 'fewfw',
                closable:true
            }]
        });

        // Panel for the west
        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'
        });

        var win = new Ext.Window({
            title: '弹出框',
            iconCls: "add",
            closable:true,
            modal:true,
            width:600,
            height:350,
            //border:false,
            plain:true,
            layout: 'border',



            items: [nav, tabs]
        });

        win.show(this);
    });

注意把小图标的样式加上，路径要对。



.add { 
        background: url(Images/icons/add.png) left top no-repeat; 
}