PDA

View Full Version : Datefield in extended panel's toolbar overlaps other toolbar items



dpaquin
11 Jul 2011, 2:31 PM
The following code almost works perfectly, except for the 'ChartDateBar' element. When initially rendered for the first tab, this toolbar is displayed correctly. However, when the user selects the next tab ('Tab 2') the 'Refresh' buttons disappears behind the Datefield in the middle toolbar. Using firebug it would seem that the width of the div created around this datefield is very small (allowing the button to move behind it) as compared to Tab 1, which is the correct spacing.

I'm still fairly new to ExtJS so I wouldn't be surprised if I'm just doing something wrong - any advice would be appreciated!




<script type="text/javascript">

// datastore for chart
meterStore = new Ext.data.SimpleStore(
{
fields: ['id', {name: 'timestamp', type: 'date'}, {name: 'value', type: 'float'}],
data: [[1, '2011-01-01', 15],[1, '2011-01-02', 20]]
});

// a datapoint view panel
DatapointView = Ext.extend(Ext.Panel, {

border: false,
height: 500,

initComponent: function() {

// column model for data grid
var cm = new Ext.grid.CheckboxSelectionModel();

// toolbar at very top, with % loaded and date ranges
var MeterStatusBar = new Ext.Toolbar({
items: [
new Ext.ProgressBar({
text: 'Loading...',
id: 'meterProgressBar',
width: 150
}),
' ',
new Ext.Toolbar.TextItem({
text: 'Loading...',
id: 'meterProgressText'
})
]
});

// date selection toolbar for chart
var ChartDateBar = new Ext.Toolbar({
items: [{
xtype: 'tbtext',
text: 'Day: '
},{
id: 'chartDayField',
xtype: 'datefield',
format: 'Y-m-d'
},{
xtype: 'tbspacer',
width: 5
},{
xtype: 'button',
text: 'Refresh',
iconCls: 'button-refresh',
handler: function() {
alert('This should refresh the DS, but it doesn\'t yet');
}
}]
});

// chart panel with date range toolbar on bottom
var MeterChartPanel = new Ext.Panel({
border: false,
height: 200,

bbar: ChartDateBar,

items: [
new Ext.Panel({
html: 'this is where the chart will go'
})
]
});

// data grid with buttons at bottom
var MeterDataGrid = new Ext.Panel({
border: false,
layout: 'fit',

bbar: new Ext.Toolbar({
items: [{
text: 'Save Changes'
},{
text: 'Import Data'
}]
}),

items: [
new Ext.grid.GridPanel({
border: false,
height: 240,
title: 'Datapoint Data',
store: meterStore,
frame: true,
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
cm,
{
id: 'timestamp',
dataIndex: 'timestamp',
header: 'Timestamp',
xtype: 'datecolumn',
format: 'Y-m-d H:i:s'
},{
id: 'value',
dataIndex: 'value',
header: 'Value',
xtype: 'numbercolumn'
}]
}),
viewConfig: {
forceFit: true
},
sm: cm
})
]
});

Ext.apply(this, {
tbar: MeterStatusBar,
items: [ MeterChartPanel, MeterDataGrid]
});

DatapointView.superclass.initComponent.apply(this, arguments);
},
onRender: function() {
DatapointView.superclass.onRender.apply(this, arguments);
}

});
Ext.reg('datapointView', DatapointView);

Ext.onReady(function() {

new Ext.TabPanel({
renderTo: 'meterViewMainDiv',
activeTab: 0,
border: false,
tabPosition: 'top',
id: 'meterAdvancedPanel',
items:[{
xtype: 'panel',
title: 'Tab 1',
layout: 'fit',
items: [{
xtype: 'datapointView',
datapointID: '1'
}],
},{
xtype: 'panel',
title: 'Tab 2',
layout: 'fit',
items: [{
xtype: 'datapointView',
datapointID: '2'
}]
}]
});

});
</script>

<div id="bodyContent">
<div id="meterViewMainDiv" style="margin:10px 10px 10px 30px"></div>
</div>

skirtle
14 Jul 2011, 2:17 AM
It's because of the id on the datefield. They must be unique or everything goes crazy.

I know not everyone would agree with me but my advice would be to never use static ids. They're just a convenient hack for putting together demos with 4 or 5 components, not something that should be used in any sort of real application.

dpaquin
14 Jul 2011, 9:38 AM
Ok that makes sense - thanks for the help!