Window.js
5.87 KB
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
172
173
174
175
176
177
178
179
/**
* @class Ext.chooser.Window
* @extends Ext.window.Window
* @author Ed Spencer
*
* This is a simple subclass of the built-in Ext.window.Window class. Although it weighs in at 100+ lines, most of this
* is just configuration. This Window class uses a border layout and creates a DataView in the central region and an
* information panel in the east. It also sets up a toolbar to enable sorting and filtering of the items in the
* DataView. We add a few simple methods to the class at the bottom, see the comments inline for details.
*/
Ext.define('Ext.chooser.Window', {
extend: 'Ext.window.Window',
uses: [
'Ext.layout.container.Border',
'Ext.form.field.Text',
'Ext.form.field.ComboBox',
'Ext.toolbar.TextItem'
],
height: 400,
width : 600,
title : 'Choose an Image',
closeAction: 'hide',
layout: 'border',
// modal: true,
border: false,
bodyBorder: false,
/**
* initComponent is a great place to put any code that needs to be run when a new instance of a component is
* created. Here we just specify the items that will go into our Window, plus the Buttons that we want to appear
* at the bottom. Finally we call the superclass initComponent.
*/
initComponent: function() {
this.items = [
{
xtype: 'panel',
region: 'center',
autoScroll: true,
items: {
xtype: 'iconbrowser',
id: 'img-chooser-view',
listeners: {
scope: this,
selectionchange: this.onIconSelect,
itemdblclick: this.fireImageSelected
}
},
tbar: [
{
xtype: 'textfield',
name : 'filter',
fieldLabel: 'Filter',
labelAlign: 'right',
labelWidth: 35,
listeners: {
scope : this,
buffer: 50,
change: this.filter
}
},
' ',
{
xtype: 'combo',
fieldLabel: 'Sort By',
labelAlign: 'right',
labelWidth: 45,
valueField: 'field',
displayField: 'label',
value: 'Type',
editable: false,
store: Ext.create('Ext.data.Store', {
fields: ['field', 'label'],
sorters: 'type',
proxy : {
type: 'memory',
data : [{label: 'Name', field: 'name'}, {label: 'Type', field: 'type'}]
}
}),
listeners: {
scope : this,
select: this.sort
}
}
]
},
{
xtype: 'infopanel',
region: 'east',
split: true
}
];
this.buttons = [
{
text: 'OK',
scope: this,
handler: this.fireImageSelected
},
{
text: 'Cancel',
scope: this,
handler: function() {
this.hide();
}
}
];
this.callParent(arguments);
/**
* Specifies a new event that this component will fire when the user selects an item. The event is fired by the
* fireImageSelected function below. Other components can listen to this event and take action when it is fired
*/
this.addEvents(
/**
* @event selected
* Fired whenever the user selects an image by double clicked it or clicking the window's OK button
* @param {Ext.data.Model} image The image that was selected
*/
'selected'
);
},
/**
* @private
* Called whenever the user types in the Filter textfield. Filters the DataView's store
*/
filter: function(field, newValue) {
var store = this.down('iconbrowser').store,
dataview = this.down('dataview');
store.suspendEvents();
store.clearFilter();
dataview.getSelectionModel().clearSelections();
store.resumeEvents();
store.filter({
property: 'name',
anyMatch: true,
value : newValue
});
},
/**
* @private
* Called whenever the user changes the sort field using the top toolbar's combobox
*/
sort: function() {
var field = this.down('combobox').getValue();
this.down('dataview').store.sort(field);
},
/**
* Called whenever the user clicks on an item in the DataView. This tells the info panel in the east region to
* display the details of the image that was clicked on
*/
onIconSelect: function(dataview, selections) {
var selected = selections[0];
if (selected) {
this.down('infopanel').loadRecord(selected);
}
},
/**
* Fires the 'selected' event, informing other components that an image has been selected
*/
fireImageSelected: function() {
var selectedImage = this.down('iconbrowser').selModel.getSelection()[0];
if (selectedImage) {
this.fireEvent('selected', selectedImage);
this.hide();
}
}
});