/ext-4.1.0_b3/examples/locale/multi-lang.js
JavaScript | 157 lines | 134 code | 14 blank | 9 comment | 4 complexity | bf09466c43f6e11f404745e23b9fcd34 MD5 | raw file
1Ext.Loader.setConfig({enabled: true});
2
3Ext.Loader.setPath('Ext.ux', '../ux/');
4
5Ext.require([
6 'Ext.data.*',
7 'Ext.tip.QuickTipManager',
8 'Ext.form.*',
9 'Ext.ux.data.PagingMemoryProxy',
10 'Ext.grid.Panel'
11]);
12
13Ext.onReady(function(){
14 MultiLangDemo = (function() {
15 // get the selected language code parameter from url (if exists)
16 var params = Ext.urlDecode(window.location.search.substring(1));
17 //Ext.form.Field.prototype.msgTarget = 'side';
18
19 return {
20 init: function() {
21 Ext.tip.QuickTipManager.init();
22
23 /* Language chooser combobox */
24 var store = Ext.create('Ext.data.ArrayStore', {
25 fields: ['code', 'language', 'charset'],
26 data : Ext.exampledata.languages // from languages.js
27 });
28
29 var combo = Ext.create('Ext.form.field.ComboBox', {
30 renderTo: 'languages',
31 store: store,
32 displayField:'language',
33 queryMode: 'local',
34 emptyText: 'Select a language...',
35 hideLabel: true,
36 listeners: {
37 select: {
38 fn: function(cb, records) {
39 var record = records[0];
40 window.location.search = Ext.urlEncode({"lang":record.get("code"),"charset":record.get("charset")});
41 },
42 scope: this
43 }
44 }
45 });
46
47 if (params.lang) {
48 // check if there's really a language with that language code
49 var record = store.findRecord('code', params.lang, null, null, null, true);
50 // if language was found in store assign it as current value in combobox
51 if (record) {
52 combo.setValue(record.data.language);
53 }
54 }
55
56 if (params.lang) {
57 var url = Ext.util.Format.format("../../locale/ext-lang-{0}.js", params.lang);
58
59 Ext.Ajax.request({
60 url: url,
61 success: this.onSuccess,
62 failure: this.onFailure,
63 scope: this
64 });
65 } else {
66 this.setupDemo();
67 }
68 },
69 onSuccess: function(response, opts) {
70 eval(response.responseText);
71 this.setupDemo();
72 },
73 onFailure: function() {
74 Ext.Msg.alert('Failure', 'Failed to load locale file.');
75 this.setupDemo();
76 },
77 setupDemo: function() {
78 /* Email field */
79 Ext.create('Ext.FormPanel', {
80 renderTo: 'emailfield',
81 labelWidth: 100, // label settings here cascade unless overridden
82 frame: true,
83 title: 'Email Field',
84 bodyStyle: 'padding:5px 5px 0',
85 width: 380,
86 defaults: {
87 msgTarget: 'side',
88 width: 340
89 },
90 defaultType: 'textfield',
91 items: [{
92 fieldLabel: 'Email',
93 name: 'email',
94 vtype: 'email'
95 }]
96 });
97
98 /* Datepicker */
99 Ext.create('Ext.FormPanel', {
100 renderTo: 'datefield',
101 labelWidth: 100, // label settings here cascade unless overridden
102 frame: true,
103 title: 'Datepicker',
104 bodyStyle: 'padding:5px 5px 0',
105 width: 380,
106 defaults: {
107 msgTarget: 'side',
108 width: 340
109 },
110 defaultType: 'datefield',
111 items: [{
112 fieldLabel: 'Date',
113 name: 'date'
114 }]
115 });
116
117 // shorthand alias
118 var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
119 var ds = Ext.create('Ext.data.Store', {
120 fields: ['month'],
121 remoteSort: true,
122 pageSize: 6,
123 proxy: {
124 type: 'pagingmemory',
125 data: monthArray,
126 reader: {
127 type: 'array'
128 }
129 }
130 });
131
132 Ext.create('Ext.grid.Panel', {
133 renderTo: 'grid',
134 width: 380,
135 height: 203,
136 title:'Month Browser',
137 columns:[{
138 text: 'Month of the year',
139 dataIndex: 'month',
140 width: 240
141 }],
142 store: ds,
143 bbar: Ext.create('Ext.toolbar.Paging', {
144 pageSize: 6,
145 store: ds,
146 displayInfo: true
147 })
148 });
149
150 // trigger the data store load
151 ds.load();
152 }
153 };
154
155 })();
156 MultiLangDemo.init();
157});