我有另一个Ext js 7现代布局问题,多个resizer和collapser像这样:https://fiddle.sencha.com/#view/editor&fiddle/3ci6当我折叠“先移动这个”面板,然后移动左大小调整器,然后右大小调整器一个奇怪的布局错误出现(右从统计白色出现)。我做错了什么?
mspsb9vt1#
只需将调整大小器移到上一个面板:
function __(key) { return key; } Ext.create('Ext.form.Panel', { xtype: 'main.customer', itemId: 'main_customer', renderTo: Ext.getBody(), //title: __('Kunde'), flex: 1, items: [{ xtype: 'panel', itemId: 'maincontainer', //hidden: true, layout: { type: 'vbox', align: 'stretch' }, flex: 1, height: '100%', items: [{ xtype: 'panel', padding: 0, layout: { type: 'hbox', align: 'stretch' }, flex: 1, height: '63%', resizable: { split: true, edges: ['south'] }, items: [{ xtype: 'panel', layout: { type: 'hbox', align: 'stretch' }, flex: 1, items: [{ xtype: 'panel', layout: { type: 'hbox', align: 'stretch' }, flex: 1, items: [{ title: __('Stammdaten'), xtype: 'panel', html: 'test', flex: 1, collapsible: { direction: 'left', animation: false, useDrawer: false, collapseToolText: __('Stammdaten einklappen'), expandToolText: __('Stammdaten ausklappen'), }, }, { xtype: 'panel', title: __('Weitere Kundendaten'), collapsed: true, flex: 1, collapsible: { direction: 'right', animation: false, useDrawer: false, collapseToolText: __('Weitere Kundendaten einklappen'), expandToolText: __('Weitere Kundendaten ausklappen'), }, layout: { type: 'fit', align: 'stretch' }, items: [{ xtype: 'tabpanel', flex: 1, layout: { animation: { type: '', } }, defaults: { scrollable: true, userSelectable: { bodyElement: true }, padding: 10, }, items: [{ title: __('Zusatz 1'), iconCls: '', flex: 1, items: [{ xtype: 'container', flex: 1, items: [{ xtype: 'panel', flex: 1, html: 'test', }] }] }, { title: __('Zusatz 2'), iconCls: '', flex: 1, items: [{ xtype: 'container', flex: 1, items: [{ xtype: 'panel', flex: 1, html: 'test', }] }] }] }] }], }] }, { xtype: 'panel', resizable: { split: true, edges: ['west'], }, layout: { type: 'hbox', align: 'stretch' }, flex: 1, items: [{ xtype: 'panel', flex: 1, html: '< Move this first<br>then this one to the right >', collapsible: { direction: 'right', animation: false, useDrawer: false, collapseToolText: __('Statistik einklappen'), expandToolText: __('Statistik ausklappen'), }, // THE RESIZER IS MOVED HERE resizable: { split: true, edges: ['east'], }, }, { xtype: 'panel', title: __('Statistik'), collapsible: { direction: 'right', animation: false, useDrawer: false, collapseToolText: __('Statistik einklappen'), expandToolText: __('Statistik ausklappen'), }, layout: { type: 'hbox', align: 'stretch' }, flex: 1, items: [{ xtype: 'tabpanel', flex: 1, layout: { animation: { type: '', } }, defaults: { scrollable: true, userSelectable: { bodyElement: true }, padding: 10, }, items: [{ title: __('Umsatzstatistik'), iconCls: '', flex: 1, items: [{ xtype: 'panel', flex: 1, items: [{ //xtype: 'main.customer.basedata.statistik', }] }] }, { title: __('Weitere Statistik'), iconCls: '', flex: 1, items: [{ xtype: 'container', html: 'stats2', }] }] }], // ADDITIONAL LISTENERS listeners: { collapse: function (panel) { panel.previousSibling().setResizable({}) }, expand: function (panel) { panel.previousSibling().setResizable({ split: true, edges: ['east'], }) } } }], }] }, { xtype: 'panel', layout: { type: 'hbox', align: 'stretch' }, flex: 1, items: [{ xtype: 'panel', width: '50%', resizable: { split: true, edges: 'east' }, items: [{ xtype: 'panel', html: 'test', }], }, { xtype: 'panel', flex: 1, items: [{ xtype: 'panel', html: 'test', }], }] }] }], collapsible: false });
1条答案
按热度按时间mspsb9vt1#
只需将调整大小器移到上一个面板: