Sencha touch 如何使用Sencha Touch在输入字段中放置按钮？

当我尝试将容器作为组件放入textfield（根据）时，我的应用程序崩溃。下面的代码是为了让您了解上下文，我没有在帖子中仔细检查语法，但当我注释掉最后一项时，它工作正常。我认为是xtype:“container”生成了错误（错误是“undefined function”）。我做错了什么？我很不擅长这个

Ext.define('myapp.view.AddAdvertView', {
    extend: 'Ext.form.Panel',
    xtype: 'addadvertview',
    requires: [
        'Ext.form.FieldSet',
        'Ext.field.Text',
        'Ext.field.Number',
        'Ext.Button',
        'Ext.field.Toggle',
        'Ext.Container'
    ],

    config: {
            title: 'AddAdvertView',
            items: [
            {
                name: 'heading',
                xtype: 'textfield',
                label: 'Heading',
                border: 10,
                margin:'0 0 1 0',
            },
        {
            xtype: 'textfield',
            component: {
            xtype: 'container', 
            layout: 'hbox', 
            items: [
            {
            xtype: 'textfield', 
            flex: 3,
            }, 
            {
            xtype: 'button', 
            flex: 1, 
            text: 'test'
            }
           ]
       },
})

---

你说得对。问题在于textfield中的容器

生成并初始化文本字段时，它将设置其原始值。因为您已经将组件更改为容器，并且它不再是输入，所以您会遇到问题。初始化过程调用组件的getValue方法。不幸的是，容器没有一个，这是一个例外

这个问题的解决方案非常简单：创建自定义文本字段并重写其

getValue

方法

Ext.define("MyApp.field.ButtonField", {
    extend: "Ext.field.Text",
    xtype: "buttonfield",

    config: {
        label: 'Textfield',
        component: {
            xtype: 'container', 
            layout: 'hbox', 
            items: [
                {
                    xtype: 'textfield', 
                    flex: 3,
                }, 
                {
                    xtype: 'button', 
                    flex: 1, 
                    text: 'test'
                }
           ]
        }
    },

    getValue: function () {
        this.getComponent().down('textfield').getValue();
    },

    setLabel: function ( label ) {
        this.getComponent().down('textfield').setLabel( label );
    }
});

由于它有一个xtype，您可以按如下方式使用它：

Ext.define('MyApp.view.AddAdvertView', {
    extend: 'Ext.form.Panel',
    xtype: 'addadvertview',
    requires: [
        'Ext.form.FieldSet',
        'Ext.field.Text',
        'Ext.field.Number',
        'Ext.Button',
        'Ext.field.Toggle',
        'Ext.Container',
        'MyApp.field.ButtonField'
    ],

    config: {
        title: 'AddAdvertView',
        items: [
            {
                name: 'heading',
                xtype: 'textfield',
                label: 'Heading',
                border: 10,
                margin:'0 0 1 0',
            },
            {
                xtype: 'buttonfield',
                label: 'blub'
            }
        ]
    }
});

---

如果要像普通字段一样使用按钮字段，则必须重写其他一些方法（例如，

setValue

）。因此，您将所有textfield方法调用委托给包装的textfield。但现在应该很容易了。

我尝试了这个解决方案，效果很好。现在我想在单击按钮时获取textfield值，但我该如何做呢？我需要发起一个活动还是什么。。