-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo_uxmultiselect.js
171 lines (152 loc) · 5.57 KB
/
demo_uxmultiselect.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
/*
* Ext.ux.form.field.MultiSelect demo application.
*
* Copyright (C) 2011-2012 Alexander Tokarev.
*
* This code is licensed under the terms of the Open Source LGPL 3.0 license.
* Commercial use is permitted to the extent that the code/component(s) do NOT
* become part of another Open Source or Commercially licensed development library
* or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/
Ext.Loader.setConfig({
enabled: true,
disableCaching: true,
paths: {
'Ext.ux': '../ux'
}
});
Ext.require([
'Ext.form.Panel',
'Ext.ux.form.field.MultiSelect'
]);
var store, panel,
multiValue = true;
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
panel = Ext.create('Ext.form.Panel', {
width: 200,
height: 200,
id: 'formPanel',
layout: 'vbox',
border: false,
defaults: {
autoScroll: true,
bodyPadding: 8,
listeners: {
specialkey: function(form, event) {
if (event.getKey() === event.ENTER) {
form.up().down('#validateButton').handler();
};
}
}
},
position: 'absolute',
x: 20,
y: 20,
items: [{
xtype: 'multiselectfield',
id: 'multiSelectField',
allowBlank: false,
multiValue: multiValue,
noneSelectedText: '<center>None selected</center>',
store: {
fields: [ 'id', 'name' ],
data: [
{ id: '1', name: 'Alfonso Musorgsky' },
{ id: '02', name: 'Adam Petruccio' },
{ id: '303', name: 'Ben Robertson' },
{ id: '0304', name: 'Cecilia Unknown' },
{ id: '0305', name: 'Dieter Bohlen' },
{ id: '0306', name: 'Elena Prekrasnaya' },
{ id: '0307', name: 'Flora diFauna' },
{ id: '0308', name: 'Giorgio Moglinetti' },
{ id: '0309', name: 'Huey Lewis' },
{ id: '0310', name: 'Ian Underwood' },
{ id: '0311', name: 'Jamie Nothere' },
{ id: '0312', name: 'Karl Gustaf' },
{ id: '0313', name: 'Laura Star' },
{ id: '0314', name: 'Monty Python' },
{ id: '0315', name: 'Ninja Turtle' },
{ id: '0316', name: 'Opal the Waitress' },
{ id: '0317', name: 'Prince Charming' },
{ id: '0318', name: 'Quin Zuhan' },
{ id: '0319', name: 'Rahul Gamzatov' },
{ id: '0320', name: 'Simeon Balthazar' },
{ id: '0321', name: 'Trololo Guy' },
{ id: '0322', name: 'Undine Brundelschpiegel' },
{ id: '0323', name: 'Victoria Queen' },
{ id: '0324', name: 'Walt Disney' },
{ id: '0325', name: 'Xanthan Gum' },
{ id: '0326', name: 'Yvonne van der Onne' },
{ id: '0327', name: 'Zombie Hunter' }
],
proxy: {
type: 'memory'
},
sorters: [{
sorterFn: function(a, b) {
var first, second;
first = a.get('id') - 0; // Compare numeric
second = b.get('id') - 0;
return first > second ? 1
: second > first ? -1
: 0
;
}
}]
},
// Overall width of selector grid is 202px
// 20px takes first (icon) column
// Another 16px usually takes vertical scrollbar
columns: (function(multi) {
if ( multi ) {
return [{
dataIndex: 'id',
width: 40
}, {
dataIndex: 'name',
width: 126
}];
}
else {
return [{
dataIndex: 'id',
width: 40
}, {
dataIndex: 'name',
width: 146
}];
}
})(multiValue)
}, {
xtype: 'button',
id: 'validateButton',
text: 'Validate',
handler: function() {
var form, field;
form = Ext.getCmp('formPanel').getForm();
field = Ext.getCmp('multiSelectField');
if ( form.isValid() ) {
var values = form.getValues();
alert('Form is valid: ' + Ext.JSON.encode(values[ field.inputId ]));
}
else {
alert('Form is invalid');
};
}
}, {
xtype: 'button',
id: 'closeFormButton',
text: 'Close Form',
handler: function() {
var formPanel = Ext.getCmp('formPanel');
formPanel.destroy();
}
}],
renderTo: Ext.getBody()
});
var input = panel.query('multiselectfield');
input && input[0] && input[0].focus();
});