Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / view / chooser / IconBrowser.js

diff --git a/examples/view/chooser/IconBrowser.js b/examples/view/chooser/IconBrowser.js
new file mode 100644 (file)
index 0000000..1645201
--- /dev/null
+++ b/examples/view/chooser/IconBrowser.js
@@ -0,0 +1,50 @@
+/**
+ * @class Ext.chooser.IconBrowser
+ * @extends Ext.view.View
+ * @author Ed Spencer
+ * 
+ * This is a really basic subclass of Ext.view.View. All we're really doing here is providing the template that dataview
+ * should use (the tpl property below), and a Store to get the data from. In this case we're loading data from a JSON
+ * file over AJAX.
+ */
+Ext.define('Ext.chooser.IconBrowser', {
+    extend: 'Ext.view.View',
+    alias: 'widget.iconbrowser',
+    
+    uses: 'Ext.data.Store',
+    
+       singleSelect: true,
+    overItemCls: 'x-view-over',
+    itemSelector: 'div.thumb-wrap',
+    tpl: [
+        // '<div class="details">',
+            '<tpl for=".">',
+                '<div class="thumb-wrap">',
+                    '<div class="thumb">',
+                    (!Ext.isIE6? '<img src="icons/{thumb}" />' : 
+                    '<div style="width:74px;height:74px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'icons/{thumb}\')"></div>'),
+                    '</div>',
+                    '<span>{name}</span>',
+                '</div>',
+            '</tpl>'
+        // '</div>'
+    ],
+    
+    initComponent: function() {
+        this.store = Ext.create('Ext.data.Store', {
+            autoLoad: true,
+            fields: ['name', 'thumb', 'url', 'type'],
+            proxy: {
+                type: 'ajax',
+                url : 'icons.json',
+                reader: {
+                    type: 'json',
+                    root: ''
+                }
+            }
+        });
+        
+        this.callParent(arguments);
+        this.store.sort();
+    }
+});
\ No newline at end of file