ExtJs之Panel篇

最新推荐文章于 2023-06-17 22:40:09 发布

powerfulant

最新推荐文章于 2023-06-17 22:40:09 发布

阅读量155

点赞数

分类专栏： ExtJS 文章标签： EXT JavaScript CSS HTML ViewUI

本文链接：https://blog.csdn.net/angryant2008/article/details/83916136

版权

ExtJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Ext.onReady(
        function() {
            new Ext.Panel({
                id:"myPanel",//标识
                renderTo:"divPanel",//在哪个元素中渲染
                title:"我的面板",
                width:400,
                height:300,
                frame: false,//如果为true 则panel具有全部阴影，否则只有1px边框
                //html:"<h1>这是在Panel中的内容...</h1>",
                contentEl:'divPanelContent',//此属性可以简写成“el”，显示哪个元素中的内容
                collapsible:true,
                autoScroll:true,//显示滚动条，默认为false
                titleCollapse:true,//是否点击整个标题栏都可以收缩
                tools:[
                    {id:"Save",handler:function() {
                        Ext.Msg.alert("系统提示", "保存成功!");
                    }},
                    {id:"Help"},
                    {id:"Close",handler:function() {
                        Ext.get("divPanel").hide();
                    }}
                ],
                tbar:[
                    {xtype:"tbfill"},

//                    new Ext.Toolbar.Button({text:"工具栏"}),

                    {pressed:true,text:'添加'},

                    {xtype:"tbseparator"},

                    {pressed:true,text:'保存'}
                ],

                bbar:[
                    {xtype:"tbfill"},
                    {text:"这是状态栏"},
                    {xtype:"tbseparator"},
                    {text:"状态栏2",pressed:true,handler:function() {
                        Ext.Msg.alert("aaaaaaaaaaa", "aaaaaaaaaa");
                    }
                    }
                ],

                buttons:[
                    {text:"该按钮位于底部！"}
                ],
                x:100,
                y:100,
                //配置可拖动的
                draggable: {
                    insertProxy: false,
                    onDrag : function(e) {
                        var pel = this.proxy.getEl();
                        this.x = pel.getLeft(true);
                        this.y = pel.getTop(true);
                        var s = this.panel.getEl().shadow;
                        if (s) {
                            s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
                        }
                    },
                    endDrag : function(e) {
                        this.panel.setPosition(this.x, this.y);
                    }}
            });

        }
        )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../Ext/bootstrap.js"></script>
    <script type="text/javascript" src="../Ext/locale/ext-lang-zh_CN.js" charset="utf-8"></script>
    <script type="text/javascript" src="Panel.js"></script>

</head>
<body>
<div id="divPanel"></div>
<div id="divPanelContent"> ExtJs学习，欢迎大家多多交流，共同进步</div>
</body>
</html>

上面基本的配置熟悉都有注释就不再说了，关键一下contentEl、renderTo、draggable。

contentEl：就是panel中要显示的内容，不过它的值是一个html元素的id，例如上面我们就指明为"divPanelContent"，这样panel中就会显示这个层中的内容。当然如果只是简单的内容的话，我们可以直接使用html这个属性来指明panel内部的内容。

renderTo指的是渲染到哪个元素上，因为对于Ext来说所有的我们看到的控件都是通过基本的html来模拟的，而panel要想显示就必须通过层来模拟，所以从上面你也能够看到我们指定panel渲染到"divPanel"这个Html原色上。当然对于renderTo这个属性如果我们不配置的话也是可以的，这样的话我们可以在定义好panel之后，通过panel.render("divPanel");来渲染，其实是一样的。

扩展：到这里其实稍微知道Ext的朋友都知道，除了renderTo 、render在Ext中类似的还有applyTo、applyToMarkup。