extjs/examples/classic/aria/app/view/Viewport.js

   1 Ext.define('Aria.view.Viewport', {
   2     extend: 'Ext.container.Viewport',
   3
   4     requires: [
   5         'Ext.Img',
   6         'Ext.layout.container.Border',
   7         'Ext.layout.container.Accordion',
   8         'Ext.tab.Panel',
   9         'Ext.form.Panel'
  10     ],
  11
  12     layout: 'border',
  13
  14     initComponent: function() {
  15         var me = this,
  16             num = 1;
  17
  18         me.items = [{
  19             xtype: 'container',
  20             region: 'north',
  21             padding: '6 12',
  22             height: 40,
  23
  24             ariaRole: 'banner',
  25
  26             layout: {
  27                 align: 'stretch',
  28                 type: 'hbox'
  29             },
  30
  31             items: [{
  32                 xtype: 'image',
  33                 alt: 'Sencha logo',
  34                 src: 'resources/images/sencha-logo.png',
  35                 width: 19,
  36                 height: 28,
  37                 style: {
  38                     'margin-right': '10px'
  39                 }
  40             }, {
  41                 xtype: 'component',
  42                 ariaRole: 'heading',
  43                 html: 'Ext JS Accessibility Demo',
  44                 ariaAttributes: {
  45                     // Some screen readers will announce document contents upfront.
  46                     // In that case the region header component's html may be read
  47                     // twice: first as north container's aria-labelledby element,
  48                     // and then by itself as a div with a text node.
  49                     // The attribute below will instruct screen readers to skip
  50                     // the div text; it will be announced only as a region heading.
  51                     'aria-hidden': true
  52                 }
  53             }, {
  54                 xtype: 'component',
  55                 flex: 3
  56             }]
  57         }, {
  58             xtype: 'panel',
  59             region: 'west',
  60
  61             title: 'Accordion panels',
  62             collapsible: true,
  63             split: true,
  64             minWidth: 320,
  65
  66             layout: {
  67                 type: 'accordion',
  68                 animate: true
  69             },
  70
  71             tools: [{
  72                 type: 'pin',
  73                 tooltip: 'Pin the panel'
  74             }, {
  75                 type: 'help',
  76                 tooltip: 'Get panel help'
  77             }],
  78
  79             items: [{
  80                 xtype: 'mysimplebuttons',
  81                 closable: true
  82             }, {
  83                 xtype: 'panel',
  84                 title: 'Closable panel',
  85                 closable: true,
  86                 html: 'This is an example of a closable panel'
  87             }, {
  88                 xtype: 'mysimpleform',
  89                 title: 'Personal data form',
  90                 closable: true
  91             }]
  92         }, {
  93             xtype: 'tabpanel',
  94             title: 'Center tab panel',
  95             region: 'center',
  96             ariaRole: 'main',
  97             header: false,
  98             split: true,
  99             layout: 'fit',
 100             bodyStyle: 'background:white',
 101             defaults: {
 102                 padding: 12,
 103                 bodyStyle: 'background:white'
 104             },
 105
 106             items: [{
 107                 xtype: 'mysimplegrid'
 108             }, {
 109                 xtype: 'mysimplepanel'
 110             }, {
 111                 xtype: 'mysimplelist'
 112             }, {
 113                 xtype: 'container',
 114                 title: 'Window',
 115                 items: [{
 116                     xtype: 'button',
 117                     text: 'Open Window',
 118                     handler: function() {
 119                         var win = this.up('container').add(Ext.widget('mysimplewindow', {
 120                             title:'ARIA Window ' + num++
 121                         }));
 122
 123                         win.showBy(this, 'tr', [num*20, num*20]);
 124                     }
 125                 }]
 126             }, {
 127                 xtype: 'mysimpleitemselector'
 128 //             }, {
 129 //                 xtype: 'mysimpledatepicker'
 130             }, {
 131                 xtype: 'mysimpletoolbar'
 132             }, {
 133                 xtype: 'mysimplewizard'
 134             }, {
 135                 xtype: 'container',
 136                 title: 'Image',
 137                 closable: true,
 138
 139                 items: [{
 140                     xtype: 'mysimpleimage'
 141                 }]
 142             }]
 143         }];
 144
 145         me.callParent();
 146     }
 147 });