examples/locale/multi-lang.js

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