source: trunk/web/addons/job_monarch/lib/extjs-30/examples/key-feed-viewer/MainPanel.js @ 625

Last change on this file since 625 was 625, checked in by ramonb, 15 years ago

lib/extjs-30:

  • new ExtJS 3.0
File size: 7.6 KB
Line 
1/*!
2 * Ext JS Library 3.0.0
3 * Copyright(c) 2006-2009 Ext JS, LLC
4 * licensing@extjs.com
5 * http://www.extjs.com/license
6 */
7MainPanel = function(){
8    this.preview = new Ext.Panel({
9        id: 'preview',
10        region: 'south',
11        cls:'preview',
12        autoScroll: true,
13        listeners: FeedViewer.LinkInterceptor,
14        enableTabbing: true,
15        tbar: [{
16            id:'tab',
17            text: 'View in New Tab',
18            iconCls: 'new-tab',
19            disabled:true,
20            handler : this.openTab,
21            scope: this
22        },
23        '-',
24        {
25            id:'win',
26            text: 'Go to Post',
27            iconCls: 'new-win',
28            disabled:true,
29            scope: this,
30            handler : function(){
31                window.open(this.gsm.getSelected().data.link);
32            }
33        }],
34
35        clear: function(){
36            this.body.update('');
37            var items = this.topToolbar.items;
38            items.get('tab').disable();
39            items.get('win').disable();
40        }
41    });
42
43    this.grid = new FeedGrid(this, {
44        tbar:[{
45            text:'Open All',
46            tooltip: {title:'Open All',text:'Opens all item in tabs'},
47            iconCls: 'tabs',
48            handler: this.openAll,
49            scope:this
50        },
51        '-',
52        {
53            split:true,
54            text:'Reading Pane',
55            tooltip: {title:'Reading Pane',text:'Show, move or hide the Reading Pane'},
56            iconCls: 'preview-bottom',
57            handler: this.movePreview.createDelegate(this, []),
58            menu:{
59                id:'reading-menu',
60                cls:'reading-menu',
61                width:100,
62                items: [{
63                    text:'Bottom',
64                    checked:true,
65                    group:'rp-group',
66                    checkHandler:this.movePreview,
67                    scope:this,
68                    iconCls:'preview-bottom'
69                },{
70                    text:'Right',
71                    checked:false,
72                    group:'rp-group',
73                    checkHandler:this.movePreview,
74                    scope:this,
75                    iconCls:'preview-right'
76                },{
77                    text:'Hide',
78                    checked:false,
79                    group:'rp-group',
80                    checkHandler:this.movePreview,
81                    scope:this,
82                    iconCls:'preview-hide'
83                }]
84            }
85        },
86        '-',
87        {
88            pressed: true,
89            enableToggle:true,
90            text:'Summary',
91            tooltip: {title:'Post Summary',text:'View a short summary of each item in the list'},
92            iconCls: 'summary',
93            scope:this,
94            toggleHandler: function(btn, pressed){
95                this.grid.togglePreview(pressed);
96            }
97        }]
98    });
99   
100    this.grid.on('afterrender', function() {
101        //var fe = Ext.aria.FocusMgr.getByContainer(this.grid.body);
102        //fe.on('enter', this.openTab, this);
103    }, this);
104
105    MainPanel.superclass.constructor.call(this, {
106        id:'main-tabs',
107        activeTab:0,
108        region:'center',
109        margins:'0 5 5 0',
110        resizeTabs:true,
111        tabWidth:150,
112        minTabWidth: 120,
113        enableTabScroll: true,
114        plugins: new Ext.ux.TabCloseMenu(),
115        items: {
116            id:'main-view',
117            layout:'border',
118            title:'Loading...',
119            hideMode:'offsets',
120            items:[
121                this.grid, {
122                id:'bottom-preview',
123                layout:'fit',
124                items:this.preview,
125                height: 250,
126                split: true,
127                border:false,
128                region:'south'
129            }, {
130                id:'right-preview',
131                layout:'fit',
132                border:false,
133                region:'east',
134                width:350,
135                split: true,
136                hidden:true
137            }]
138        }
139    });
140
141    this.gsm = this.grid.getSelectionModel();
142
143    this.gsm.on('rowselect', function(sm, index, record){
144        FeedViewer.getTemplate().overwrite(this.preview.body, record.data);
145        var items = this.preview.topToolbar.items;
146        items.get('tab').enable();
147        items.get('win').enable();
148    }, this, {buffer:250});
149
150    this.grid.store.on('beforeload', this.preview.clear, this.preview);
151    this.grid.store.on('load', this.gsm.selectFirstRow, this.gsm);
152
153    this.grid.on('rowdblclick', this.openTab, this);
154};
155
156Ext.extend(MainPanel, Ext.TabPanel, {
157
158    loadFeed : function(feed){
159        this.grid.loadFeed(feed.url);
160        Ext.getCmp('main-view').setTitle(feed.text);
161    },
162
163    movePreview : function(m, pressed){
164        if(!m){ // cycle if not a menu item click
165            var readMenu = Ext.menu.MenuMgr.get('reading-menu');
166            readMenu.render();
167            var items = readMenu.items.items;
168            var b = items[0], r = items[1], h = items[2];
169            if(b.checked){
170                r.setChecked(true);
171            }else if(r.checked){
172                h.setChecked(true);
173            }else if(h.checked){
174                b.setChecked(true);
175            }
176            return;
177        }
178        if(pressed){
179            var preview = this.preview;
180            var right = Ext.getCmp('right-preview');
181            var bot = Ext.getCmp('bottom-preview');
182            var btn = this.grid.getTopToolbar().items.get(2);
183            switch(m.text){
184                case 'Bottom':
185                    right.hide();
186                    bot.add(preview);
187                    bot.show();
188                    bot.ownerCt.doLayout();
189                    btn.setIconClass('preview-bottom');
190                    break;
191                case 'Right':
192                    bot.hide();
193                    right.add(preview);
194                    right.show();
195                    right.ownerCt.doLayout();
196                    btn.setIconClass('preview-right');
197                    break;
198                case 'Hide':
199                    preview.ownerCt.hide();
200                    preview.ownerCt.ownerCt.doLayout();
201                    btn.setIconClass('preview-hide');
202                    break;
203            }
204        }
205    },
206
207    openTab : function(record){
208        record = (record && record.data) ? record : this.gsm.getSelected();
209        var d = record.data;
210        var id = !d.link ? Ext.id() : d.link.replace(/[^A-Z0-9-_]/gi, '');
211        var tab;
212        if(!(tab = this.getItem(id))){
213            tab = new Ext.Panel({
214                id: id,
215                cls:'preview single-preview',
216                title: d.title,
217                tabTip: d.title,
218                html: FeedViewer.getTemplate().apply(d),
219                enableTabbing: true,
220                closable:true,
221                listeners: FeedViewer.LinkInterceptor,
222                autoScroll:true,
223                border:true,
224                tbar: [{
225                    text: 'Go to Post',
226                    iconCls: 'new-win',
227                    handler : function(){
228                        window.open(d.link);
229                    }
230                }]
231            });
232            this.add(tab);
233        }
234        this.setActiveTab(tab);
235        tab.enter();
236    },
237
238    openAll : function(){
239        this.beginUpdate();
240        this.grid.store.data.each(this.openTab, this);
241        this.endUpdate();
242    }
243});
244
245Ext.reg('appmainpanel', MainPanel);
Note: See TracBrowser for help on using the repository browser.