View Full Version : Ext.form.Panel.removeChildEls is not a function

24 Aug 2011, 6:52 AM
Using 4.0.2a:
I'm trying to write a function to selectively remove elements from a form panel and the removeChildEls function does not exist on my Ext.form.Panel object. I can write an 'each' statement to do it, I guess, but seems like we either need to remove the removeChildEls from the documentation, or correct the object. Here's an example. When the user changes the dropdown, I want to clear all the fields from the form panel, except the dropdown:

this.recurrenceForm= Ext.create('Ext.form.Panel', {
title: 'Recurring Item',
id: 'recurringform',
items: [
xtype: 'button',
text: 'this should be removed!'
xtype: 'combobox',
id: 'frequency',
queryMode: 'local',
lastQuery: '',
store: Ext.create('Ext.data.Store', {
fields: [ 'frequency' ],
data: [ { frequency: 'Daily' }, { frequency: 'Weekly' }, { frequency: 'Monthly' } ]
valueField: 'frequency',
displayField: 'frequency',
value: 'Daily',
listeners: {
select: {
fn: function(field, value) {
alert(this.recurrenceForm.id); // this returns 'recurringform'
alert(this.recurrenceForm.removeChildEls); // this returns null!
this.recurrenceForm.removeChildEls(function(o) { return ( o.id == 'frequency' ) ? false : true; }); // this should remove the button above this
scope: this


27 Aug 2011, 12:02 AM
It seems that this method is missing from 4.0.2 but it is there in 4.0.5.

However, it doesn't really matter because it won't do what you want anyway. It is for removing elements from childEls, not child components:


You'll need to use the remove() method instead.

One other thing:

function(o) { return ( o.id == 'frequency' ) ? false : true; }

can be simplified to:

function(o) { return o.id != 'frequency'; }