examples/locale/multi-lang.js

   1 Ext.Loader.setConfig({enabled: true});
   2
   3 Ext.Loader.setPath('Ext.ux', '../ux/');
   4
   5 Ext.require([
   6     'Ext.data.*',
   7     'Ext.tip.QuickTipManager',
   8     'Ext.form.*',
   9     'Ext.ux.data.PagingMemoryProxy',
  10     'Ext.grid.Panel'
  11 ]);
  12
  13 Ext.onReady(function(){
  14     MultiLangDemo = (function() {
  15         // get the selected language code parameter from url (if exists)
  16         var params = Ext.urlDecode(window.location.search.substring(1));
  17         //Ext.form.Field.prototype.msgTarget = 'side';
  18
  19         return {
  20             init: function() {
  21                 Ext.tip.QuickTipManager.init();
  22
  23                 /* Language chooser combobox  */
  24                 var store = Ext.create('Ext.data.ArrayStore', {
  25                     fields: ['code', 'language', 'charset'],
  26                     data : Ext.exampledata.languages // from languages.js
  27                 });
  28
  29                 var combo = Ext.create('Ext.form.field.ComboBox', {
  30                     renderTo: 'languages',
  31                     store: store,
  32                     displayField:'language',
  33                     queryMode: 'local',
  34                     emptyText: 'Select a language...',
  35                     hideLabel: true,
  36                     listeners: {
  37                         select: {
  38                             fn: function(cb, records) {
  39                                 var record = records[0];
  40                                 window.location.search = Ext.urlEncode({"lang":record.get("code"),"charset":record.get("charset")});
  41                             },
  42                             scope: this
  43                         }
  44                     }
  45                 });
  46
  47                 if (params.lang) {
  48                     // check if there's really a language with that language code
  49                     var record = store.findRecord('code', params.lang, null, null, null, true);
  50                     // if language was found in store assign it as current value in combobox
  51                     if (record) {
  52                         combo.setValue(record.data.language);
  53                     }
  54                 }
  55
  56                 if (params.lang) {
  57                     var url = Ext.util.Format.format("../../locale/ext-lang-{0}.js", params.lang);
  58
  59                     Ext.Ajax.request({
  60                         url: url,
  61                         success: this.onSuccess,
  62                         failure: this.onFailure,
  63                         scope: this
  64                     });
  65                 } else {
  66                     this.setupDemo();
  67                 }
  68             },
  69             onSuccess: function(response, opts) {
  70                 eval(response.responseText);
  71                 this.setupDemo();
  72             },
  73             onFailure: function() {
  74                 Ext.Msg.alert('Failure', 'Failed to load locale file.');
  75                 this.setupDemo();
  76             },
  77             setupDemo: function() {
  78                 /* Email field */
  79                 Ext.create('Ext.FormPanel', {
  80                     renderTo: 'emailfield',
  81                     labelWidth: 100, // label settings here cascade unless overridden
  82                     frame: true,
  83                     title: 'Email Field',
  84                     bodyStyle: 'padding:5px 5px 0',
  85                     width: 380,
  86                     defaults: {
  87                         msgTarget: 'side',
  88                         width: 340
  89                     },
  90                     defaultType: 'textfield',
  91                     items: [{
  92                         fieldLabel: 'Email',
  93                         name: 'email',
  94                         vtype: 'email'
  95                     }]
  96                 });
  97
  98                 /* Datepicker */
  99                 Ext.create('Ext.FormPanel', {
 100                     renderTo: 'datefield',
 101                     labelWidth: 100, // label settings here cascade unless overridden
 102                     frame: true,
 103                     title: 'Datepicker',
 104                     bodyStyle: 'padding:5px 5px 0',
 105                     width: 380,
 106                     defaults: {
 107                         msgTarget: 'side',
 108                         width: 340
 109                     },
 110                     defaultType: 'datefield',
 111                     items: [{
 112                         fieldLabel: 'Date',
 113                         name: 'date'
 114                     }]
 115                 });
 116
 117                 // shorthand alias
 118                 var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
 119                 var ds = Ext.create('Ext.data.Store', {
 120                      fields: ['month'],
 121                      remoteSort: true,
 122                      pageSize: 6,
 123                      proxy: {
 124                          type: 'pagingmemory',
 125                          data: monthArray,
 126                          reader: {
 127                              type: 'array'
 128                          }
 129                      }
 130                  });
 131
 132                  Ext.create('Ext.grid.Panel', {
 133                      renderTo: 'grid',
 134                      width: 380,
 135                      height: 203,
 136                      title:'Month Browser',
 137                      columns:[{
 138                          text: 'Month of the year',
 139                          dataIndex: 'month',
 140                          width: 240
 141                      }],
 142                      store: ds,
 143                      bbar: Ext.create('Ext.toolbar.Paging', {
 144                              pageSize: 6,
 145                              store: ds,
 146                              displayInfo: true
 147                      })
 148                  });
 149
 150                 // trigger the data store load
 151                 ds.load();
 152             }
 153         };
 154
 155     })();
 156     MultiLangDemo.init();
 157 });