panel组件学习(1)常见属性学习

  1) 、panel组件常用属性
因为panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件,所以非常有必要介绍Panel组件的配置参数和相关的属性、方法。
    //配置参数(只列举部分常用参数)
    1.autoLoad:有效的url字符串,把那个url中的body中的数据加载显示,但是可能没有样式和js控制,只是html数据
    2.autoScroll:设为true则内容溢出的时候产生滚动条,默认为false
    3.autoShow:设为true显示设为"x-hidden"的元素,很有必要,默认为false
    4.bbar:底部条,显示在主体内,//代码:bbar:[{text:'底部工具栏bottomToolbar'}],
    5.tbar:顶部条,显示在主体内,//代码:tbar:[{text:'顶部工具栏topToolbar'}],
    6.buttons:按钮集合,自动添加到footer中(footer参数,显示在主体外)//代码:buttons:[{text:"按钮位于footer"}]
    7.buttonAlign:footer中按钮的位置,枚举值为:"left","right","center",默认为right
    8.collapsible:设为true,显示右上角的收缩按钮,默认为false
    9.draggable:true则可拖动,但需要你提供操作过程,默认为false
    10.html:主体的内容
    11.id:id值,通过id可以找到这个组件,建议一般加上这个id值
    12.width:宽度
    13.height:高度 13.title:标题
    14.titleCollapse:设为true,则点击标题栏的任何地方都能收缩,默认为false.
    15.applyTo:(id)呈现在哪个html元素里面
    16.contentEl:(id)呈现哪个html元素里面,把el内的内容呈现
    17.renderTo:(id)呈现在哪个html元素里面 //关于这三个参数的区别(个人认为:applyTo和RenderTo强调to到html元素中,contentEl则是html元素到ext组件中去):
2)、带顶部,底部,脚部工具栏的panel
Ext.onReady(function(){
    var p=new Ext.Panel({
            id:"panel1", title:"标题",
            collapsible:true,
            renderTo:"container",
            closable:true,
            width:300,
            height:200,
            tbar:[{text:"按钮1"},{text:"按钮2"}], //顶部工具栏
            bbar:[{text:"按钮1"},{text:"按钮2"}], //底部工具栏
            html:"内容",
            buttons:[{//footer部工具栏
                    text:"按钮1",
                    handler:function(){
                        Ext.MessageBox.alert("我是按钮1","我是通过按钮1激发出来的弹出框!")
                    }
                },{
                    text:"按钮2"
                }
            ],
            tools:[{id:"save"},
                    {id:"help"},
                    {id:"up"},
                    {id:"close",handler:function(){
                        Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}
                    }
            ]
    });

})
tools工具栏中的id枚举值为:
toggle (collapsable为true时的默认值)
close  关闭
minimize
maximize
restore  恢复
gear
pin   置顶
unpin  去除置顶
right
left
up
down
refresh
minus
plus
help
search
save
print

你可能感兴趣的:(ext,tools,bbar,buttons,panel常见属性)