Extjs5.0(8)：Panel组件

Panel很简单，以至于我不知道如何开始这篇文章，直接上代码吧。

 

1、BasicPanel

 

上一篇文章我们已经在view包中创建了一个panel包，还建了一个BasicPanels.js文件，我们这里直接使用这个BasicPanels.js，在里面添加几个基本的panel.

BasicPanels.js：

Ext.define('MyApp.view.panel.BasicPanels', {    extend: 'Ext.Container',    xtype: 'basic-panels',    width: 660,    requires: [        'Ext.layout.container.Table'    ],    layout: {        type: 'table',        columns: 3,        tdAttrs: { style: 'padding: 10px; vertical-align: top;' }    },    defaults: {        xtype: 'panel',        width: 200,        height: 280,        bodyPadding: 10    },    initComponent: function () {        this.items = [            {                html:'我没有标题'            },            {                title: 'Title',                html: '我有标题'            },            {                title: 'Collapsible',                collapsible: true,                html: '我能收缩'            },            {                title: 'Tools',                collapsible: true,                width: 640,                html: '我有工具栏',                tools: [                    { type:'pin' },                    { type:'refresh' },                    { type:'search' },                    { type:'save' }                ],                colspan: 3            }        ];        this.callParent();    }});

浏览器中运行项目，点击左侧树节点Basic Panel，效果图。

注意：如果运行时没有出现以上效果，可能是因为报错找不到该组件。如果出现这样的问题，请确保你的项目是运行在sencha app watch下，这样子sencha cmd才能检测到项目的改变（例如我们这里新增了一个文件）。

如何执行sencha app watch我前面的文章有介绍过，这里再讲一次

打开cmd，切换到项目目录下，执行 sencha app watch

这样就开启了sencha app watch。

继续上面的代码，可能比较难理解的是下面两段代码

layout: {    type: 'table',    columns: 3,    tdAttrs: { style: 'padding: 10px; vertical-align: top;' }},defaults: {    xtype: 'panel',    width: 200,    height: 200,    bodyPadding: 10   },

第一段代码涉及到布局，这里大家就照抄就好，后面讲到布局的时候会解释。

第二段代码的意思是，为子组件设置默认属性。在defaults中设置了子组件的默认属性之后，在items中的子组件，就共享defaults中的属性配置。

2、FramedPanel

panel包中创建FramedPanels.js文件

代码

Ext.define('MyApp.view.panel.FramedPanels', {    extend: 'Ext.Container',    xtype: 'framed-panels',    width: 660,    layout: {        type: 'table',        columns: 3,        tdAttrs: { style: 'padding: 10px; vertical-align: top;' }    },    defaults: {        xtype: 'panel',        width: 200,        height: 280,        bodyPadding: 10,        frame: true    },       initComponent: function () {        this.items = [            {                html:'我们都有圆角，我没有标题'            },            {                title: 'Title',                html: '我们都有圆角，我有标题'            },            {                title: 'Collapsible',                collapsible: true,                html: '我们都有圆角，我能收缩'            },            {                title: 'Tools',                collapsible: true,                width: 640,                html: '我们都有圆角，我有工具栏',                tools: [                    { type:'pin' },                    { type:'refresh' },                    { type:'search' },                    { type:'save' }                ],                colspan: 3            }        ];        this.callParent();    }});

浏览器中运行项目，点击左侧树节点Framed Panel，效果图。

FramedPanels与BasicPanels代码几乎一样，只是FramedPanels中的panel多了属性frame:true，看效果图我们可以知道，frame让panel有了圆角。

3、HeaderPosition

panel包中创建HeaderPosition.js文件

代码

Ext.define('MyApp.view.panel.HeaderPosition', {    extend: 'Ext.panel.Panel',    xtype: 'panel-header-position',    requires:[        'Ext.layout.container.Column',        'Ext.form.Label',        'Ext.button.Segmented'    ],    width: 600,    layout: 'column',    viewModel: true,    defaults: {        bodyPadding: 10,        height: 300,        scrollable: true    },    initComponent: function () {        this.bodyStyle = 'background: transparent';        this.tbar = [            {                xtype: 'label',                text: 'Header Position:'            },            {                xtype: 'segmentedbutton',                reference: 'positionBtn',                value: 'top',                defaultUI: 'default',                items: [{                    text: 'Top',                    value: 'top'                }, {                    text: 'Right',                    value: 'right'                }, {                    text: 'Bottom',                    value: 'bottom'                }, {                    text: 'Left',                    value: 'left'                }]            }        ];        this.items = [            {                columnWidth: 0.5,                margin: '10 5 0 0',                title: 'Panel',                html: '我没有圆角',                bind: {                    headerPosition: '{positionBtn.value}'                }            }, {                columnWidth: 0.5,                margin: '10 10 10 5',                frame: true,                title: 'Framed Panel',                html: '我有圆角',                bind: {                    headerPosition: '{positionBtn.value}'                }            }        ];        this.callParent();    }});

浏览器中运行项目，点击左侧树节点Header Positioning，效果图。

点击工具栏按钮时，下面两个panel的header会做相应改变。

代码中我们使用了tbar配置，这个配置的意思是为组件设置顶部工具栏。

在segmentedbutton这个组件中我们使用了一个reference配置，其在api中的解释：

reference : String

Specifies a name for this component insideits component hierarchy. This name must be unique within its view orits ViewController.See the documentation in Ext.container.Container formore information about references.

可见这个配置的作用是为组件内部结构指定一个name，之后我们就可以使用这个name来获取组件的属性值。在我们设置的两个panel中有这么一段代码

bind: {            headerPosition: '{positionBtn.value}'}

也就是使用了positionBtn来访问segmentedbutton属性，并绑定在panel的headerPosition配置上，控制panel header的位置。

但是，positionBtn并不能访问到全部的segmentedbutton属性，在官方文档中有这么一段话：

“When a component is assigned a “reference” to identify it, that componentwill publish some of its key properties in the ViewModel.”

字面理解，当我们在组件中使用reference时，该组件将发布一些关键属性到ViewModel中。那么问题来了，什么是关键属性（key properties），不得而知。照我们上面的代码，我试了几个segmentedbutton的属性都访问不了。在官方文档中，讲到reference的使用时，其用到的题目是“Binding and Component State”，所以我想这些关键属性应该是能够控制组件状态的属性，例如segmentedbutton的value可以根据其items中的按钮的value来改变，再如checkbox的checked可以根据是否有勾选来改变，所以这些属性都能访问到。

 

这篇文章就讲到这里。另外Extjs5.0Demo这个项目到此就不再继续下去了，因为觉得这样导致每一篇文章都和之前的文章有联系，对一些人可能不是很方便，所以以后的文章都会用单独的项目来说明。

虽然Extjs5.0Demo不再继续下去，但是其项目架构已经很明朗了，可以以此为参考，应用于实际项目中。

最后附上到此为止的Extjs5.0Demo源码。

下篇文章讲Grid组件。

交流群：170198012