Uncaught TypeError: Object #<Object> has no method 'getValue'

Question

I am currently attempting to add a listener to my button so that when it is clicked it loads what is in the 'textId' textfield into an html text above said textfield and button. This is so they can enter multiple things into this field and delete them if one is not needed afterwards because the text gets loaded in with a delete button.

createTextAndButton: function(fieldId, v, textId, field, text, num) {
    var n = new Number(num);
    var ct = new Ext.container.Container({
        xtype:"container",
        layout:"vbox",
        //padding:"5 0",
        items: [{
            xtype:"container",
            itemId: fieldId,
            }, {
            xtype: "container",
            layout:"hbox",
            padding: "5 0",
            items: [{
                xtype: 'textfield',
                vtype: v,
                name: textId,
                fieldLabel: field,
                validateOnBlur: true
            }, {
                xtype: "button",
                text: text,
                width: 115,
                handler: function() {
                    ct.down('#' + fieldId).add(Ext.ComponentMgr.create({
                        xtype: "container",
                        itemId: 'entry' + n,
                        layout: "hbox",
                        padding: "5 0",
                        items: [{
                            xtype: "component",
                            html: "<p>" + textId.getValue() + "</p>"
                        }, {
                            xtype: "button",
                            itemId: 'dButton',
                            text: "delete",
                            width: 80
                            }
                        }]
                    }));
                    n++;
                }
            }]
        }]
    });
    return ct;
}

I'm getting Uncaught TypeError: Object ignoreField has no method 'getValue' when I click on the button. I'm unsure why the textfields getValue method is not working or if I am doing something obviously wrong.

Answer 1

itemId is local to a particular container, getCmp() will only retrieve the global id for a component.

It would be much easier to do something like:

createTextAndButton: function(fieldId, type, v, textId, field, text) {
    var ct = new Ext.container.Container({
        xtype:"container",
        layout:"vbox",
        //padding:"5,0",
        items: [{
            xtype:"container",
            itemId: fieldId,
            },{
            xtype: "container",
            layout:"hbox",
            padding: "5 0",
            items: [{
                xtype: type,
                vtype: v,
                itemId: textId,
                fieldLabel: field,
                validateOnBlur: true
            }, {
                xtype: "button",
                text: text,
                width: 115,
                handler: function() {
                    ct.down('#' + fieldId).add(new Ext.container.Container({
                        xtype: "container",
                        padding: "5 0",
                        items: [{
                            xtype: "component",
                            autoEl: "pre",
                            html: textId.getValue()
                        }, {
                            xtype: "button",
                            text: "delete",
                            width: 115
                        }]
                    }));
                }
            }]
        }]
    });
    return ct;
}

Answer 2

Thanks to all those who attempted helping me solve this question. I was able to figure out where my fault was. for my textfields I should be using just the id: tag not name: or itemId Here is the working code for those who care.

createTextAndButton: function(fieldId,  textId, field, text, num) {
    var n = new Number(num);
    var ct = new Ext.container.Container({
        xtype:"container",
        layout:"vbox",
        //padding:"5 0",
        items: [{
            xtype:"container",
            itemId: fieldId,
            }, {
            xtype: "container",
            layout:"hbox",
            padding: "5 0",
            items: [{
                xtype: 'textfield',
                id: textId,
                fieldLabel: field,
                validateOnBlur: true
            }, {
                xtype: "button",
                text: text,
                width: 115,
                handler: function() {
                    ct.down('#' + fieldId).add(Ext.ComponentMgr.create({
                        xtype: "container",
                        Id: 'entry' + n,
                        layout: "hbox",
                        padding: "5 0",
                        items: [{
                            xtype: "component",
                            html: "<p>" + Ext.getCmp(textId).getValue() + "</p>"
                        }, {
                            xtype: "button",
                            itemId: 'dButton',
                            text: "delete",
                            width: 80
                        }]
                    }));
                    n++;
                }
            }]
        }]
    });
    return ct;
}