PDA

View Full Version : Grid AutoHeight



vardhan22
2 Jun 2014, 3:02 AM
Hi

Description:
I have a tabpanel, with two tabs.




Ext.define('App.view.panels.MainTabPanel',{
extend : 'Ext.tab.Panel',
alias:'widget.mainTabPanel',
activeTab: 0,

items :[
{
title: 'Tab A',
layout: 'fit',
items:[
{
xtype:'container',
id:'myContainer',
autoScroll:true,
layout:'anchor',
anchor:'100%',
style:{
overflow:'auto'
}
}
]
},
{
// The second tab
}
]


});


To the first tab, i need to add grid , dynamically. Number of grids can be anything.

Everything is working fine except

In IE (tested in IE 9):
All the grids are showing vertical scroll bars as well as outer panel(myContainer). I want vertical Scroll bars set only to myContainer not to grids.

in Chrome
It looks as expected. grid does not have vertical scroll bars. Only outer panel as scroll bar

The mainTabPanel mentioned above is added to viewport, which has VBOX layout (that is my requirement)

How can i achieve AutoHeight, so that i did not see scroll bars in IE

Note: code can be wrong. i have not pasted the code, its a overview of how my panel is structured

http://www.sencha.com/forum/showthread.php?215265

The example over here explains the same, but setting grid height, causing scroll bars to appear in grid, even in Chrome

Thanks

scottmartin
2 Jun 2014, 9:15 AM
I not sure I understand your question here, and your code does not include an reference to a grid. Please note that a grid is a panel and does not need to added to another container.

Here is a small example that you can paste into our fiddle and run:
https://fiddle.sencha.com/#home



Ext.define('My.grid', {
extend : 'Ext.grid.Panel',
xtype : 'my-grid',
title : 'Grid',
store : Ext.create('Ext.data.ArrayStore', {
fields : ['name'],
data : [
['Sencha']
]
}),
columns : [
{
header : 'Name',
dataIndex : 'name'
}
]
});

Ext.application({
name : 'Fiddle',

launch : function () {

var tabPanel = Ext.createWidget('tabpanel', {
itemId : 'mytabpanel',
renderTo : Ext.getBody(),
enableTabScroll : true,

width : 600,
height : 250,
items : []
});

Ext.create('Ext.Button', {
text : 'Click me',
renderTo : Ext.getBody(),
handler : function () {
var id = tabPanel.items.length;

tabPanel.add({
title : 'text-' + id,
itemId : 'id-' + id,

//layout : 'fit',
closeAction : 'close',
closable : true,
border : false,
items : [
{
xtype : 'my-grid',
title : 'my-grid ' + id
}
]
});
}
});
}
});

vardhan22
10 Jun 2014, 11:04 PM
Please note that a grid is a panel and does not need to added to another container.

Thanks, after removing the extra container it worked beautifully. So, extra containers, not only cause performance issue, but also layout issues.

scottmartin
11 Jun 2014, 5:30 AM
Over nesting is a common mistake and it does cause numerous issues.

Glad things are working.