扩展如何获得正确的组件

Extjs how to get to the right component

本文关键字：组件 何获得 扩展      更新时间：2023-09-26

我正在创建一个煎茶触摸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（...），但我从未能够获得不可见的输入。到达那里的正确"路径"是什么？

您可以使用 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();
                    }
           }

我已经将所有控件放在控制器中并且它正常工作：-

  refs: {
        filefield: 'filefield[name="fileField"]',
        fileBtn: 'button[name="fileBtn"]'
    },
    control: {
        "fileBtn": {
            tap: function() {
                this.getFilefield().show();
            }
        }
    }
相关文章：