Upgrade to ExtJS 3.3.0 - Released 10/06/2010
[extjs.git] / examples / key-feed-viewer / MainPanel.js
index a24319f..365c84d 100644 (file)
 /*!
 /*!
- * Ext JS Library 3.1.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.3.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-MainPanel = function(){\r
-    this.preview = new Ext.Panel({\r
-        id: 'preview',\r
-        region: 'south',\r
-        cls:'preview',\r
-        autoScroll: true,\r
-        listeners: FeedViewer.LinkInterceptor,\r
-        enableTabbing: true,\r
-        tbar: [{\r
-            id:'tab',\r
-            text: 'View in New Tab',\r
-            iconCls: 'new-tab',\r
-            disabled:true,\r
-            handler : this.openTab,\r
-            scope: this\r
-        },\r
-        '-',\r
-        {\r
-            id:'win',\r
-            text: 'Go to Post',\r
-            iconCls: 'new-win',\r
-            disabled:true,\r
-            scope: this,\r
-            handler : function(){\r
-                window.open(this.gsm.getSelected().data.link);\r
-            }\r
-        }],\r
-\r
-        clear: function(){\r
-            this.body.update('');\r
-            var items = this.topToolbar.items;\r
-            items.get('tab').disable();\r
-            items.get('win').disable();\r
-        }\r
-    });\r
-\r
-    this.grid = new FeedGrid(this, {\r
-        tbar:[{\r
-            text:'Open All',\r
-            tooltip: {title:'Open All',text:'Opens all item in tabs'},\r
-            iconCls: 'tabs',\r
-            handler: this.openAll,\r
-            scope:this\r
-        },\r
-        '-',\r
-        {\r
-            split:true,\r
-            text:'Reading Pane',\r
-            tooltip: {title:'Reading Pane',text:'Show, move or hide the Reading Pane'},\r
-            iconCls: 'preview-bottom',\r
-            handler: this.movePreview.createDelegate(this, []),\r
-            menu:{\r
-                id:'reading-menu',\r
-                cls:'reading-menu',\r
-                width:100,\r
-                items: [{\r
-                    text:'Bottom',\r
-                    checked:true,\r
-                    group:'rp-group',\r
-                    checkHandler:this.movePreview,\r
-                    scope:this,\r
-                    iconCls:'preview-bottom'\r
-                },{\r
-                    text:'Right',\r
-                    checked:false,\r
-                    group:'rp-group',\r
-                    checkHandler:this.movePreview,\r
-                    scope:this,\r
-                    iconCls:'preview-right'\r
-                },{\r
-                    text:'Hide',\r
-                    checked:false,\r
-                    group:'rp-group',\r
-                    checkHandler:this.movePreview,\r
-                    scope:this,\r
-                    iconCls:'preview-hide'\r
-                }]\r
-            }\r
-        },\r
-        '-',\r
-        {\r
-            pressed: true,\r
-            enableToggle:true,\r
-            text:'Summary',\r
-            tooltip: {title:'Post Summary',text:'View a short summary of each item in the list'},\r
-            iconCls: 'summary',\r
-            scope:this,\r
-            toggleHandler: function(btn, pressed){\r
-                this.grid.togglePreview(pressed);\r
-            }\r
-        }]\r
-    });\r
-    \r
-    this.grid.on('afterrender', function() {\r
-        //var fe = Ext.aria.FocusMgr.getByContainer(this.grid.body);\r
-        //fe.on('enter', this.openTab, this);\r
-    }, this);\r
-\r
-    MainPanel.superclass.constructor.call(this, {\r
-        id:'main-tabs',\r
-        activeTab:0,\r
-        region:'center',\r
-        margins:'0 5 5 0',\r
-        resizeTabs:true,\r
-        tabWidth:150,\r
-        minTabWidth: 120,\r
-        enableTabScroll: true,\r
-        plugins: new Ext.ux.TabCloseMenu(),\r
-        items: {\r
-            id:'main-view',\r
-            layout:'border',\r
-            title:'Loading...',\r
-            hideMode:'offsets',\r
-            items:[\r
-                this.grid, {\r
-                id:'bottom-preview',\r
-                layout:'fit',\r
-                items:this.preview,\r
-                height: 250,\r
-                split: true,\r
-                border:false,\r
-                region:'south'\r
-            }, {\r
-                id:'right-preview',\r
-                layout:'fit',\r
-                border:false,\r
-                region:'east',\r
-                width:350,\r
-                split: true,\r
-                hidden:true\r
-            }]\r
-        }\r
-    });\r
-\r
-    this.gsm = this.grid.getSelectionModel();\r
-\r
-    this.gsm.on('rowselect', function(sm, index, record){\r
-        FeedViewer.getTemplate().overwrite(this.preview.body, record.data);\r
-        var items = this.preview.topToolbar.items;\r
-        items.get('tab').enable();\r
-        items.get('win').enable();\r
-    }, this, {buffer:250});\r
-\r
-    this.grid.store.on('beforeload', this.preview.clear, this.preview);\r
-    this.grid.store.on('load', this.gsm.selectFirstRow, this.gsm);\r
-\r
-    this.grid.on('rowdblclick', this.openTab, this);\r
-};\r
-\r
-Ext.extend(MainPanel, Ext.TabPanel, {\r
-\r
-    loadFeed : function(feed){\r
-        this.grid.loadFeed(feed.url);\r
-        Ext.getCmp('main-view').setTitle(feed.text);\r
-    },\r
-\r
-    movePreview : function(m, pressed){\r
-        if(!m){ // cycle if not a menu item click\r
-            var readMenu = Ext.menu.MenuMgr.get('reading-menu');\r
-            readMenu.render();\r
-            var items = readMenu.items.items;\r
-            var b = items[0], r = items[1], h = items[2];\r
-            if(b.checked){\r
-                r.setChecked(true);\r
-            }else if(r.checked){\r
-                h.setChecked(true);\r
-            }else if(h.checked){\r
-                b.setChecked(true);\r
-            }\r
-            return;\r
-        }\r
-        if(pressed){\r
-            var preview = this.preview;\r
-            var right = Ext.getCmp('right-preview');\r
-            var bot = Ext.getCmp('bottom-preview');\r
-            var btn = this.grid.getTopToolbar().items.get(2);\r
-            switch(m.text){\r
-                case 'Bottom':\r
-                    right.hide();\r
-                    bot.add(preview);\r
-                    bot.show();\r
-                    bot.ownerCt.doLayout();\r
-                    btn.setIconClass('preview-bottom');\r
-                    break;\r
-                case 'Right':\r
-                    bot.hide();\r
-                    right.add(preview);\r
-                    right.show();\r
-                    right.ownerCt.doLayout();\r
-                    btn.setIconClass('preview-right');\r
-                    break;\r
-                case 'Hide':\r
-                    preview.ownerCt.hide();\r
-                    preview.ownerCt.ownerCt.doLayout();\r
-                    btn.setIconClass('preview-hide');\r
-                    break;\r
-            }\r
-        }\r
-    },\r
-\r
-    openTab : function(record){\r
-        record = (record && record.data) ? record : this.gsm.getSelected();\r
-        var d = record.data;\r
-        var id = !d.link ? Ext.id() : d.link.replace(/[^A-Z0-9-_]/gi, '');\r
-        var tab;\r
-        if(!(tab = this.getItem(id))){\r
-            tab = new Ext.Panel({\r
-                id: id,\r
-                cls:'preview single-preview',\r
-                title: d.title,\r
-                tabTip: d.title,\r
-                html: FeedViewer.getTemplate().apply(d),\r
-                enableTabbing: true,\r
-                closable:true,\r
-                listeners: FeedViewer.LinkInterceptor,\r
-                autoScroll:true,\r
-                border:true,\r
-                tbar: [{\r
-                    text: 'Go to Post',\r
-                    iconCls: 'new-win',\r
-                    handler : function(){\r
-                        window.open(d.link);\r
-                    }\r
-                }]\r
-            });\r
-            this.add(tab);\r
-        }\r
-        this.setActiveTab(tab);\r
-        tab.enter();\r
-    },\r
-\r
-    openAll : function(){\r
-        this.beginUpdate();\r
-        this.grid.store.data.each(this.openTab, this);\r
-        this.endUpdate();\r
-    }\r
-});\r
-\r
+MainPanel = function(){
+    this.preview = new Ext.Panel({
+        id: 'preview',
+        region: 'south',
+        cls:'preview',
+        autoScroll: true,
+        listeners: FeedViewer.LinkInterceptor,
+        enableTabbing: true,
+        tbar: [{
+            id:'tab',
+            text: 'View in New Tab',
+            iconCls: 'new-tab',
+            disabled:true,
+            handler : this.openTab,
+            scope: this
+        },
+        '-',
+        {
+            id:'win',
+            text: 'Go to Post',
+            iconCls: 'new-win',
+            disabled:true,
+            scope: this,
+            handler : function(){
+                window.open(this.gsm.getSelected().data.link);
+            }
+        }],
+
+        clear: function(){
+            this.body.update('');
+            var items = this.topToolbar.items;
+            items.get('tab').disable();
+            items.get('win').disable();
+        }
+    });
+
+    this.grid = new FeedGrid(this, {
+        tbar:[{
+            text:'Open All',
+            tooltip: {title:'Open All',text:'Opens all item in tabs'},
+            iconCls: 'tabs',
+            handler: this.openAll,
+            scope:this
+        },
+        '-',
+        {
+            split:true,
+            text:'Reading Pane',
+            tooltip: {title:'Reading Pane',text:'Show, move or hide the Reading Pane'},
+            iconCls: 'preview-bottom',
+            handler: this.movePreview.createDelegate(this, []),
+            menu:{
+                id:'reading-menu',
+                cls:'reading-menu',
+                width:100,
+                items: [{
+                    text:'Bottom',
+                    checked:true,
+                    group:'rp-group',
+                    checkHandler:this.movePreview,
+                    scope:this,
+                    iconCls:'preview-bottom'
+                },{
+                    text:'Right',
+                    checked:false,
+                    group:'rp-group',
+                    checkHandler:this.movePreview,
+                    scope:this,
+                    iconCls:'preview-right'
+                },{
+                    text:'Hide',
+                    checked:false,
+                    group:'rp-group',
+                    checkHandler:this.movePreview,
+                    scope:this,
+                    iconCls:'preview-hide'
+                }]
+            }
+        },
+        '-',
+        {
+            pressed: true,
+            enableToggle:true,
+            text:'Summary',
+            tooltip: {title:'Post Summary',text:'View a short summary of each item in the list'},
+            iconCls: 'summary',
+            scope:this,
+            toggleHandler: function(btn, pressed){
+                this.grid.togglePreview(pressed);
+            }
+        }]
+    });
+    
+    this.grid.on('afterrender', function() {
+        //var fe = Ext.aria.FocusMgr.getByContainer(this.grid.body);
+        //fe.on('enter', this.openTab, this);
+    }, this);
+
+    MainPanel.superclass.constructor.call(this, {
+        id:'main-tabs',
+        activeTab:0,
+        region:'center',
+        margins:'0 5 5 0',
+        resizeTabs:true,
+        tabWidth:150,
+        minTabWidth: 120,
+        enableTabScroll: true,
+        plugins: new Ext.ux.TabCloseMenu(),
+        items: {
+            id:'main-view',
+            layout:'border',
+            title:'Loading...',
+            hideMode:'offsets',
+            items:[
+                this.grid, {
+                id:'bottom-preview',
+                layout:'fit',
+                items:this.preview,
+                height: 250,
+                split: true,
+                border:false,
+                region:'south'
+            }, {
+                id:'right-preview',
+                layout:'fit',
+                border:false,
+                region:'east',
+                width:350,
+                split: true,
+                hidden:true
+            }]
+        }
+    });
+
+    this.gsm = this.grid.getSelectionModel();
+
+    this.gsm.on('rowselect', function(sm, index, record){
+        FeedViewer.getTemplate().overwrite(this.preview.body, record.data);
+        var items = this.preview.topToolbar.items;
+        items.get('tab').enable();
+        items.get('win').enable();
+    }, this, {buffer:250});
+
+    this.grid.store.on('beforeload', this.preview.clear, this.preview);
+    this.grid.store.on('load', this.gsm.selectFirstRow, this.gsm);
+
+    this.grid.on('rowdblclick', this.openTab, this);
+};
+
+Ext.extend(MainPanel, Ext.TabPanel, {
+
+    loadFeed : function(feed){
+        this.grid.loadFeed(feed.url);
+        Ext.getCmp('main-view').setTitle(feed.text);
+    },
+
+    movePreview : function(m, pressed){
+        if(!m){ // cycle if not a menu item click
+            var readMenu = Ext.menu.MenuMgr.get('reading-menu');
+            readMenu.render();
+            var items = readMenu.items.items;
+            var b = items[0], r = items[1], h = items[2];
+            if(b.checked){
+                r.setChecked(true);
+            }else if(r.checked){
+                h.setChecked(true);
+            }else if(h.checked){
+                b.setChecked(true);
+            }
+            return;
+        }
+        if(pressed){
+            var preview = this.preview;
+            var right = Ext.getCmp('right-preview');
+            var bot = Ext.getCmp('bottom-preview');
+            var btn = this.grid.getTopToolbar().items.get(2);
+            switch(m.text){
+                case 'Bottom':
+                    right.hide();
+                    bot.add(preview);
+                    bot.show();
+                    bot.ownerCt.doLayout();
+                    btn.setIconClass('preview-bottom');
+                    break;
+                case 'Right':
+                    bot.hide();
+                    right.add(preview);
+                    right.show();
+                    right.ownerCt.doLayout();
+                    btn.setIconClass('preview-right');
+                    break;
+                case 'Hide':
+                    preview.ownerCt.hide();
+                    preview.ownerCt.ownerCt.doLayout();
+                    btn.setIconClass('preview-hide');
+                    break;
+            }
+        }
+    },
+
+    openTab : function(record){
+        record = (record && record.data) ? record : this.gsm.getSelected();
+        var d = record.data;
+        var id = !d.link ? Ext.id() : d.link.replace(/[^A-Z0-9-_]/gi, '');
+        var tab;
+        if(!(tab = this.getItem(id))){
+            tab = new Ext.Panel({
+                id: id,
+                cls:'preview single-preview',
+                title: d.title,
+                tabTip: d.title,
+                html: FeedViewer.getTemplate().apply(d),
+                enableTabbing: true,
+                closable:true,
+                listeners: FeedViewer.LinkInterceptor,
+                autoScroll:true,
+                border:true,
+                tbar: [{
+                    text: 'Go to Post',
+                    iconCls: 'new-win',
+                    handler : function(){
+                        window.open(d.link);
+                    }
+                }]
+            });
+            this.add(tab);
+        }
+        this.setActiveTab(tab);
+        tab.enter();
+    },
+
+    openAll : function(){
+        this.beginUpdate();
+        this.grid.store.data.each(this.openTab, this);
+        this.endUpdate();
+    }
+});
+
 Ext.reg('appmainpanel', MainPanel);
\ No newline at end of file
 Ext.reg('appmainpanel', MainPanel);
\ No newline at end of file