/ext-4.1.0_b3/examples/portal/portal.js
JavaScript | 150 lines | 128 code | 10 blank | 12 comment | 1 complexity | b9ed753911e30ddabced9947b0f9e9b7 MD5 | raw file
1/**
2 * @class Ext.app.Portal
3 * @extends Object
4 * A sample portal layout application class.
5 */
6// TODO: Fill in the content panel -- no AccordionLayout at the moment
7// TODO: Fix container drag/scroll support (waiting on Ext.lib.Anim)
8// TODO: Fix Ext.Tool scope being set to the panel header
9// TODO: Drag/drop does not cause a refresh of scroll overflow when needed
10// TODO: Grid portlet throws errors on destroy (grid bug)
11// TODO: Z-index issues during drag
12
13Ext.define('Ext.app.Portal', {
14
15 extend: 'Ext.container.Viewport',
16 //requires: [ 'Ext.diag.layout.ContextItem', 'Ext.diag.layout.Context' ],
17 uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
18
19 getTools: function(){
20 return [{
21 xtype: 'tool',
22 type: 'gear',
23 handler: function(e, target, panelHeader, tool){
24 var portlet = panelHeader.ownerCt;
25 portlet.setLoading('Loading...');
26 Ext.defer(function() {
27 portlet.setLoading(false);
28 }, 2000);
29 }
30 }];
31 },
32
33 initComponent: function(){
34 var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
35
36 Ext.apply(this, {
37 id: 'app-viewport',
38 layout: {
39 type: 'border',
40 padding: '0 5 5 5' // pad the layout from the window edges
41 },
42 items: [{
43 id: 'app-header',
44 xtype: 'box',
45 region: 'north',
46 height: 40,
47 html: 'Ext Portal'
48 },{
49 xtype: 'container',
50 region: 'center',
51 layout: 'border',
52 items: [{
53 id: 'app-options',
54 title: 'Options',
55 region: 'west',
56 animCollapse: true,
57 width: 200,
58 minWidth: 150,
59 maxWidth: 400,
60 split: true,
61 collapsible: true,
62 layout:{
63 type: 'accordion',
64 animate: true
65 },
66 items: [{
67 html: content,
68 title:'Navigation',
69 autoScroll: true,
70 border: false,
71 iconCls: 'nav'
72 },{
73 title:'Settings',
74 html: content,
75 border: false,
76 autoScroll: true,
77 iconCls: 'settings'
78 }]
79 },{
80 id: 'app-portal',
81 xtype: 'portalpanel',
82 region: 'center',
83 items: [{
84 id: 'col-1',
85 items: [{
86 id: 'portlet-1',
87 title: 'Grid Portlet',
88 tools: this.getTools(),
89 items: Ext.create('Ext.app.GridPortlet'),
90 listeners: {
91 'close': Ext.bind(this.onPortletClose, this)
92 }
93 },{
94 id: 'portlet-2',
95 title: 'Portlet 2',
96 tools: this.getTools(),
97 html: content,
98 listeners: {
99 'close': Ext.bind(this.onPortletClose, this)
100 }
101 }]
102 },{
103 id: 'col-2',
104 items: [{
105 id: 'portlet-3',
106 title: 'Portlet 3',
107 tools: this.getTools(),
108 html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
109 listeners: {
110 'close': Ext.bind(this.onPortletClose, this)
111 }
112 }]
113 },{
114 id: 'col-3',
115 items: [{
116 id: 'portlet-4',
117 title: 'Stock Portlet',
118 tools: this.getTools(),
119 items: Ext.create('Ext.app.ChartPortlet'),
120 listeners: {
121 'close': Ext.bind(this.onPortletClose, this)
122 }
123 }]
124 }]
125 }]
126 }]
127 });
128 this.callParent(arguments);
129 },
130
131 onPortletClose: function(portlet) {
132 this.showMsg('"' + portlet.title + '" was removed');
133 },
134
135 showMsg: function(msg) {
136 var el = Ext.get('app-msg'),
137 msgId = Ext.id();
138
139 this.msgId = msgId;
140 el.update(msg).show();
141
142 Ext.defer(this.clearMsg, 3000, this, [msgId]);
143 },
144
145 clearMsg: function(msgId) {
146 if (msgId === this.msgId) {
147 Ext.get('app-msg').hide();
148 }
149 }
150});