provide installation instructions
[extjs.git] / 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