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>
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>