ExtJS Grid SelectionChange在其他控制器中触发 [英] ExtJS Grid SelectionChange is fired in other controller

问题描述

我有一个主要的应用程序与左侧的导航菜单。我的Main.js控制器处理添加了Tab的 treepanelselect 事件：

  onTreepanelSelect：function（selModel，record，index，options）{
 var mainPanel = Ext.ComponentQuery.query（'mainpanel'）[0]; 
 var newTab = mainPanel.items.findBy（
 function（tab）{
 return tab.title === record.raw.text; 
}）; 
如果（！newTab）{
 
 newTab = mainPanel.add（{
 xtype：record.raw.class_name，//这是我的View小部件名称
可关闭：true，
 iconCls：key，
 title：record.raw.text 
}）; 
} 
 mainPanel.setActiveTab（newTab）; 
}，
  

两个导航菜单项是：

• 员工（ controller.Employee ）


• 目录（ controller.Catalog ）

controller.Catalog 是我的控制器，用于管理我的目录，与 controller.Employee （2个不同模块）分开100％

这是我的 controller.Catalog ：

  refs：[
 {
 ref：'grid'，
 selector：'#gridCatalog'
}]，
 init：function（application）{
 
 this.control（{
 
'grid'：{
 selectionchange：this.gridSelectionChange 
} 
}）; 
}，
 gridSelectionChange：function（model，records）{
 console.log（Catalog Row Selected）; 
}，
  

所以view.Catalogs有一个 gridCatalog 和 selectionchange 我进入我的控制台：选择目录行。

另一方面，这是我的 controller.Employee ：

  refs：[
 {
 ref：'grid'，
 selector：'#gridEmployee'
} 
]，
 init：function应用程序）{
 this.control（
 {
'grid'：{
 itemdblclick：this.gridDoubleClick 
} 
}）; 
}，
 gridDoubleClick：function（dv，record，item，index，e）{
 
 //暂时没有这里。 
 
} 
  

好的，这里是魔鬼到场的地方/ p>

当我运行我的应用程序时，我点击导航项目员工，我的选项卡使用其中的视图创建。直到这里，我们很好。

但是....当我点击我的 gridEmployee 猜中的一行什么？？我进入我的控制台：选择目录行

所以，由于某种原因， controller.Catalog 正在收听我的 gridEmployee ...我没有一个 selectionchange 事件处理程序在我的 controller.Employee 。这些文件甚至在我的应用程序文件夹中的单独的模块文件夹中。

任何线索我在做错什么？这是打破了我的头脑：（

解决方案

您的控制器正在监听来自任何网格的事件，因为它们都使用 grid init中的组件查询改进你的查询，使它不那么通用。

  init：function（application）{
 this.control（
 {
 //不要听任何网格，只需#gridEmployee 
'#gridEmployee'：{
 itemdblclick：this.gridDoubleClick 
} 
}）; 
}，
  

第二个文件

  init：function（application）{
 
 this.control {
 //不要听任何网格，只需#gridCatalog 
'#gridCatalog'：{
 selectionchange：this.gridSelectionChange 
} 
}）; 
}，
  

你似乎有一个印象，你使用的refs影响了传递到 this.control 的组件查询，但它不请参阅 http：// docs - 或者/

I have a main application with a left navigation menu. My Main.js controller handles the treepanelselect event where a Tab is added:

onTreepanelSelect: function (selModel, record, index, options) {
        var mainPanel = Ext.ComponentQuery.query('mainpanel')[0];
        var newTab = mainPanel.items.findBy(
                  function (tab) {
                      return tab.title === record.raw.text;
                  });
        if (!newTab) {

            newTab = mainPanel.add({
                xtype: record.raw.class_name, // this is my View widget name
                closable: true,
                iconCls: "key",
                title: record.raw.text
            });
        }
        mainPanel.setActiveTab(newTab);
    },

Two of the Navigation menu items are:

• Employee (controller.Employee)
• Catalog (controller.Catalog)

controller.Catalog is my controller for managing my catalogs and is 100% separate from controller.Employee (2 different modules)

Here is my controller.Catalog:

refs: [
    {
        ref: 'grid',
        selector: '#gridCatalog'
    }],
    init: function (application) {

        this.control({

            'grid': {
                selectionchange: this.gridSelectionChange
            }
        });
    },
 gridSelectionChange: function (model, records) {        
        console.log("Catalog Row Selected");
    },

So the view.Catalogs has a gridCatalog and on selectionchange I get in my console: Catalog Row Selected.

On the other side, here is my controller.Employee:

 refs: [
        {
            ref: 'grid',
            selector: '#gridEmployee'
        }
    ],
    init: function (application) {
        this.control(
             {
                 'grid': {
                     itemdblclick: this.gridDoubleClick
                 }
             });
    },
gridDoubleClick: function (dv, record, item, index, e) {

       // nothing here for the moment.

    }

Ok, here is where the Devil comes to scene.

When I run my application, then I click my navigation item "Employee" and my tab is created with the view inside it. Until here we are fine.

But.... when I click one of the rows of my gridEmployee guess what?? I get in my console: Catalog Row Selected.

So, for some reason the controller.Catalog is listening to my gridEmployee... I don't have a selectionchange event handler in my controller.Employee. Those file are even in separate module folders inside my "app" folder.

Any clue on what I'm doing wrong? This is breaking my head :(

解决方案

Both your controllers are listening to events from any grid since they are both using the grid component query inside init`. Improve your query so that it's not so generic.

    init: function (application) {
        this.control(
             {
                 // Don't listen to any grid, just #gridEmployee
                 '#gridEmployee': {
                     itemdblclick: this.gridDoubleClick
                 }
             });
    },

Second file

    init: function (application) {

        this.control({
            // Don't listen to any grid, just #gridCatalog
            '#gridCatalog': {
                selectionchange: this.gridSelectionChange
            }
        });
    },

You seem to have been under the impression that what you use for the refs affected the component query that is passed into this.control, but it doesn't See http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext.app.Controller-method-control

这篇关于ExtJS Grid SelectionChange在其他控制器中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！