X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/view/chooser/IconBrowser.js

diff --git a/examples/view/chooser/IconBrowser.js b/examples/view/chooser/IconBrowser.js
new file mode 100644
index 00000000..16452014
--- /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