PDA

View Full Version : Modern Grid In Tab Panel - Title Appears In Tab And Top Of Grid



kcarpenter528
11 Mar 2020, 6:12 AM
Alright - so as far as I can tell - the title of a Panel and a Grid Panel act differently when place inside of a Tab Panel.
With a Grid, the title appears in the Tab and at the top of the Grid. With a standard Panel the title only appears in the Tab. This is how I would expect the grid to behave.

Examples:
This will show the title in the Tab and the top of the grid....which seems dumb.


var tabpnl = Ext.create('Ext.tab.Panel', { height: '100%',
items: [{
xtype: 'grid',
title : 'Files',
columns : [{
text : 'File Name',
dataIndex : 'filename'
}, {
text : 'Size',
dataIndex : 'size'
}, {
text : 'Date Uploaded',
dataIndex : 'uploadedDate'
}, {
text : 'Uploaded By',
dataIndex : 'uploadedBy'
}]
}]
});

this will show the title only in the tab...which is how i want the grid to work


var tabpnl = Ext.create('Ext.tab.Panel', { height: '100%',
items: [{
xtype: 'panel',
title : 'Panel Title',
}]
});


So my questions are:
A - Why do they work differently? Is a grid not just a fancy Panel? Its titlebar config isn't just inherited from Panel? From the Docs it looks like nothing in the Gird Hierarchy actually has a title config, so I guess Grid really is on its own. Regardless are Panel and Grid not both just using TitleBar for its title configs? Shouldn't these be treated the same way by the TabPanel parent?

B - How do I get this to work the way I want it to? I want the Grid title to only show in the tab bar. My only thought is to nest the grid in a panel and set the title on the panel. But, adding another layer seems....hacky. It works, I guess.



var tabpnl = Ext.create('Ext.tab.Panel', { height: '100%',
items: [{
xtype: 'panel',
title : 'Files',
items: [{
xtype: 'grid',

columns : [{
text : 'File Name',
dataIndex : 'filename'
}, {
text : 'Size',
dataIndex : 'size'
}, {
text : 'Date Uploaded',
dataIndex : 'uploadedDate'
}, {
text : 'Uploaded By',
dataIndex : 'uploadedBy'
}]
}]

}]
});