examples/locale/multi-lang.js

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