icons、tabs、tabs2、toolbars例子详解

•       tabBar: {
                  // Dock it to the bottom
                  docked: 'bottom',
  
                  // Change the layout so each of the tabs are centered vertically and horizontally
                  layout: {
                      pack: 'center',
                      align: 'center'
                  },
  
                  // Make the tabbar scrollable horizontally, and disabled the indicators
                  scrollable: {
                      direction: 'horizontal',
                      indicators: false
                  }
              },

  tab面板页面跳转按钮的控制，控制位置，以及按钮过多时的处理

•    defaults: {
                          // iconMask is used when you need an pictos icon in a button
                          iconMask: true,
                          ui: 'plain'
                      },

  iconMask控制  xtype: 'toolbar'中按钮的图片的显示，ui主要控制图片的外部边框

•    {
                      title: 'Downloads',
                      html: '<h1>Downloads Card</h1>',
                      iconCls: 'download',
                      cls: 'card3',
                      badgeText: 'Text can go here too, but it will be cut off if it is too long.'
                  },

  tab上title主要添加图片按钮下的文字，'toolbar'的图片下没有titile，用text添加文字，badgeText在图片上添加文字说明

•   { ui: 'forward', text: 'Forward' },
                      {
                          xtype: 'segmentedbutton',
  
                          // Allow multiple pressed buttons
                          allowMultiple: true,
  
                          items: [
                              { text: 'Toggle 1', pressed: true },
                              { text: 'Toggle 2', pressed: true },
                              { text: 'Toggle 3' }
                          ]
                      }

  绝大部分的按钮外形边框用ui控制，iconCls用来控制图片的外形，这一部分我们学会一个segmentedbutton组件，它主要控制多选项排除，allowMultiple控制它多选项，pressed是按下的意思
  目前在Sencha Architect上好像不能智能添加'toolbar'的items，只能手添加，注意