Extjs如何获取正确的组件答案

【问题标题】：Extjs how to get to the right componentExtjs如何获取正确的组件
【发布时间】：2014-11-24 15:48:32
【问题描述】：

我正在创建一个 Sencha touch xtype，它将包含一个不可见的输入文件和一个按钮；我想在按下按钮时触发弹出窗口以选择文件。这是我到目前为止所做的：

config: {
    baseCls: 'imageFileField',
    layout: 'hbox',
    items: [
        {
            xtype: 'label',
            baseCls: Ext.baseCSSPrefix + 'form-label'
        },
        {
            xtype: 'container',
            layout: 'hbox',
            flex: 1,
            items: [
                {
                    xtype: 'filefield',
                    hidden: true,
                    listeners: {
                        afterrender: function (cmp) {
                            cmp.fileInputEl.set({
                                accept: 'image/*'
                            });
                        }
                    }
                },
                {
                    xtype: 'label',
                    baseCls: Ext.baseCSSPrefix + 'form-label'
                },
                {
                    xtype: 'button',
                    margin: '5px',
                    docked: 'right',
                    ui: 'base_button',
                    iconCls: '',
                    width: '50px',
                    listeners: {
                        tap: function (view, e, eOpts) {

                        }
                    }
                }
            ]
        }
    ]
},

我知道我应该在 tap 方法中添加一些东西，以导航到项目然后触发事件。我尝试使用 this.up()/down(...) 但我一直无法获得不可见的输入。到达那里的正确“路径”是什么？

【问题讨论】：

标签： javascript extjs sencha-touch

【解决方案1】：

您可以使用 Ext.ComponentQuery 找到您的元素并设置其属性。要找到您的元素，您必须首先将 itemId 分配给它。

xtype: 'filefield',
hidden: true,
itemId: 'chooseFile',
listeners: {
              afterrender: function (cmp) {
                  cmp.fileInputEl.set({
                  accept: 'image/*'
                  });
               }
            }

然后你可以把下面的代码放到你按钮的监听事件中。

listeners: {
               tap: function (view, e, eOpts) {
                      Ext.ComponentQuery.query("container > #chooseFile").show();
                    }
           }

【讨论】：

用 Ext.ComponentQuery.query("#chooseFile") 我终于选择了它，但是当 show() 方法没有显示选择文件的弹出窗口时...
试试 Ext.ComponentQuery.query("container > #chooseFile").hidden(false);
我已经有一段时间没有删除 'hidden:true' 行了，它没有被触发。
Ext.ComponentQuery.query("#chooseFile")[0].show();在括号后使用 [0]

【解决方案2】：

我已将所有控件放入控制器并正常工作：-

  refs: {
        filefield: 'filefield[name="fileField"]',
        fileBtn: 'button[name="fileBtn"]'
    },

    control: {
        "fileBtn": {
            tap: function() {
                this.getFilefield().show();
            }
        }
    }

【讨论】：