2

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.


Eureka! I figured it out! The below answer is in the form of a library I'm writing but it should be relatively easy to follow.

As it turns out, the best course of action (as far as I can tell) is to first using a separate function, build an object from the target object containing all the property paths:

/**
 * Returns an object containing all of the property paths of an object. Each
 * property path is referenced by the property name.
 * @param {object} The object to target
 * @return {object} Object containing paths ELSE undefined
 */
paths: function( obj, path, lastKey, nextKey ) {
    var o, key,
        path = path ? path : {},
        lastKey = lastKey ? lastKey : "",
        nextKey = nextKey ? nextKey : "";

    for ( o in obj ) {      

        // Push path onto stack
        path[o] = (nextKey + "." + lastKey + "." + o).replace(/^[.]+/g, "");

        // Pass updated "nextKey" along with next recurse
        key = nextKey + "." + lastKey;

        // Call again on all nested objects
        if ( (lib).isPlainObject(obj[o]) ) {
            (lib).paths(obj[o], path, o, key);
        }
    }

    return (lib).len(path) ? path : undefined;
},

Then we use the resolve method as a "wrapper" to the paths method, returning the targeted property key's namespace.

resolve: function( obj, key ) {     
    return (lib).paths(obj)[key];
},

Using the object I posted originally above:

var res = o.resolve(obj, "A_2_b_1");
// Returns "A.A_2.A_2_b.A_2_b_1"

Just for reference, the paths method returns an object that looks something like this:

// {
    // A: [...]
    // A_1: [...]
    // A_2: [...]
    // A_2_a: [...]
    // A_2_b: [...]
    // A_2_b_1: [
    //  0: "A_2_b_1"
    //  1: "A.A_2.A_2_b.A_2_b_1"
    // ]
    // A_2_b_2: [...]
    // A_2_c: [...]
    // A_3: [...]
    // B: [...]
    // ...
// }

Where each property maps to its path in the object.

4

2 回答 2

0

感谢所有试图帮助我解决这个问题的人。我能够弄清楚我的错在哪里。对于我的文本字段,我应该只使用id:标签而不是name:这里itemId是那些关心的人的工作代码。

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;
}
于 2013-02-06T22:55:32.477 回答
0

itemId 对于特定容器是本地的,getCmp() 只会检索组件的全局 id。

执行以下操作会容易得多:

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;
}
于 2013-02-04T23:25:48.717 回答