Question

我有一个使用extjs 4.1沙盒图表的extjs 3.4应用程序。我唯一的问题是，在IE8中，一旦从tabpanel布局激活或从卡片布局调用时，它们就不能完全渲染。

代码没什么特别之处：

var barBreakdownChart = Ext4.create('Ext4.chart.Chart', {
    renderTo: Ext.get('barBreakdownDiv').dom,
    width: 550,
    height: 300,
    animate: true,
    store: geosPeerChartStore,
    legend: true,
    axes: [{
        type: 'Numeric',
        position: 'left',
        title: 'Days of Supply',
        fields: ['line1', 'line2', 'line3', 'line4', 'line5'],
        label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },
        labelTitle: {
          font: '14px "Lucida Grande"'
        },
        grid: true,
        minimum: 0
    }, {
        type: 'Category',
        position: 'bottom',
        // label: {
        //     rotate: {
        //         degrees: 315
        //     }
        // },
        fields: ['name']
    }],
    series: [{
        type: 'column',
        fill: true,
        //title: 'Current Year',
        axis: 'left',
        highlight: true,
        tips: {
            trackMouse: true,
            width: 140,
            height: 28,
            renderer: function (storeItem, item) {
                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('line1') + ' $');
            }
        },
        xField: 'name',
        yField: ['line1', 'line2', 'line3', 'line4', 'line5']
        ,title: ['2008', '2009', '2010', '2011', '2012']
    }]
});

然后这里是在tabpanel中调用图表的地方：

        items: [{
            xtype: 'tabpanel',
            style: 'margin-bottom: 10px;',
            height: 400,
            deferredRender: false,
            defaults: {
                hideMode: 'offsets'
            },
            activeTab: 0,
            items: [{
                title: 'Line Chart',
                items: lineBreakdownContainer
            }, {
                xtype:'panel',
                html: '<div id="barBreakdownDiv"> </div>'
            }]

Answer 1

问题可能与风格有关。尝试使用另一个css（即ext-ie-debug.css）而不是资源/ css / ext-all.css

在tabpanel和卡布局内的Extjs沙盒图表

1 个答案: