02_Ext_Panel

　　

1,面板由以下几个部分组成，

　　一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。
　　面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。
　　面板的类名为Ext.Panel，其xtype为panel

 

2，知识点：

　　render()方法 ,后面的参数可以是 一个字符串代表Id，或dom节点，或Ext.get()返回的Element

　　handler()方法，当按钮点击时，会触发handler方法

     面板主区域body，可以放 html 字符串，也可以放 items指定的组件

     我们可以在面板中动态添加、更改、删除组件或者里面的html. (参考下面的例子)

 

3， 示例

 

Ext.onReady(function(){
    //Panel 面板 是可视化的容器组件
    var panel=new Ext.Panel({
        width:500,
        height:400,
        collapsible:true, //可展开和收缩
        tools:[{id:"save"},
               {id:"print",handler:function(){
                   window.print();
               }}],    
        //面板头部 header
        title:'我的面板',
        //顶部工具栏 toptoolbar
        tbar:[{text:"保存"},"-",{text:"关闭"}], //使用 - 表示分割符
        //底部工具栏 bottomtoolbar
        bbar:[{text:"添加内容",
            //当按钮点击时，会触发handler方法
            handler:function(){
                panel.add({title:'面板3'});
                panel.doLayout(); //调用重新布局，才会显示出来面板
                
                // 删除panel里面的东西
                // remove的参数为 组件Id或者组件本身
                var p2=panel.getComponent(1);// 获取Item中的组件
                
                panel.remove(p2);
                
            }},{text:"更新内容",
                handler:function(){
                    panel.load("new.html");
                    panel.body.update("<h1>新内容</h1>"+new Date());
            }},
            ],
        //尾部区域 bottom
        buttons:[{text:"确定"},{text:"取消"}],
        //底部按钮的对齐方式
        buttonAlign:"center",
        //面板的主区域 body
        //html:"<h1>面板的body区域</h1>"
        //加载其它页面的内容
        //autoLoad:"aaa.html"
        //放其它的组件  xtype说明是什么组件,在面板中如果不指定，它的xtype就是panel
        items:[{xtype:"button",text:"按钮"},
               {title:"面板2",height:200,border:false}],
        
               
        
    });
    
    //render()方法 ,后面的参数可以是 一个字符串代表Id，或dom节点，或Ext.get()返回的Element
//    panel.render(document.body);
//    panel.render("p");
    panel.render(Ext.get("p"));
    
});