PDA

View Full Version : 3.2.x fieldset remove column layout



BradHarbin
4 May 2010, 2:17 PM
I recently upgraded from 2.3 to 3.2. Currently this is in 3.2.1. I can no longer remove() a specific item from a fieldset that has a column layout. Specifically the container remove calls var c = this.getComponent(comp); and getComponent() is returning undefined on the comp object.

Working Sample of it not working: Tries to remove one of the test fields from the fieldset.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</meta>
<link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css">
</link>
<script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="ext-3.2.1/ext-all-debug.js">
</script>
<script type="text/javascript">
// Path to the blank image should point to a valid location on your server
Ext.BLANK_IMAGE_URL = 'ext-3.2.1/resources/images/default/s.gif';

Ext.onReady(function(){
var combo = new Ext.form.ComboBox({
hiddenName: 'cbx',
fieldLabel: 'Combo',
store: [['a', 'A'], ['b', 'B']],
mode: 'local',
selectOnFocus: true,
triggerAction: 'all',
emptyText: 'Select something...',
forceSelection: true,
allowBlank: false,
listeners: {
'select': function(){
fieldSet.remove(textfield1);
}
}
});

var textfield1 = new Ext.form.TextField({
fieldLabel: 'FIELD 1',
name: 'textfield1'
});
var textfield2 = new Ext.form.TextField({
fieldLabel: 'FIELD 2',
name: 'textfield2'
});

var fieldSet = new Ext.form.FieldSet({
title: 'FieldSet',
items: [{
layout: 'column',
items: [{
columnWidth: .5,
layout: 'form',
items: textfield1
}, {
columnWidth: .5,
layout: 'form',
items: textfield2
}]
}]
});

var form = new Ext.FormPanel({
border: false,
padding: '10px',
labelWidth: 150,
renderTo: Ext.getBody(),
items: [combo, fieldSet]
});
});
</script>
</head>
<body>
</body>
</html>

If I remove the column layout from the fieldset then the .remove() works as expected.

Any help or suggestions?

iqdk
4 May 2010, 5:26 PM
Did you try calling fieldset.doLayout() after the remove() call?

darthwes
4 May 2010, 5:40 PM
Did you? I did and it didn't work... How about Ext.destroy, does that accomplish your desired affect?

BradHarbin
4 May 2010, 5:40 PM
The fieldset.remove() is failing in the column layout because the getComponent() is not getting the item to remove from the fieldset. ext-all-debug.js line 11850 is the containers remove. When calling remove the "comp" variable is the correct component to remove however this.getComponent() is not finding the component in the column fieldset.

ext-all-debug.js line 11850.

remove : function(comp, autoDestroy){
this.initItems();
var c = this.getComponent(comp);
if(c && this.fireEvent('beforeremove', this, c) !== false){
this.doRemove(c, autoDestroy);
this.fireEvent('remove', this, c);
}
return c;
}

c is undefined after the getComponent() call which causes the remove to totally fail on the column fieldset. This can be seen by stepping into the code sample in the first post. If I remove the column layout then the remove's getComponenet will return c as the correct item to remove and the call is successful. So unfortunately the doLayout() will not work here since essentially the remove doesn't do anything in this case.

This same code worked correctly in 2.3.

Thank you and any suggestions on a work-a-round would be great.

BradHarbin
4 May 2010, 5:47 PM
darthwes,
It appears destroy() does the desired effect. That removed the item. What I am doing here that you wont see in the simple example i posted above is removing a field from a column layout fieldset and then rendering a new field into its old location. I was having issues with textfield.destroy() putting the form in an unstable state when rendering a new field in its location. I will move forward with the destroy() and see if I can get the render to work correctly. Thank you very much.

BradHarbin
4 May 2010, 7:14 PM
The destroy does remove the item from the fieldset, however just as I thought the fieldset is in a state after that that I cant render a new item to it. After running the .destroy() in Firebug is appears that the parent <div> in the fieldset column is gone and not just the item that was being destroyed.

As I stated in the last post the whole idea is to remove() an item from a column fieldset, render() a new item its place and add() the new item to the fieldset. This code works great in 2.3, however it appears that 3.2 has a possible bug in the column fieldset.

The code below will try to remove (it fails due to the issue in this thread) then render the new control. It works fine however the old item is not being removed so the new one is added right below it.

fieldsetField.remove(valueFieldActionTxtBox);
newField.render('x-form-el-' + fieldID);
fieldsetField.add(newField);

The code below will destroy the item however the render will fail with a el.dom is null error because it appears the destroy screws up the fieldset.

valueFieldActionTxtBox.destroy();
newField.render('x-form-el-' + fieldID);
fieldsetField.add(newField);

So it looks like destroy is not going to solve this one. I really need to find out whats up with 3.2.x and removing fields from a fieldset thats a column.

Thank you again.