Rally 渲染为div，然后导出为jpeg

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

                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
                });

this.add({
xtype:“rallycombobox”，
fieldLabel:“选择企业版本”，
宽度：“500px”，
renderTo:Ext.get（“dropdownDiv”），
storeConfig：{
自动加载：对，
模型：“程序”，
fetch:'Name，Releases，ReleaseStartDate，ReleaseDate'，
分拣机：[
{
属性：“名称”，
方向：“ASC”
}
]
},
听众：{
选择：此。\u选择，
范围：本
}
});
这个。添加({
xtype:“拉力按钮”，
文本：“导出”，
renderTo:Ext.get（“buttonDiv”），
处理程序：函数（）{
var canvas=document.getElementById（“chartDiv”）；
var img=canvas.toDataURL（“image/jpeg”）；
//.toDataURL生成错误，TypeError:canvas.toDataURL不是函数
文件。写（“”）；
}
});
这个。添加({
id:'chartCmp'，
xtype:“rallychart”，
renderTo:Ext.get（“chartDiv”），
弹性：1，
chartConfig:chartConfig
});

//这是主体陈述，删除后将显示 身体 桌子 tr 运输署 div id=“dropdownDiv”style=“高度：50px；宽度：500px；”/div /运输署 运输署 div id=“buttonDiv”style=“高度：50px；宽度：50px；”/div /运输署 /tr /桌子 div id=“chartDiv”/div

---

/body

在Ext中，有两种方法可以渲染组件。第一种方法是向容器中添加一个带有xtype的config对象。这就是this.add（）的方法；应用程序中的行。第二种方法是使用Ext.create实例化组件，并在其配置中指定renderTo

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

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

首选的方式是从那时起您的组件第一次参与应用程序的布局。另外，在应用程序中创建dom元素（特别是对于初始布局）的首选方法是通过items config，而不是应用程序正文中的静态html

因此：

然后您可以在启动方法中添加内容，如下所示：

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

---

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

在Ext中，有两种方法可以渲染组件。第一种方法是向容器中添加一个带有xtype的config对象。这就是this.add（）的方法；应用程序中的行。第二种方法是使用Ext.create实例化组件，并在其配置中指定renderTo

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

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

首选的方式是从那时起您的组件第一次参与应用程序的布局。另外，在应用程序中创建dom元素（特别是对于初始布局）的首选方法是通过items config，而不是应用程序正文中的静态html

因此：

然后您可以在启动方法中添加内容，如下所示：

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

---

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

如何使用这些项目？我不知道怎么把它们绑在一起。这些东西怎么用？我不知道如何把它们绑在一起