Question

我有一个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();
        });
    },

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

屏幕截图：

enter image description here

更新：

我尝试将加载的组件动态添加到手风琴中，而不是作为手风琴中面板的内容添加。我没有这样做，而是覆盖完整的手风琴（我将手风琴的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（导航树）。 Sooooo ......这是可能的。现在找到正确的事件集来正确地进行渲染。

这让我想到了我想放置网格的面板，是隐藏的，还没有布局。我试图确保listPanel首先展开，并且明确doLayout面板，在超时过后执行了netzkeLoadComponent，但都可以使用。我很亲密，但仍然没有雪茄:)

请帮忙:)

Answer 1

我找到了修复程序。关键是要将虚拟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

然后我的treepanel上的click功能变为：

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

现在它起作用了，简单易行，花了一段时间才发现：）

使用netzke使面板可以旋转

1 个答案: