Question

我正在尝试通过SDK向Confluence添加Rally应用。我很成功，然后，应用程序扩展以填充整个页面，包括Confluence标题。如何限制应用扩展全屏？我添加了一个限制应用程序高度和宽度的类，但它仍然会扩展到覆盖Confluence标题的全屏。

这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hierarchical Grid Example</title>
<script type="text/javascript"
    src="https://rally1.rallydev.com/apps/2.0rc3/sdk.js">
</script>
<script type="text/javascript">
    Ext.override('Rally.sdk.Bootstrapper', {
        _launchAppInViewport: function (className, settings, timeboxScope) {
            this._wireIoHeaderHandlers();
            this.app = this._createApp(className, settings, timeboxScope);
            this.app.render('rallyDiv');
        }
    });
        Rally.onReady(function() {
        Ext.define('Rally.example.HierarchicalGrid', {
                extend: 'Rally.app.App',
                componentCls: 'app',
                items: [
                { xtype: 'container', itemId: 'rallyDiv'}
                ],
                autoCreateViewPort:false,
                launch: function() {
                    Ext.create('Rally.data.wsapi.TreeStoreBuilder').build({
                        context: {project: '/project/9400054800'},
                        models: ['userstory'],
                        autoLoad: true,
                        enableHierarchy: true
                    }).then({
                        success: this._onStoreBuilt,
                        scope: this
                    });
                },            
                _onStoreBuilt: function(store) {
                    this.down('#rallyDiv').add({
                        xtype: 'rallytreegrid',
                        context: this.getContext(),
                        store: store,
                        columnCfgs: [
                            'Name',
                            'ScheduleState',
                            'Owner'
                        ]
                    });
                }
            });

            Rally.launchApp('Rally.example.HierarchicalGrid', {
              name: 'Hierarchical Grid Example',
            });
        });
    </script>
</head>

<body>
<div id="rallyDiv"></div>
</body>
</html>

谢谢！

Answer 1

应用程序旨在填充整个窗口并使用Viewport对象执行此操作 - 这就是填充屏幕的原因。是否可以在汇合中创建一个适当大小的iframe并链接到其他地方提供的App-external.html？

否则，您应该能够在App.js的顶部添加一个小覆盖，以更改Rally.launchApp的行为以执行您想要的操作：

Ext.override('Rally.sdk.Bootstrapper', {
    _launchAppInViewport: function (className, settings, timeboxScope) {
        this._wireIoHeaderHandlers();
        this.app = this._createApp(className, settings, timeboxScope);

        //this is the code that launches the app in the viewport
        //Ext.create('Ext.Viewport', {
        //    layout: 'fit',
        //    items: [ this.app ]
        //});

        //instead, just render it to your target div
        this.app.render('myElement');
    }
});

这不是理想的，但应该适合你。我将提交功能请求，以便更好地支持在非全屏环境中呈现应用。

应用程序在Confluence中扩展为全屏

1 个答案: