chooser.js
2.89 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
/*
* This example features a window with a DataView from which the user can select images to add to a <div> on the page.
* To create the example we create simple subclasses of Window, DataView and Panel. When the user selects an image
* we just add it to the page using the insertSelectedImage function below.
*
* Our subclasses all sit under the Ext.chooser namespace so the first thing we do is tell Ext's class loader that it
* can find those classes in this directory (InfoPanel.js, IconBrowser.js and Window.js). Then we just need to require
* those files and pass in an onReady callback that will be called as soon as everything is loaded.
*/
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.chooser', '.');
Ext.Loader.setPath('Ext.ux', '../../ux');
Ext.require([
'Ext.button.Button',
'Ext.data.proxy.Ajax',
'Ext.chooser.InfoPanel',
'Ext.chooser.IconBrowser',
'Ext.chooser.Window',
'Ext.ux.DataView.Animated',
'Ext.toolbar.Spacer'
]);
Ext.onReady(function() {
/*
* This button just opens the window. We render it into the 'buttons' div and set its
* handler to simply show the window
*/
var insertButton = Ext.create('Ext.button.Button', {
text: "Insert Image",
renderTo: 'buttons',
handler : function() {
win.show();
}
});
/*
* Here is where we create the window from which the user can select images to insert into the 'images' div.
* This window is a simple subclass of Ext.window.Window, and you can see its source code in Window.js.
* All we do here is attach a listener for when the 'selected' event is fired - when this happens it means
* the user has double clicked an image in the window so we call our insertSelectedImage function to add it
* to the DOM (see below).
*/
var win = Ext.create('Ext.chooser.Window', {
id: 'img-chooser-dlg',
animateTarget: insertButton.getEl(),
listeners: {
selected: insertSelectedImage
}
});
/*
* This function is called whenever the user double-clicks an image inside the window. It creates
* a new <img> tag inside the 'images' div and immediately hides it. We then call the show() function
* with a duration of 500ms to fade the image in. At the end we call .frame() to give a visual cue
* to the user that the image has been inserted
*/
function insertSelectedImage(image) {
//create the new image tag
var image = Ext.fly('images').createChild({
tag: 'img',
src: 'icons/' + image.get('thumb')
});
//hide it straight away then fade it in over 500ms, finally use the frame animation to give emphasis
image.hide().show({duration: 500}).frame();
//this will make the window animate back to the newly inserted image element
win.animateTarget = image;
}
});