1

Rally アプリ 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 テーブルが表示されます 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 では、コンポーネントをレンダリングする方法が 2 つあります。1 つ目は、xtype を持つ構成オブジェクトをコンテナーに追加することです。それは this.add(); です。アプリの行。2 つ目は、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' }
    ]
});

そして、次のように launch メソッドにコンテンツを追加できます。

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

キャンバスの質問に関する限り、わかりません。特定のエラーの詳細を別の質問として投稿することをお勧めします。

于 2013-01-30T11:56:25.990 に答える