1

在 Rally App SDK 2.0 中，我想显示一个下拉列表和按钮，以及下面的图表。该按钮会将图表导出（另存为）为 jpeg。1）如何指定要渲染对象的 div？下面的代码忽略了 renderTo 2) 是否有导出 jpeg 图像的示例代码？使用 Canvas 会产生错误

                this.add({
                    xtype: 'rallycombobox',
                    fieldLabel: 'Select an Enterprise Release',
                    width: '500px',
                    renderTo: Ext.get("dropdownDiv"),
                    storeConfig: {
                        autoLoad: true,
                        model: 'Program',
                        fetch: 'Name,Releases,ReleaseStartDate,ReleaseDate',
                        sorters: [
                                  {
                                      property: 'Name',
                                      direction: 'ASC'
                                  }
                        ]
                    },
                    listeners: {
                        select: this._onSelect,
                        scope: this
                    }
                });

                this.add({
                    xtype: 'rallybutton',
                    text: 'Export',
                    renderTo: Ext.get("buttonDiv"),
                    handler: function() {
                        var canvas = document.getElementById("chartDiv");
                        var img    = canvas.toDataURL("image/jpeg");
                            // .toDataURL generates error, TypeError: canvas.toDataURL is not a function
                        document.write('<img src="'+img+'"/>');
                    }
                });

                this.add({
                    id: 'chartCmp',
                    xtype: 'rallychart',
                    renderTo: Ext.get("chartDiv"),
                    flex: 1,
                    chartConfig: chartConfig
                });

// 这里是body语句，去掉了<>，所以它会显示body table tr td div id="dropdownDiv" style="height:50px; width:500px;"/div /td td div id="buttonDiv" style= "高度：50px；宽度：50px；"/div /td /tr /table div id="chartDiv"/div /body

4

1 回答 1

1

在 Ext 中有两种方法可以渲染组件。第一种是将带有 xtype 的配置对象添加到容器中。那就是 this.add(); 应用程序中的行。第二种是使用 Ext.create 实例化组件并在其配置中指定 renderTo。

this.add({xtype: 'component', html: 'hello world'});

Ext.create('Ext.Component', { html: 'hello world', renderTo: 'aDiv' });

首选方式是从那时起您的组件参与应用程序布局的第一种方式。此外，在应用程序中创建 dom 元素（尤其是初始布局）的首选方式是通过项目配置而不是应用程序主体中的静态 html。

所以：

Ext.define('My.App', {
    extend: 'Rally.app.App',
    items: [
        { xtype: 'container' itemId: 'dropdownDiv' },
        { xtype: 'container', itemId: 'chartDiv' }
    ]
});

然后你可以像这样在启动方法中添加内容：

this.down('#chartDiv').add(chartConfig);

至于你的画布问题，我不确定。您可能希望将其作为一个单独的问题发布，其中包含有关特定错误的更多详细信息。

于 2013-01-30T11:56:25.990 回答