overlays、picker理解解析

•    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();
                  }
              }