/ext-4.1.0_b3/examples/portal/portal.js
https://bitbucket.org/srogerf/javascript · JavaScript · 150 lines · 128 code · 10 blank · 12 comment · 1 complexity · b9ed753911e30ddabced9947b0f9e9b7 MD5 · raw file
- /**
- * @class Ext.app.Portal
- * @extends Object
- * A sample portal layout application class.
- */
- // TODO: Fill in the content panel -- no AccordionLayout at the moment
- // TODO: Fix container drag/scroll support (waiting on Ext.lib.Anim)
- // TODO: Fix Ext.Tool scope being set to the panel header
- // TODO: Drag/drop does not cause a refresh of scroll overflow when needed
- // TODO: Grid portlet throws errors on destroy (grid bug)
- // TODO: Z-index issues during drag
- Ext.define('Ext.app.Portal', {
- extend: 'Ext.container.Viewport',
- //requires: [ 'Ext.diag.layout.ContextItem', 'Ext.diag.layout.Context' ],
- uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
- getTools: function(){
- return [{
- xtype: 'tool',
- type: 'gear',
- handler: function(e, target, panelHeader, tool){
- var portlet = panelHeader.ownerCt;
- portlet.setLoading('Loading...');
- Ext.defer(function() {
- portlet.setLoading(false);
- }, 2000);
- }
- }];
- },
- initComponent: function(){
- var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
- Ext.apply(this, {
- id: 'app-viewport',
- layout: {
- type: 'border',
- padding: '0 5 5 5' // pad the layout from the window edges
- },
- items: [{
- id: 'app-header',
- xtype: 'box',
- region: 'north',
- height: 40,
- html: 'Ext Portal'
- },{
- xtype: 'container',
- region: 'center',
- layout: 'border',
- items: [{
- id: 'app-options',
- title: 'Options',
- region: 'west',
- animCollapse: true,
- width: 200,
- minWidth: 150,
- maxWidth: 400,
- split: true,
- collapsible: true,
- layout:{
- type: 'accordion',
- animate: true
- },
- items: [{
- html: content,
- title:'Navigation',
- autoScroll: true,
- border: false,
- iconCls: 'nav'
- },{
- title:'Settings',
- html: content,
- border: false,
- autoScroll: true,
- iconCls: 'settings'
- }]
- },{
- id: 'app-portal',
- xtype: 'portalpanel',
- region: 'center',
- items: [{
- id: 'col-1',
- items: [{
- id: 'portlet-1',
- title: 'Grid Portlet',
- tools: this.getTools(),
- items: Ext.create('Ext.app.GridPortlet'),
- listeners: {
- 'close': Ext.bind(this.onPortletClose, this)
- }
- },{
- id: 'portlet-2',
- title: 'Portlet 2',
- tools: this.getTools(),
- html: content,
- listeners: {
- 'close': Ext.bind(this.onPortletClose, this)
- }
- }]
- },{
- id: 'col-2',
- items: [{
- id: 'portlet-3',
- title: 'Portlet 3',
- tools: this.getTools(),
- html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
- listeners: {
- 'close': Ext.bind(this.onPortletClose, this)
- }
- }]
- },{
- id: 'col-3',
- items: [{
- id: 'portlet-4',
- title: 'Stock Portlet',
- tools: this.getTools(),
- items: Ext.create('Ext.app.ChartPortlet'),
- listeners: {
- 'close': Ext.bind(this.onPortletClose, this)
- }
- }]
- }]
- }]
- }]
- });
- this.callParent(arguments);
- },
- onPortletClose: function(portlet) {
- this.showMsg('"' + portlet.title + '" was removed');
- },
- showMsg: function(msg) {
- var el = Ext.get('app-msg'),
- msgId = Ext.id();
- this.msgId = msgId;
- el.update(msg).show();
- Ext.defer(this.clearMsg, 3000, this, [msgId]);
- },
- clearMsg: function(msgId) {
- if (msgId === this.msgId) {
- Ext.get('app-msg').hide();
- }
- }
- });