代码之家 › 专栏 › 技术社区 › Sebastian

如何使用Sencha Touch在输入字段内放置按钮?

sencha-touch

Sebastian · 技术社区 · 11 年前

当我试图将容器作为组件放入文本字段时(根据 Button inside of an input field Sencha Touch 2.0 )我的应用程序崩溃。下面的代码是为了让你了解上下文,我没有仔细检查文章中的语法,但当我注释掉最后一项时,它很好。我认为是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'
            }
           ]
       },
})

1 回复 | 直到 9 年前

Martin 11 年前

你是对的。问题是文本字段中的容器。

当生成并初始化文本字段时,它将设置其原始值。由于您已经将组件更改为容器,并且它不再是输入,因此您会遇到问题。初始化过程调用组件的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 )如果您想像普通字段一样使用buttonfield。因此,您将所有textfield方法调用委托给包装的textfield。但现在这应该很容易。