extjs4 - Maximize, minimize extjs panel -
how can add maximize , minimize in panel of extjs 4 portal example:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/portal/portal.html
fully working code:
ext.define('ext.app.portal', { extend: 'ext.container.viewport', requires: ['ext.app.portalpanel', 'ext.app.portalcolumn', 'ext.app.gridportlet', 'ext.app.chartportlet'], initcomponent: function(){ var content = '<div class="portlet-content">'+ext.example.shortbogusmarkup+'</div>'; var maincolumnpanelid; //var mainpanelid; var itemno=0; this.tools= [ { type:'minimize', hidden:true, scope:this, handler: function(e, target, panel) { var cardpanel=ext.getcmp("app-portal"); var c = panel.up("viewport"); var maximizeportletpanel = ext.getcmp("maximizeportletpanel"); cardpanel.layout.setactiveitem(0); var originalpanel=ext.getcmp(maincolumnpanelid); originalpanel.insert(itemno,maximizeportletpanel.items.items[0]); panel.tools['close'].setvisible(true); panel.tools['collapse-top'].setvisible(true); panel.tools['minimize'].setvisible(false); panel.tools['maximize'].setvisible(true); } }, { type:'maximize', scope:this, handler: function(e, target, panel) { var cardpanel=ext.getcmp("app-portal"); var columnpanel = panel.ownerct.ownerct; var maximizeportletpanel = ext.getcmp("maximizeportletpanel"); maincolumnpanelid=columnpanel.getid(); var columnpanelitems=columnpanel.items.items; for(var j=0;j<columnpanelitems.length;j++){ if(columnpanelitems[j].getid()==panel.ownerct.getid()){ itemno=j; break ; } } maximizeportletpanel.insert(0,panel.ownerct); cardpanel.layout.setactiveitem(1); panel.tools['minimize'].setvisible(true); panel.tools['close'].setvisible(false); panel.tools['collapse-top'].setvisible(false); panel.tools['maximize'].setvisible(false); } }]; ext.apply(this, { id: 'app-viewport', layout: { type: 'border', padding: '0 5 5 5' // pad layout 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', region: 'center', layout:'card', items:[{ xtype: 'portalpanel', items: [{ id: 'col-1', items: [{ id: 'portlet-1', title: 'grid portlet', tools: this.tools, items: ext.create('ext.app.gridportlet'), listeners: { 'close': ext.bind(this.onportletclose, this) } },{ id: 'portlet-2', title: 'portlet 2', tools: this.tools, html: content, listeners: { 'close': ext.bind(this.onportletclose, this) } }] },{ id: 'col-2', items: [{ id: 'portlet-3', title: 'portlet 3', tools: this.tools, 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.tools, items: ext.create('ext.app.chartportlet'), listeners: { 'close': ext.bind(this.onportletclose, this) } }] }] },{ //title: 'portlet', xtype:'panel', id:'maximizeportletpanel', layout:'fit', autoscroll:true //border:true, //frame:true }]//// }]// }] }); this.callparent(arguments); }, onportletclose: function(portlet) { this.showmsg('"' + portlet.title + '" 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(); } } });
you cannot 'maximize' or 'minimize' 'viewport' because automatic render body, if want use maximize/minimize feature must work window better way do.
the viewport renders document body, , automatically sizes size of browser viewport , manages window resizing. there may 1 viewport created in page.
see: http://docs.sencha.com/extjs/4.2.1/#!/api/ext.container.viewport
but if want maximize panel inside viewport should use showby method of each panel show specified size target component.
see: http://docs.sencha.com/extjs/4.2.1/#!/api/ext.window.window-method-showby
Comments
Post a Comment