Extjs - Advanced / Miscellaneous Stuffs

extjs
Extending

How can we replace a given component in place?

function saveRawJSON() {
    var compId = Ext.getCmp('compId').getValue();
    var json = Ext.getCmp('editRawJSONForm_textarea').getValue();
    var cmp = Ext.getCmp(compId);
    var parent = cmp.up();
    parent.items.each(function(c,i) {
        if (c == cmp) {
            //cmp.destroy();
            parent.remove(cmp,true);
            var jsonObj = Ext.decode(json);
            var newCmp = new Ext.Component(jsonObj);
            parent.insert(i, newCmp);
        }
    });
    parent.updateLayout();
    Ext.getCmp('editRawJSONWindow').destroy();
}

In the above code, given that there is a form which has a hidden field that contains the ID of a component, and a textarea (given the id 'editRawJSONForm_textarea') which contains the JSON representing the component, the above code get the ID of the component that is being editted from the hidden field, and the JSON representing the editted component from the textarea. It then fetch the existing component (that is being editted) from Ext JS, then it use the up method to locate the parent. It then loop over the parent's children using the each function. Notice that we have the i variable which represent the index of each component within the parent. It then use parent.remove(cmp, true) to destroy the compoent, and then it creates a new instance, and then use parent.insert to insert the new instance.

How can we create a component given its JSON?

var newCmp = new Ext.Component(jsonObj);
var newCmp = Ext.create(jsonObj);
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License