Ext.js5的面板（2）

详细的代码：就是Ext.js5资源包
1、面板的折叠

  {
                title: 'Tools',
                collapsed: true,
                collapsible: true,
                width: 640,
                html: KitchenSink.DummyText.mediumText,
                tools: [
                    { type:'pin' },
                    { type:'refresh' },
                    { type:'search' },
                    { type:'save' }
                ],
                colspan: 3
            }

collapsed: true 能够使面板初始化的时候是折叠，默认值是false
collapsible: true 能够使面板具有折叠的属性
tools：在面板title的那一行可以增加各种各样的小工具

colspan: 3 ：这个布局是定义成table布局表现的，在layout里面已经设置了columns:3,就是只有三列，tdAttrs:{}这个属性里面居然可以写style，内联样式下载这个属性里面可以设置整个布局的样式，defaults:{}这里面写的样式是用来设置布局里面每个div（在这里就是各个面板）的样式。另外有get到了一个叫做bodyPadding:XXX的属性(这里这是padding值不用谢px单位)，这个相当于style:’padding:XXXpx’.恩，对colspan:3就是横跨三列的意思。整个布局如下：

2、扩展。在defaults:{}里面添加frame:true就可以让每个面板具有圆角的属性。
3、扩展。这是我第一次接触Ext.js的bind用法，之前使用Angualrjs的时候用过绑定，第一想法就是哇，居然是单的花括号，哈哈！

Ext.define('KitchenSink.view.panel.HeaderPosition', { //类名的定义请看层级结构文章
    extend: 'Ext.panel.Panel',
    //扩展，就是此页面继承Ext.panel.Panel类，因为会用他的各种属性
    //在什么情况下继承什么样的类：设置UI页面的一般会包含很多组件就是继承Ext.container类；
    //如果设置UI组件就继承Ext.panel.Panel类（UI界面需要用到头信息，底部信息，工具条）；
    //最重要的是，以上是还是初学者的我总结出来的，还有很多Ext.js的知识不知道，很浅显的，看看就好，不要信
    xtype: 'panel-header-position',
    //xtype很有用处，和alias一样，给组件设置别名，方便在其他地方引用

    width: 600,
    layout: 'column',
    viewModel: true,

    defaults: {
        bodyPadding: 10,
        height: 300,
        scrollable: true
    },

    initComponent: function() {
        //初始化控件
        this.bodyStyle = "background: transparent";
        //居然还有这样设置样式的方法，此处是将背景颜色设置为透明

        this.tbar = [
        //位于头部(top)的工具条
            {
                xtype: 'label',
                text: 'Header Position:'
            },
            {
                xtype: 'segmentedbutton',//分段的按钮
                reference: 'positionBtn',//注意这个引用，下面bind会用到！
                value: 'top',
                defaultUI: 'default',
                //Default ui to use for buttons in this segmented button. Buttons can override this default by specifying their own UI。大意是：defaultUI是个分段按钮用的一个样式属性，你也可以自己写属性覆盖掉这个样式
                items: [{
                    text: 'Top',
                    value: 'top'//value值出现了！下面的bind会用到！
                }, {
                    text: 'Right',
                    value: 'right'
                }, {
                    text: 'Bottom',
                    value: 'bottom'
                }, {
                    text: 'Left',
                    value: 'left'
                }]
            }
        ];

        this.items = [{
            columnWidth: 0.5,
            margin: "10 5 0 0",//margin的样式居然是这样写
            title: 'Panel',
            icon: null,
            glyph: 117,
            html: KitchenSink.DummyText.longText,
            bind: {
                headerPosition: '{positionBtn.value}'//此处用到了reference( reference: 'positionBtn')，headerPosition是随便取得一个比较有含义的名字，虽然现在我还不知道为什么这么写20151217
            }
        }, {
            columnWidth: 0.5,
            margin: "10 0 0 5",
            frame: true,
            title: 'Framed Panel',
            icon: null,
            glyph: 117,
            html: KitchenSink.DummyText.longText,
            bind: {
                headerPosition: '{positionBtn.value}'
            }
        }];

        this.callParent();//现在的我还不好解释这为什么要有一个this.callParent()20151217
    }
});

效果图如下：

感慨一下，在Ext.js中看到bind使用方法的时候不知道有多么高兴和熟悉！