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 | |
---|
33 | if (params.lang) { |
---|
34 | // check if there's really a language with that language code |
---|
35 | record = store.data.find(function(item, key){ |
---|
36 | if (item.data.code == params.lang) { |
---|
37 | return true; |
---|
38 | } |
---|
39 | return false; |
---|
40 | }); |
---|
41 | // if language was found in store assign it as current value in combobox |
---|
42 | if (record) { |
---|
43 | combo.setValue(record.data.language); |
---|
44 | } |
---|
45 | } |
---|
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 | }); |
---|