Ext.each : with remove - not smart enough

[DaveC426913]

I want to delete items from my list only if they're checked.

Unfortunately, the Ext.each loop does not seem to be smart enough to know that my list is getting shorter. So by the time it gets to the end, it is trying to delete more items than currently exist.

Here is the code snippet:

 
  lineItems = Ext.getCmp("myList_textpanel").items.items;
  Ext.each(lineItems, function(o){
   var objIsChecked = o.items.items[0].checked;
   var objText = o.items.items[1].text
   console.log('checking ' + objText)
   if (objIsChecked){
    console.log('DELETING ' + objText)
    lineItems.remove(o);
   }
  });

So I check B, then click 'Clear Checked'. Here's the output:

checking A
checking B
DELETING B
checking D
checking E
checking F
checking G
checking H
Uncaught TypeError: Cannot read property 'items' of undefined

Notice that C is missing. Not only has it skipped over C, but when it gets to the end of the list, it finds itself one short. I was under the impression that a 'For each' operates ON the object, not on a prebuilt reference to where the object was.

(Maybe I can go through the list in reverse order?)

[DaveC426913]

OK, well since Sencha can't do it, at least the usual decrementing loop doesn't throw an error.

Now I've just got to figure out why it won't refresh the screen with doLayout(). Actually, it's quite strange - when I examine the objects, the items are gone, but their keys are not. Even stranger, if I then click my 'Delete All' button, all items are removed from the list EXCEPT the ones that were checked - as if those removed items are now 'ghosts' that can't be killed.

 
  lineItems = Ext.getCmp("myList_textpanel").items.items;
  for (var item=lineItems.length-1; item>=0; item-- ){
   lineItem = lineItems[item];
   var objIsChecked = lineItem.items.items[0].checked;
   var objText = lineItem.items.items[1].text
   console.log('checking ' + objText)
   if (objIsChecked){
    console.log('DELETING ' + objText)
    lineItems.remove(lineItem);
   }
  }
  Ext.getCmp("myList_textpanel").doLayout();

[tomalex0]

Hi,

I also tried to remove dom elemenets underlying my Main panel.
Similar to you i also iterated in reverse order. Now it works.

[Animal]

Now I've just got to figure out why it won't refresh the screen with doLayout(). Actually, it's quite strange - when I examine the objects, the items are gone, but their keys are not. Even stranger, if I then click my 'Delete All' button, all items are removed from the list EXCEPT the ones that were checked - as if those removed items are now 'ghosts' that can't be killed.

Seriously? You are simply removing items from a memory array that is used and managed within a MixedCollection object which is used within a Container object, and you are hoping that it will automagically update all the internal structures which reference that array?

Container.remove???

[DaveC426913]

Seriously?

Uh. If I fully understood how Sencha is doing everything, I wouldn't need to ask for help...


My understanding is that, to remove a component from a container, you call container.remove(item), then container.doLayout().

OK, I'm doing that. Why is it not working?

[DaveC426913]

OK. Got it.

lineItem.destroy();

Thanks everyone who helped me.