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
| /**
| * @class Ext.chooser.InfoPanel
| * @extends Ext.panel.Panel
| * @author Ed Spencer
| *
| * This panel subclass just displays information about an image. We have a simple template set via the tpl property,
| * and a single function (loadRecord) which updates the contents with information about another image.
| */
| Ext.define('Ext.chooser.InfoPanel', {
| extend: 'Ext.panel.Panel',
| alias : 'widget.infopanel',
| id: 'img-detail-panel',
|
| width: 150,
| minWidth: 150,
|
| tpl: [
| '<div class="details">',
| '<tpl for=".">',
| (!Ext.isIE6? '<img src="icons/{thumb}" />' :
| '<div style="width:74px;height:74px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'icons/{thumb}\')"></div>'),
| '<div class="details-info">',
| '<b>Example Name:</b>',
| '<span>{name}</span>',
| '<b>Example URL:</b>',
| '<span><a href="http://dev.sencha.com/deploy/touch/examples/{url}" target="_blank">{url}.html</a></span>',
| '<b>Type:</b>',
| '<span>{type}</span>',
| '</div>',
| '</tpl>',
| '</div>'
| ],
|
| afterRender: function(){
| this.callParent();
| if (!Ext.isWebKit) {
| this.el.on('click', function(){
| alert('The Sencha Touch examples are intended to work on WebKit browsers. They may not display correctly in other browsers.');
| }, this, {delegate: 'a'});
| }
| },
|
| /**
| * Loads a given image record into the panel. Animates the newly-updated panel in from the left over 250ms.
| */
| loadRecord: function(image) {
| this.body.hide();
| this.tpl.overwrite(this.body, image.data);
| this.body.slideIn('l', {
| duration: 250
| });
| },
|
| clear: function(){
| this.body.update('');
| }
| });
|
|
