Question

当我尝试将容器作为组件放在文本字段中时（根据Button inside of an input field Sencha Touch 2.0），我的应用程序崩溃了。下面的代码是为了让你了解上下文，我没有仔细检查帖子中的语法，但当我注释掉最后一项时它工作正常。我认为是xtype：'container'生成错误（错误是“未定义的函数”）。我在这做错了什么？我真差...

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'
            }
           ]
       },
})

Answer 1

你是对的。问题是文本域内的容器。

生成并初始化文本字段时，它将设置其原始值。由于您已将组件更改为容器并且不再输入，因此您会遇到问题。初始化过程调用组件的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）。因此，您将所有文本字段方法调用委托给包装的文本字段。但现在应该很容易。

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

1 个答案: