面板的五个部分

  //这段代码在VS中执行结果与firebug下有差别，不同之处就是底端工具栏的显示.还有就是标题栏的工具按钮显示有问题
        //Ext.get(document.body).update('<div />');
        var firstPanel = Ext.create('Ext.panel.Panel', {
            collapsible:true,
            renderTo: Ext.getBody(),
            layout: 'accordion',//采用折叠布局，适合大量分组内容，多个子面板放在面板中，一次只有个子面板处于打开状态。，
                             //然后可以点击按钮展开各个子面板和收缩子面板。
            defaults: { bodyPadding:11},
            frame: true,
            title: '面板头部',//第一部分：又叫面板标题栏
            height: 300,
            bodyPadding: 5,//不定义bodyPadding可能会导致面板体上的文本被面板部分遮挡，所以需要定义面板体的填充，只需要上下偏离5个像素，就可确保文本不会被面板标题栏和面板左边元素遮挡。
            html: '<b>面板体<b>',//第二部分：设置面板体的内容为html片段，当然除了添加html标签也可以添加文本。
            width: 450,//默认panel的宽度是浏览器的宽度，即宽度充满整个页面。
            bodyStyle: 'background-color:#ffffff',//设置面板体背景为白色
            tbar: [//第三部分，面板的上部工具栏，添加工具栏配置对象（即按钮）。
              { text: '新建' },//面板中定义的组件，默认是panel，但是若在配置对象中使用了text属性，则添加组件为button
              { text: '打开' },//若是使用了title则为panel
              { text: '保存' }
            ],
            bbar: [//第四部分：面板的底端工具栏.要显示定义按钮{text：‘提交’},若是以{'提交'}则提交二字会部分被面板下部遮挡
            {text: '提交' },
            {text:'取消提交'}
            ],
            tools: [//面板标题栏工具按钮，可以定义面板的最小化，最大化，关闭。都是按钮的形式。用面板提供的id
              //{ id: 'toggle' },//定义对应的按钮很方便，程序员只需要实现对应的handler就ok了。
              { id: 'minimize' },
              //{ id: 'print' },
              { id: 'close' },
              { id: 'maximize' }
            ],
            buttons: [//第五部分：面板的底部位于面板体的右下方，但是并不是面板的最下，底端工具栏处于面板的最下方。
              { text: '面板底部' }
            ],
          
            items:[
                {title:'面板一',html:'面板一面板体'},
                {title:'面板二',html:'面板二面板体'}
                ]
        });