overlays、picker理解解析

最新推荐文章于 2022-05-17 17:11:36 发布

weixin_30699235

最新推荐文章于 2022-05-17 17:11:36 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

文章标签： ui

原文链接：http://www.cnblogs.com/qingkong/archive/2013/01/28/2880628.html

本文介绍如何使用 ExtJS 构建浮层和日期选择器，并通过代码示例展示了浮层的显示方式及如何设置日期选择器的相关属性。

   overlay = Ext.Viewport.add({
            xtype: 'panel',

            // We give it a left and top property to make it floating by default
            left: 0,
            top: 0,

            // Make it modal so you can click the mask to hide the overlay
            //在面板后做音罩层，点击背后阴照层层时，面板消失
            modal: true,
            hideOnMaskTap: true,

            // Make it hidden by default
            //设置它默认影藏
            hidden: true,

            // Set the width and height of the panel
            width: isPhone ? 260 : 400,
            height: isPhone ? '70%' : 400,

            // Here we specify the #id of the element we created in `index.html`
            //显示页面中某个id的内容
            contentEl: 'content',

            // Style the content and make it scrollable
            styleHtmlContent: true,
            scrollable: true,

            // Insert a title docked at the top with a title
            items: [
                {
                    docked: 'top',
                    xtype: 'toolbar',
                    title: 'Overlay Title'
                }
            ]
        });

        // Add a new listener onto the viewport with a delegate of the `button` xtype. This adds a listener onto every
        // button within the Viewport, which includes the buttons we added in the toolbar above.
        //事件委托绑定
        Ext.Viewport.on({
            delegate: 'button',
            tap: function(button) {
                // When you tap on a button, we want to show the overlay by the button we just tapped.
                //本例的重点，设置组件显示在某个组件旁边
                overlay.showBy(button);
            }
        });

    this.picker = Ext.Viewport.add({
            xtype: 'datepicker',

            // Disable titles, done button, cancel button and make it hidden by default
           //是否显示头部标题
            useTitles: false,
            //控制一些按钮的显示
            doneButton: false,
            cancelButton: false,
            hidden: true,

            // specify the toolbar configuration and give it a items config
            toolbar: {
                xtype: 'toolbar',
                items: (Ext.os.is.Phone) ? this.getPhoneItems() : this.getTabletItems()
            }
        });

   {
                text: 'Today',
                scope: this,
                handler: function() {
                    //在按钮上绑定时间
                    this.picker.setValueAnimated(new Date());
                }
            },
            {
                text: 'Random',
                scope: this,
                handler: function() {
                    this.picker.setValueAnimated({
                        month: getRandomNumber(0, 11),

                        day: getRandomNumber(0, 28),
                        year: getRandomNumber(1980, 2011)
                    });
                }
            },
            {
                text: 'useTitles',
                scope: this,
                handler: function() {
                    //设置时间控件显示标题
                    this.picker.setUseTitles(!this.picker.getUseTitles());
                }
            },
            { xtype: 'spacer' },
            {
                text: 'Done',
                ui: 'action',
                scope: this,
                handler: function() {
                    this.picker.hide();
                }
            }