Extjs5.0(8)：Panel组件

最新推荐文章于 2025-02-21 14:39:32 发布

kopapai

最新推荐文章于 2025-02-21 14:39:32 发布

阅读量2k

点赞数 1

分类专栏： Extjs 文章标签： Extjs Extjs5 Extjs5.0 ext js

本文链接：https://blog.youkuaiyun.com/weihuangcool/article/details/43194931

版权

Extjs 专栏收录该内容

10 篇文章

订阅专栏

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组件。