examples/locale/multi-lang.js

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