Custom Object Properties in ExtJs Component

Question

Hi everyone,

How can I add custom properties into control objects in ExtJs.

For example :

var button = new Ext.Button({
    text:"something",
    id:"somethingId"
})

This control comes from server dynamically and I want to write my custom property as well like below :

var button = new Ext.Button({
    text:"something",
    id:"somethingId",
    customField : "I created this one"
})

and then I want to reach it like below :

alert(button.customField);

In my real case I am doing this type to create AsyncTreeNode at server and send them to client and append them via TreeLoader, and those nodes helps me show a picture when clicked so I want them to have a address field so I can get it in TreePanel click event which returns clicked node as well :

listeners:{
   click : function(clickedNode,eObj){
       alert(node.customFields);   
   }
}

I tried it but it said undefined. Normally since JavaScript is loose, I can easily modify objects but in this case it wouldn't work the way I expected.

Thanks in advance....

Answer 1

I've found the solution.

ExtJs is providing attributes property to get all the custom supplied attributes :

Attributes : Object The attributes supplied for the node. You can use this property to access any custom attributes you supplied.

So after I inject the custom property during initial Configuration I get them by using attributes :

listeners: {
            click: function(node) {
                $("#nodeId").val(node.id);
                if (node.isLeaf()) {
                    $("#galleryImage").attr("src", "../Galleries/" + node.attributes.image);
                }
            }
        }