Extjs Panel基础篇上

今天我们就来看看让大家心动不已的ext的panel，很可能你以前习惯使用了html这种元素，发觉要做出很漂亮的界面是太困难了，加上自己的审美观又不是那么的强，那么
extjs就可以很不好的帮助我们解决这个问题，你这需要进行简单的配置一个漂亮的面板就会出现在你的面前，下面我们就来看看吧！
    var p = new Ext.Panel({
        title: 'My Panel',
        collapsible:true,//使得panel可以收缩：false,true
        renderTo: 'panel-basic',//如果灭有这个属性，此时panel这个面板这是在内存中画好了，但是还没有实际的渲染到我们的dom元素中去，我们是看不见的，
        width:400,//设置面面板的宽度
        html: '这里可以书写符合w3c的html元素，同样可以正常的在面板中得到显示'
    });

//以上的一段代码就可以制作出一个可以伸缩的面板，呵呵，，是不是很简单呢？其他的属性我就不一一举例，只是做一般性的讲解，如果大家有什么不懂的，
可以亲自动手试一下想要了解的属性。我想在视觉上的一个直观的理解应该是不成问题的，panel属性：
 1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，
 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"}];buttons:[new Ext.Button({text:'确定'})]
 7.buttonAlign:footer中按钮的位置，枚举值为："left","right","center",默认为right面板中按钮的显示位置，不过按钮的显示并没有在panel的主体中，
 而是显示在底部的工具条上
 8.collapsible：设为true，显示右上角的收缩按钮，默认为false
 9.draggable:true则可拖动，但需要你提供操作过程，默认为false
 10.html:主体的内容
 11.id：id值，通过id可以找到这个组件，建议一般加上这个id值；注：页面中不能出现两个id相同的组件否则页面就会发生冲突，导致某些组件的位置等显示不正确，
 进而达不到你想要的效果，这样的在开发中是经常遇到的，所以大家还是要多的细心，尽量的避免这样的问题发生
 12.width：宽度
 13.height：高度
 13.title:标题
 14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.
 15.applyTo：（id）渲染到某个html元素中
 16.contentEl：（id）将某个html元素里面的内容在panel中呈现出来，
 17.renderTo：（id）渲染到某个html元素中
 //applyTo,renderTo这两个和contentEl方向是相反的，在表面上看applyTo和renderTo没有太大的区别，视乎所做的事情是一样的，不过他们的细微处还是有一定的区别，
 不过我现在还不是很清楚，其中正真的原理和玄机所在，所以也就不妄加评论了！
 18.frame:true 控制背景色，panel圆角和方角，等都有控制，视乎和border:FALSE还有一定的冲突，有兴趣的朋友可以自己尝试一下，这个属性在项目开发中是经常用到的
 而且很重要

 extjs 官方如是介绍panel：panel是一个容器，有着特殊的功能，是一个结构化的组件，是一个很完美的面板的接口，她很好的继承了container接口，可以配置各种布局，
 以及往panel中添加各种组件，