Results 1 to 3 of 3

Thread: Datefield in extended panel's toolbar overlaps other toolbar items

  1. #1
    Sencha Premium Member dpaquin's Avatar
    Join Date
    Jul 2011
    Location
    Vancouver, Canada
    Posts
    31

    Default Datefield in extended panel's toolbar overlaps other toolbar items

    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!


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

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791

    Default

    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.

  3. #3
    Sencha Premium Member dpaquin's Avatar
    Join Date
    Jul 2011
    Location
    Vancouver, Canada
    Posts
    31

    Default

    Ok that makes sense - thanks for the help!

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •