PDA

View Full Version : Two collapsible GridPanels



hermann.s
19 Sep 2013, 3:06 AM
Greetings,

I have two GridPanels with collapsible : true, that are both displayed within the same container.
However, only one can be expanded at the same time. How can I have both be expanded and occupy, say, half of the container each?

evant
19 Sep 2013, 3:18 AM
Post the relevant code.

hermann.s
19 Sep 2013, 3:28 AM
GridPanel instantiation and adding them to the container.

new Base.ViewPort({id: '@BFE.Frontend.Main.ViewPort'});
new Base.Panel({id: '@BFE.Frontend.Main.Panel',
width: @BFE.Frontend.Main.ApplicationMinWidth + @BFE.Frontend.Main.MenuWidth,
layout: 'border'});


@* Panels *@
new Base.Panel({id: '@BFE.Frontend.MainPanel.ID',
title: 'ThyssenKrupp BPCT (powered by MCF)',
layout: 'card'});


new Base.TreePanel({id: '@BFE.Frontend.SidePanel.ID',
title: '@BFE.Frontend.SidePanel.Title',
store: SidePanel});




@* Containers *@
new Base.Container({id: '@BFE.Frontend.MyTask.Container.ID'});

@* GridPanels *@
new Base.GridPanel({id: '@BFE.Frontend.MyTask.GridPanel.ID',
title: '@BFE.Frontend.MyTask.GridPanel.Title',
storeFields: @Html.Raw(Model.MyTasksModel.GetStoreModel()),
columns: @Html.Raw(Model.MyTasksModel.GetColumnModel()),
proxyType: 'ajax',
proxyUrl: '/Task/GetMyTaskData'});


new Base.GridPanel({id: '@BFE.Frontend.PendingTask.GridPanel.ID',
title: '@BFE.Frontend.PendingTask.GridPanel.Title',
storeFields: @Html.Raw(Model.PendingTasksModel.GetStoreModel()),
columns: @Html.Raw(Model.PendingTasksModel.GetColumnModel()),
proxyType: 'ajax',
proxyUrl: '/Task/GetPendingTaskData'});

get('@BFE.Frontend.Main.ViewPort').add(get('@BFE.Frontend.Main.Panel'));


get('@BFE.Frontend.Main.Panel').add(get('@BFE.Frontend.MainPanel.ID'));
get('@BFE.Frontend.Main.Panel').add(get('@BFE.Frontend.SidePanel.ID'));


get('@BFE.Frontend.MainPanel.ID').add(get('@BFE.Frontend.MyTask.Container.ID'));
get('@BFE.Frontend.MainPanel.ID').add(get('@BFE.Frontend.Search.Container.ID'));


get('@BFE.Frontend.MyTask.Container.ID').add(get('@BFE.Frontend.MyTask.GridPanel.ID'));
get('@BFE.Frontend.MyTask.Container.ID').add(get('@BFE.Frontend.PendingTask.GridPanel.ID'));



The Base.GridPanel custom class.


Ext.define('Base.GridPanel', {
extend: 'Ext.grid.Panel',
xtype: 'gridpanel',


defaults:
{
flex: 1,
hideMode: 'offsets',
collapsible: true
},


config:
{
storeFields: [],
proxyType: '',
proxyUrl: '',
store :
{
fields: [],
proxy:
{
type: '',
url: '',
reader:
{
type: 'json',
root: 'data'
},
actionMethods: {read: 'POST'}
},
autoLoad: true
},
columns: []
},


constructor: function(config)
{
this.initConfig(config);
config = merge(this.defaults, this.config);
this.callParent(arguments);
addToComponentManager(this, this.getXType());
},


initComponent: function()
{
this.store.fields = this.storeFields;
this.store.proxy.type = this.proxyType;
this.store.proxy.url = this.proxyUrl;
this.callParent();
}
});

Farish
19 Sep 2013, 3:56 AM
what is your base container type and layout?

hermann.s
19 Sep 2013, 4:05 AM
Ext.define('Base.Container', {
extend: 'Ext.container.Container',
xtype: 'container',


defaults:
{
hideMode: 'offsets',
layout: 'accordion',
},


config:
{
},


constructor : function(config)
{
this.initConfig(config);
config = merge(this.defaults, this.config);
this.callParent(arguments);


addToComponentManager(this, this.getXType());
}
});

Farish
19 Sep 2013, 4:07 AM
"This is a layout that manages multiple Panels in an expandable accordion style such that only one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing."

Source: http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.layout.container.Accordion

hermann.s
19 Sep 2013, 5:01 AM
Thanks for pointing me in the right direction.
However, after setting the multi : true layout config, nothing changed.

I still cannot expand more than one panel at the time.


Ext.define('Base.Container', {
extend: 'Ext.container.Container',
xtype: 'container',

defaults:
{
hideMode: 'offsets',
layout: 'accordion'
},
layoutConfig:
{
multi: true
},
config:
{
},


constructor : function(config)
{
this.initConfig(config);
config = merge(this.defaults, this.config);
this.callParent(arguments);


addToComponentManager(this, this.getXType());
}
});

Farish
19 Sep 2013, 5:09 AM
which version of ExtJS are you using? in older versions it might not work as suggested by the comments for multi config...

hermann.s
19 Sep 2013, 5:11 AM
which version of ExtJS are you using? in older versions it might not work as suggested by the comments for multi config...

4.2 Build date: 2013-05-16 14:36:50

Farish
19 Sep 2013, 5:21 AM
try creating a simple application with a container and 2 simple grids on jsfiddle or sencha fiddle and see if it works. this will rule out problems caused by something else in your application. remove all unnecessary configs from the grids and their container:

https://fiddle.sencha.com


PS: I havent used the multi option myself. so cannot guarantee if it ever worked in any version!

ettavolt
19 Sep 2013, 6:10 AM
Try vbox instead with flex:1,collapsible:true for all contained items.