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