Extjs 继续起步:研究一下Panel

首先，把改的js代码贴出来：
Ext.onReady(function() {
    var border = new Ext.Panel({
        renderTo: 'container',
        height: 400,
        title: 'Border Layout',
        layout:'border',
        items: [{
            title: 'South Panel',
            region: 'south',
            split:true,
            height: 100,
            minSize: 75,
            maxSize: 250,
            margins: '0 5 5 5'
        },{
            title: 'West Panel',
            region:'west',
            split:true,
            margins: '5 0 0 5',
            cmargins: '5 5 0 5',
            width: 200,
            minSize: 100,
            maxSize: 300
        },{
            title: 'Main Content',
            region:'center',
            margins: '5 5 0 0'
        }]
    });
});

哈哈，这样就很长了～
写好了panel之后就开始试着在panel里加入panel，一开始以为很容易……但是发现排版就挺麻烦的T-T
最开始layout用的默认的，一下子就弄好了～然后用'fit'……突然发现至今没弄明白…………
貌似比较喜欢能调整各栏目大小的像ide界面一样的界面，就开始试着用border排版……
开始有点后悔当初学swing排版的时候木有认真学……很象的……
开始的时候没有设置最外面那个panel的高度，里面是有一点点内容的
后来删掉加上了几个panel……惊奇的发现页面上出现的只有一个标题栏％……
我猜是因为div自动控制大小的……毕竟extjs是js写出来的阿，就给几个子面板加上了height属性
发现还是不行……
可怜的我竟然又试着把renderTo 改成 applyTo ……然后给载体的div设置高度…………还是不对…………
唉……最后发现直接给主面板加上height就行了…………
让我无语一会吧～～
………………………………………………
无语完了……继续……
HOHOHOHOHO～我十分开心的加上了layout:“border“
可是那个可恶的panel竟然在页面上出现了两次……firebug还说有错误……还好长！！
由于错误提示太长了……我以为都是乱七八糟的东西……就没注意看……
现在发现当时看了的话就能很快解决问题了…………
border需要里面的chirld panel必须有一个regio:"center"……
由于我没后认真看错误提示……翻了半天的api和例子才弄好……
api文档的首页就是一个border布局
但是边上的东西太多了……看也看不清…………
我惊奇的注意到api首页最外层的不是一个panel……是一个viewport……这是个quoi阿……
我充满好奇地把我的外面那个panel也改成了viewport
然后我写的东西就填满了整个窗口～还会跟着浏览器窗口的大小自动调整大小……
…………那么……高度小朋友是不是可以回家去了呢～～
我让他回家了…………
HOHO～还是满满的一个窗口，不错不错
但是当我把viewport改回来的时候…………又只显示标题栏了…………
没办法……加上height……
border里面的元素要加上"south""west"“east""north""center"来决定元素在容器上的位置
貌似已经可以按自己想法来布局了，但是怎么能让它调整大小呢？？
继续观察demo……split……split！！
hi~hi~hi~hi~被我发现了～～
加上split: true,可以了～真简单啊真简单～
然后给每个元素加上minSize，maxSize，就能控制拖动的范围了
…………虽然不知道这里的这个Size指的是宽还是高…………
恩恩，基本上弄好了～
但是还有不明白的地方…………
添加items的时候为什么都没有写类名阿……直接是大括号…………
不管了……以后慢慢再说吧……