在 Extjs 中获取自定义字段容器内的文本字段值答案

【问题标题】：In Extjs get textfield value which is inside the custom fieldcontainer在 Extjs 中获取自定义字段容器内的文本字段值
【发布时间】：2012-07-18 12:00:00
【问题描述】：

我正在使用 extjs 4.1 并创建了一个带有 xtype:ptextfield 的自定义字段容器，它是通过扩展一个具有项目 img 和文本字段的“FieldContainer”创建的，我想要的是访问 文本字段值 来自 ptextfield，即 fieldcontainer。

Ext.onReady(function () {

    Ext.define('PTextField', {
        extend: 'Ext.form.FieldContainer',
        alias: 'widget.ptextfield',
        requires: ['Ext.form.TextField', 'Ext.Component'],
        alias: 'widget.ptextfield',
        height: 20,
        width: 170,
        fieldLabel: 'A',
        labelAlign: 'top',
        layout: {
            type: 'hbox'
        },
        BLANK_IMAGE_URL: '',

        initComponent: function () {
            var me = this;
            Ext.applyIf(me, {
                items: [{
                    xtype: 'component',
                    height: 20,
                    width: 20,
                    autoEl: {
                        tag: 'img',
                        src: Ext.BLANK_IMAGE_URL
                    }
                }, {
                    xtype: 'textfield',
                    itemId: 'textid',
                    width: 100
                }]
            });
            this.callParent(arguments);
        }
    });

    Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 400,
        width: 400,
        //layout: 'fit',
        items: [{
            xtype: 'ptextfield',
            fieldLabel: 'First Name',
            id: 'pcontainer1',
            listeners: {
                change: {
                    element: 'el', //bind to the underlying el property
                    fn: function () {
                        var me = this;
                        Ext.Ajax.request({
                            waitMsg: 'Saving changes...',
                            url: '/Home/SaveChanges',
                            jsonData: {
                                id: this.id,
                                value: this.down('#textid').getRawValue()
                            },
                            failure: function (response, options) {
                                Ext.MessageBox.alert('Warning', 'Oops...');
                            },
                            success: function (response, options) {
                                var text = response.responseText;
                                // process server response here
                                console.log('Changes saved successfully.');
                            }
                        });
                    }
                }
            }
        }, {
            xtype: 'ptextfield',
            fieldLabel: 'Last Name',
            id: 'pcontainer2'
        }]
    }).show();
});

在下面的行中，我在“this”中得到“ptextfield”字段容器，而“this.id”给了我“pcontainer1” 但我无法弄清楚如何获取位于“ptextfield”字段容器内的文本字段的“值”。

我在下面的行中遇到错误： jsonData: { id: this.id, value: this.down('#textid').getRawValue() }

错误是 - this.down('#textid') 为空（萤火虫）（铬合金）未捕获的 TypeError：无法调用 null 的方法“getRawValue” Ext.create.items.listeners.change.fn （匿名函数） Ext.apply.createListenerWrap.wrap

"this.down(#textid').getRawValue()" 应该给我textfield value，我没有得到我无法遍历。

感谢任何帮助。

【问题讨论】：

标签： javascript extjs extjs4.1

【解决方案1】：

为什么要监听容器的 html 元素的 change 事件？而不是说文本字段？

这种方式对你来说可能更简单：

把它放在 ptextfield 上：

listeners: {
                render: function(component) {
                    component.down('textfield').on('change', function() {
                        console.log(this, arguments);
                        // "this" is the textfield
                        // do your ajax here
                    });
                }

            }

【讨论】：