Question

我正在使用ExtJS门户面板示例来实现其拖放功能。我已经根据我的需要对其进行了定制，但是一般拖动功能和拖放区域与示例中的配置完全相同。我们必须实现的下一步是保存页面的状态，即需要以正确的列和顺序加载portlet。

我已经想出如何保存我们数据库中所需的数据但我的问题是我不知道如何应用这个＆＃34; state＆＃34;。现在，portlet根据来自Ajax请求的一些配置加载到数据库。但是，数据库本身不包含有关哪个列或portlet的顺序的数据，因为这是从我们的状态提供程序保存在另一个表中的。加载状态后，我可以解码有关哪个列以及portlet应该出现的顺序的数据，但这不会有帮助，因为我无法相应地移动它们。我不能举例说：Move portlet 1 to column 3 row 2。有没有办法实现这个目标？

我正在寻找的东西类似于：

updatePortletPos: function(portlet, position) {
  portlet.setColumn(position.x);
  portlet.setRow(position.y);
}

在调用此方法之后，portlet应该更改其位置，就像它被拖动到第一个portlet正下方的第3列一样。

Answer 1

这是我的解决方案。我有3个小部件列。对于每一列，我使用窗口小部件名称保存一个数组，并在加载时恢复序列。数据保存在状态提供程序中（在我的例子中保存到浏览器本地存储中）。

移动小部件时保存状态：

Ext.define('Example.PortalPanel', {
    extend: 'Ext.panel.Panel',
    // ...
    getState: function () {
        var state = {};

        for (var i = 0; i < 3; i++) {
            var columnItems = this.items.getAt(i).items;
            state["column" + i] = [];
            for (var j = 0; j < columnItems.length; j++) {
                state["column" + i].push(columnItems.getAt(j).stateId);
            }
        }

        return state;
    }
}

这里是从状态值恢复小部件：

Ext.define('Example.PortletPanel', {
    extend: 'Example.PortalPanel',
    initComponent: function () {
        //...
        var state = Ext.state.Manager.getProvider().get(this.getStateId());

        Ext.apply(this, {
            // ...
            items: [
                {
                    // column 1
                    items: []
                },
                {
                    // column 2
                    items: []
                },
                {
                    // column 3
                    items: []
                }
            ]
        });
        // insert the widgets to the columns according to their order in the state provider
        if (state) {
            for (var i = 0; i < 3; i++) {
                var column = state["column" + i];
                if (column) {
                    for (var j = 0; j < column.length; j++) {
                        this.items[i].items.push(this.findWidgetByName(widgets, column[j]));
                    }
                }
            }
        }
    },
    /**
     * Finds and returns a widget by name from an array with widgets
     */
    findWidgetByName: function (widgets, name) {
        //  ... 
    },
    /**
     * Create a widget instance according to the type ot the widget
     * @returns {Array}
     */
    generateWidgets: function () {
        //  ... my widgets are generated on the fly, receiving configuration and the data from server according to the current logged in user
    }
}

我认为这不是最佳解决方案，但它确实有效。

以编程方式更改ExtJS中的portlet位置

1 个答案: