examples/locale/multi-lang.js

   1 /*!
   2  * Ext JS Library 3.1.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 MultiLangDemo = function() {
   8     // get the selected language code parameter from url (if exists)
   9     var params = Ext.urlDecode(window.location.search.substring(1));
  10     Ext.form.Field.prototype.msgTarget = 'side';
  11
  12     return {
  13         init: function() {
  14             Ext.QuickTips.init();
  15
  16             /* Language chooser combobox  */
  17             var store = new Ext.data.ArrayStore({
  18                 fields: ['code', 'language', 'charset'],
  19                 data : Ext.exampledata.languages // from languages.js
  20             });
  21             var combo = new Ext.form.ComboBox({
  22                 renderTo: 'languages',
  23                 store: store,
  24                 displayField:'language',
  25                 typeAhead: true,
  26                 mode: 'local',
  27                 triggerAction: 'all',
  28                 emptyText: 'Select a language...',
  29                 selectOnFocus: true,
  30                 onSelect: function(record) {
  31                     window.location.search = Ext.urlEncode({"lang":record.get("code"),"charset":record.get("charset")});
  32                 }
  33             });
  34
  35             if (params.lang) {
  36                 // check if there's really a language with that language code
  37                 record = store.data.find(function(item, key){
  38                     if (item.data.code == params.lang) {
  39                         return true;
  40                     }
  41                     return false;
  42                 });
  43                 // if language was found in store assign it as current value in combobox
  44                 if (record) {
  45                     combo.setValue(record.data.language);
  46                 }
  47             }
  48
  49             if (params.lang) {
  50                 var url = String.format("../../src/locale/ext-lang-{0}.js", params.lang);
  51
  52                 Ext.Ajax.request({
  53                     url: url,
  54                     success: this.onSuccess,
  55                     failure: this.onFailure,
  56                     scope: this
  57                 });
  58             } else {
  59                 this.setupDemo();
  60             }
  61         },
  62         onSuccess: function(response, opts) {
  63             eval(response.responseText);
  64             this.setupDemo();
  65         },
  66         onFailure: function() {
  67             Ext.Msg.alert('Failure', 'Failed to load locale file.');
  68             this.setupDemo();
  69         },
  70         setupDemo: function() {
  71             /* Email field */
  72             var emailfield = new Ext.FormPanel({
  73                 renderTo: 'emailfield',
  74                 labelWidth: 100, // label settings here cascade unless overridden
  75                 frame: true,
  76                 title: 'Email Field',
  77                 bodyStyle: 'padding:5px 5px 0',
  78                 width: 360,
  79                 defaults: {width: 220},
  80                 defaultType: 'textfield',
  81
  82                 items: [{
  83                     fieldLabel: 'Email',
  84                     name: 'email',
  85                     vtype: 'email'
  86                 }]
  87             });
  88
  89             /* Datepicker */
  90             var datefield = new Ext.FormPanel({
  91                 renderTo: 'datefield',
  92                 labelWidth: 100, // label settings here cascade unless overridden
  93                 frame: true,
  94                 title: 'Datepicker',
  95                 bodyStyle: 'padding:5px 5px 0',
  96                 width: 360,
  97                 defaults: {width: 220},
  98                 defaultType: 'datefield',
  99                 items: [{
 100                     fieldLabel: 'Date',
 101                     name: 'date'
 102                 }]
 103             });
 104
 105             // shorthand alias
 106             var fm = Ext.form, Ed = Ext.grid.GridEditor;
 107
 108             var monthArray = Date.monthNames.map(function (e) { return [e]; });
 109
 110             var ds = new Ext.data.Store({
 111                 proxy: new Ext.ux.data.PagingMemoryProxy(monthArray),
 112                 reader: new Ext.data.ArrayReader({}, [
 113                     {name: 'month'}
 114                 ])
 115             });
 116
 117             var cm = new Ext.grid.ColumnModel([{
 118                 header: "Months of the year",
 119                 dataIndex: 'month',
 120                 editor: new Ed(new fm.TextField({
 121                     allowBlank: false
 122                 })),
 123                 width: 240,
 124                 defaultSortable: true
 125             }]);
 126
 127             var grid = new Ext.grid.GridPanel({
 128                 renderTo: 'grid',
 129                 width: 360,
 130                 height: 203,
 131                 title:'Month Browser',
 132                 store: ds,
 133                 cm: cm,
 134                 sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
 135
 136                 bbar: new Ext.PagingToolbar({
 137                         pageSize: 6,
 138                         store: ds,
 139                         displayInfo: true
 140                 })
 141             });
 142
 143             // trigger the data store load
 144             ds.load({params:{start:0, limit:6}});
 145         }
 146     };
 147
 148 }();
 149 Ext.onReady(MultiLangDemo.init, MultiLangDemo);