extjs/build/examples/classic/rtl/rtl.js

   1 Ext.require([
   2     'Ext.container.Viewport',
   3     'Ext.grid.Panel',
   4     'Ext.grid.plugin.RowEditing',
   5     'Ext.layout.container.Border'
   6 ]);
   7
   8 Ext.onReady(function() {
   9     var text = '\u0635\u0650\u0641 \u062E\u064E\u0644\u0642\u064E \u062E\u064E\u0648\u062F\u0650 \u0643\u064E\u0645\u0650\u062B\u0644\u0650 \u0627\u0644\u0634\u064E\u0645\u0633\u0650 \u0625\u0650\u0630 \u0628\u064E\u0632\u064E\u063A\u064E\u062A \u2014 \u064A\u064E\u062D\u0638\u0649 \u0627\u0644\u0636\u064E\u062C\u064A\u0639\u064F \u0628\u0650\u0647\u0627 \u0646\u064E\u062C\u0644\u0627\u0621\u064E \u0645\u0650\u0639\u0637\u0627\u0631\u0650',
  10         i = 50,
  11         sentences = [],
  12         words = text.split(' '),
  13         edCfg = {
  14             xtype: 'textfield'
  15         },
  16         paragraph;
  17
  18     while (i--) {
  19         sentences.push(text);
  20     }
  21
  22     paragraph = sentences.join(' ');
  23
  24     Ext.define('Fubar', {
  25         extend: 'Ext.data.Model',
  26         fields: [ 'foo', 'bar', 'baz', 'zork', 'gork', 'bork' ]
  27     });
  28
  29     // Hide the RTL Button as we already are RTL
  30     Ext.ComponentManager.onAvailable('options-toolbar', function(toolbar) {
  31
  32         var rtlButton = toolbar.down('button');
  33
  34         if (rtlButton) {
  35             rtlButton.hide();
  36         }
  37     });
  38
  39     Ext.create('Ext.container.Viewport', {
  40         layout: 'border',
  41         rtl: true,
  42         items: [{
  43             region: 'north',
  44             title: '\u0634\u0645\u0627\u0644',
  45             height: 100,
  46             html: paragraph,
  47             scrollable: true,
  48             collapsible: true,
  49             split: true
  50         }, {
  51             region: 'west',
  52             id: 'west-region',
  53             title: '\u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u063a\u0631\u0628\u064a\u0629',
  54             width: 200,
  55             collapsible: true,
  56             split: true,
  57             tbar: {
  58                 enableOverflow: true,
  59                 items: [{
  60                     text: words[9]
  61                 }, {
  62                     text: words[3]
  63                 }, {
  64                     text: words[4]
  65                 }, {
  66                     text: words[0]
  67                 }, {
  68                     text: words[12]
  69                 }]
  70             }
  71         }, {
  72             region: 'center',
  73             xtype: 'grid',
  74             plugins: {
  75                 rowediting: true
  76             },
  77             title: '\u0645\u0631\u0643\u0632 \u0627\u0644\u0645\u0646\u0637\u0642\u0629',
  78             columns: [
  79                 { dataIndex: 'foo', text: words[0], field: edCfg },
  80                 { dataIndex: 'bar', text: words[1], field: edCfg },
  81                 { dataIndex: 'baz', text: words[2], field: edCfg },
  82                 { dataIndex: 'zork', text: words[3], field: edCfg },
  83                 { dataIndex: 'gork', text: words[4], field: edCfg },
  84                 { dataIndex: 'bork', text: words[5], field: edCfg, flex: 1 }
  85             ],
  86             store: Ext.create('Ext.data.Store', {
  87                 model: 'Fubar',
  88                 data: [
  89                     [words[6], words[8], words[9], words[10], words[11], words[12]],
  90                     [words[5], words[4], words[3], words[2], words[1], words[0]],
  91                     [words[12], words[11], words[10], words[9], words[8], words[6]],
  92                     [words[0], words[1], words[2], words[3], words[4], words[5]],
  93                     [words[6], words[8], words[9], words[10], words[11], words[12]],
  94                     [words[5], words[4], words[3], words[2], words[1], words[0]],
  95                     [words[12], words[11], words[10], words[9], words[8], words[6]],
  96                     [words[0], words[1], words[2], words[3], words[4], words[5]],
  97                     [words[6], words[8], words[9], words[10], words[11], words[12]],
  98                     [words[5], words[4], words[3], words[2], words[1], words[0]],
  99                     [words[12], words[11], words[10], words[9], words[8], words[6]],
 100                     [words[0], words[1], words[2], words[3], words[4], words[5]],
 101                     [words[6], words[8], words[9], words[10], words[11], words[12]],
 102                     [words[5], words[4], words[3], words[2], words[1], words[0]],
 103                     [words[12], words[11], words[10], words[9], words[8], words[6]],
 104                     [words[0], words[1], words[2], words[3], words[4], words[5]],
 105                     [words[6], words[8], words[9], words[10], words[11], words[12]],
 106                     [words[5], words[4], words[3], words[2], words[1], words[0]],
 107                     [words[12], words[11], words[10], words[9], words[8], words[6]],
 108                     [words[0], words[1], words[2], words[3], words[4], words[5]]
 109                 ]
 110             })
 111         }, {
 112             region: 'east',
 113             title: '\u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0634\u0631\u0642\u064a\u0629',
 114             width: 200,
 115             collapsible: true,
 116             split: true
 117         }, {
 118             region: 'south',
 119             title: '\u062c\u0646\u0648\u0628 \u0627\u0644\u0645\u0646\u0637\u0642\u0629',
 120             height: 100,
 121             collapsible: true,
 122             split: true
 123         }]
 124     });
 125 });