PDA

View Full Version : dynamically added grid not showing scrollbars



delebash
5 May 2013, 7:22 AM
Extjs version 4.2

I am using a border layout and dynamically adding components to the center region. This works fine but when I add my grid the grid scrollbars are not displaying. However if I add the grid to the center region non-dynamic the scrollbars work fine.

Snippet of center region using dynamic code

{
xtype : 'container',
region : 'center',
id : 'centerRegion',
cls : 'panelrounded',
layout : 'fit',
autoHeight: true,
items : {
itemId : 'viewport-target',

}
}

Code to add component

viewport = Ext.getCmp('viewport'),
target = viewport.down('#viewport-target'),
myxtype = 'contactslist'
Ext.suspendLayouts();
target.removeAll();
target.add({
xtype : myxtype
});
Ext.resumeLayouts(true);


43548

Above code fails to render grid with scroll bars

If I remove the dynamic part and just add the xtype then the scrollbars are displayed correctly

{
xtype : 'container',
region : 'center',
id : 'centerRegion',
cls : 'panelrounded',
layout : 'fit',
autoHeight: true,
items : {
xtype : 'contactslist',

}


43549
Grid code is the same for both loading options

Ext.define('SimplyFundraising.view.contacts.List', {
extend : 'Ext.grid.Panel',
xtype : 'contactslist',
title : 'All Contacts',
store : 'Contacts',
autoScroll : true,
viewConfig : {
loadMask : true
},
initComponent : function() {
this.tbar = [{
text : 'Create Contact',
action : 'create'
}];
this.columns = [{
header : 'Id',
dataIndex : '__KEY',
width : 50
}, {
header : 'First Name',
dataIndex : 'firstName',
flex : 1
}, {
header : 'Middle Name',
dataIndex : 'middleName',
flex : 1
}, {
header : 'Last Name',
dataIndex : 'lastName',
flex : 1
}];
this.addEvents('removeitem');
this.actions = {
removeitem : Ext.create('Ext.Action', {
text : 'Remove Contact',
handler : function() {
this.fireEvent('removeitem', this.getSelected())
},
scope : this
})
};
var contextMenu = Ext.create('Ext.menu.Menu', {
items : [this.actions.removeitem]
});
this.on({
itemcontextmenu : function(view, rec, node, index, e) {
e.stopEvent();
contextMenu.showAt(e.getXY());
return false;
}
});
this.callParent(arguments);
},
getSelected : function() {
var sm = this.getSelectionModel();
var rs = sm.getSelection();
if (rs.length) {
return rs[0];
}
return null;
}
});


I tried calling a doLayout but that didn't change anything, also from docs it seems manually calling doLayout after adding removing components is now not necessary.

Any ideas?

evant
5 May 2013, 1:27 PM
When you're adding it dynamically, you're putting in an extra layer of nesting.

'viewport-target' is a panel with no layout. Get rid of it and add the grid directly to the center region like you're doing when declaring it statically.

delebash
5 May 2013, 2:09 PM
Evant thanks for the reply,

From reading the docs it said that you can't add/remove items from a region and to use a container to add/remove items. I just read as of 4.1 that this is no longer a requirement and you can add/remove directly from a region. This fixed the problem, but I still think it should have worked using the extra container.

Here is my new working layout

Ext.define('SimplyFundraising.view.Viewport', {
renderTo : Ext.getBody(),
extend : 'Ext.container.Viewport',
requires : ['Ext.layout.container.Border', 'Ext.toolbar.Toolbar', 'Ext.panel.Panel'],

id : 'viewport',
layout : 'border',
padding : '0 2 0 4',
cls : 'viewport',
defaults : {
frame : false,
},
items : [{
xtype : 'container',
region : 'north',
cls : 'ctnorth',
id : 'header',
html : 'Simply Fundraising',
cls : 'header'
}, {
xtype : 'toolbar',
region : 'north',
itemId : 'main-nav-toolbar',
margin : '0 0 4 0',
defaults : {
toggleGroup : 'main-nav',
allowDepress : false
},
items : [{
text : 'Home',
itemId : 'home',
pressed : true
}, {
text : 'PopUsers',
itemId : 'popusers'
}, {
text : 'Contacts',
itemId : 'contacts'
}, {
text : 'Users',
itemId : 'users'
}, {
text : 'Settings',
itemId : 'settings'
}]
}, {
xtype : 'container',
region : 'south',
height : 25,
id : 'footer',
html : 'footer',
margins : {
top : 5
}
}, {
xtype : 'panel',
region : 'east',
split : true,
width : 100,
minWidth : 75,
maxWidth : 150,
collapsible : true,
title : 'East Panel',
id : 'eastPanel',
html : ' disposable'

}, {
xtype : 'panel',
region : 'west',
split : true,
width : 100,
minWidth : 75,
maxWidth : 150,
collapsible : true,
title : 'West Panel',
id : 'westPanel',
html : 'West disposable',
}, {
region : 'center',
id : 'centerRegion',
cls : 'panelrounded',
layout : 'fit',
border : false

}]
})



Thanks, Dan

evant
5 May 2013, 2:11 PM
It would have worked if you gave viewport-target an appropriate layout, but it had no layout so the grid was left to attempt to auto size.

Also, the docs say you can't dynamically add/remove regions, not items within regions.

delebash
5 May 2013, 2:41 PM
Evant,

Thank you very much for clearing that up for me, I really appreciate it! I thought I did give viewport-target a layout of fit, but I guess that is just applies to the container. So going back to the original in the items where viewport-target is specified I should just add layout: fit to the items? Still trying to work grasp the concept in the docs and vids of how layouts work.

Thanks,
Dan

evant
5 May 2013, 3:19 PM
{
xtype : 'container',
region : 'center',
id : 'centerRegion',
cls : 'panelrounded',
// This is a container with a layout fit
layout : 'fit',
autoHeight: true, // redundant, center region always has calculated size
items : {
// This is a panel with an auto layout (no layout specified)
// This is what your dynamic example was doing, adding the grid to viewport-target
itemId : 'viewport-target',
items: {
xtype: 'mygrid'
}
}
}

delebash
6 May 2013, 9:10 AM
Got it, thanks very much for the explanation. I think I understand the hierarchy, items is just another layer. Since xtype is not specified it defaults to Panel and therefore inherits all properties of Panel such as layout. I understand now :)

Thanks,
Dan