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