0

我有一个 netzke 应用程序，带有一个侧边栏和一个主要区域。在主要区域，我展示了一张地图。在侧边栏中，我有一个手风琴。在手风琴中，我有一个菜单，当单击一个菜单项时，我在手风琴的另一个面板中动态加载该项目的网格并打开该面板。

这行得通，但是网格在 y 方向上不适合面板，并且没有滚动条。这意味着我失去了分页等的底部。很重要:)

我的手风琴：

class NavigationAccordion < Netzke::Basepack::Accordion


  component :navigator do |c|
    c.workspace_id = [js_id, "workspace"].join("__")
  end

  def configure(c)
    c.active_tab = 0
    c.prevent_header = true
    c.items = [ {:title => "Search"}, :navigator, {:title => 'Data', :id => 'list_panel'}, {:title => 'Settings'}]
    super
  end

end

导航器包含菜单，在混合的 javascript 中我有以下内容：

{
    rootVisible: false,

    initComponent: function() {
        this.callParent();

        this.on('render', function() {
            this.listPanel = Ext.ComponentManager.get("list_panel");
        }, this);


        this.on('itemclick', function(view, r, item, index, e) {
            var component = r.raw.cmp;

            this.netzkeLoadComponent(component, {container: "list_panel", callback: function(cmp) {
                this.listPanel.setTitle(cmp.title);
                this.listPanel.autoScroll = true;
                cmp.autoScroll = true

            }, scope: this});

            this.listPanel.expand();
        });
    },

如您所见，我尝试使用自动滚动。网格适合，但不滚动。所以我永远无法到达底部（使用分页链接等）

截屏：

在此处输入图像描述

更新：

我尝试将加载的组件动态添加到手风琴中，而不是作为面板的内容添加到手风琴中。我没有这样做，而是覆盖了完整的手风琴（我将手风琴的 id 作为容器提供了——所以我想这是有道理的：）。但随后网格呈现完全正确。不确定是否可能，netzkeLoadComponent将新面板动态添加到手风琴。

更新 2：动态添加面板到手风琴具有相同的效果。

我能够手动添加一个面板，然后将网格添加到它，但它看起来一样。

    this.on('itemclick', function(view, r, item, index, e) {
        var component = r.raw.cmp;

        var accordion = Ext.ComponentManager.get("application_container__application__navigation_accordion");
        var p = new Ext.panel.Panel({title: 'XXX'});
        accordion.items.add(p);

        this.netzkeLoadComponent(component, {container: p, callback: function(cmp) {
            //this.listPanel.setTitle(cmp.title);
        }, scope: this});

        p.expand();

但从技术上讲，我也在做同样的事情。所以 ：（ ：（

更新2：如果我没有明确地给容器一个容器netzkeLoadComponent，网格在手风琴中正确呈现，但它取代了this（这是导航树）。呜呜……有可能。现在找到正确的事件集来正确地进行渲染。

这让我想到了我想要放置网格的面板，它是隐藏的，还没有布局。我试图确保listPanel首先扩展面板，并明确doLayout显示面板，在netzkeLoadComponent超时后进行，但一切都有效。我很接近，但仍然没有雪茄:)

请帮忙 ：）

4

1 回答 1

0

我找到了解决办法。关键是将假人声明list_panel为真正的面板，并具有适合的布局。

所以我的手风琴代码变成了：

class NavigationAccordion < Netzke::Basepack::Accordion


  component :navigator do |c|
  end

  def configure(c)
    c.active_tab = 0
    c.prevent_header = true
    c.items = [ {:title => "Search"}, 
                :navigator, 
                {:title => 'Data', :id => 'list_panel', :xtype => 'panel', :layout => 'fit'},
                {:title => 'Settings'}
              ]
    super
  end
end

然后我的树形面板上的点击功能变成了：

initComponent: function() {
  this.callParent();

  this.on('render', function() {
    this.listPanel = Ext.ComponentManager.get("list_panel");
  }, this);

  this.on('itemclick', function(view, r, item, index, e) {
    var component = r.raw.cmp;

    this.listPanel.expand();

    this.netzkeLoadComponent(component, {container: this.listPanel, callback: function(cmp) {
        this.listPanel.setTitle(cmp.title);
    }, scope: this});
  });
},

现在它可以工作了，很容易，不过我花了一段时间才找到:)

于 2013-11-22T15:13:27.353 回答