PDA

View Full Version : Dynamically Removing Objects



jaise
12 Jul 2010, 9:14 AM
Below is the code in question. What I have are 2 radio buttons, that will each load a different interface for the user. In the 'oncheck', I want to see if the 'resourceTypeEquipment' was clicked before the 'resourceTypeDocument'. If so, then I want to remove the items created by the equipment radio, and add the new textfields for the document radio. However, when the elements are removed, and doLayout() is called, the radio buttons are deleted as well, and I am not sure why. Is there a different way to do this? Thank you in advance for your help!



var fieldset = new Ext.form.FieldSet({
id:'resource-fieldset' + ERMSApp.AddActivity.EditActivity.resourceCount,
autoHeight:true,
width: 575,
layout: 'column',
title:'Resource Information #' + ERMSApp.AddActivity.EditActivity.resourceCount,
bodyStyle:'padding:10px',

items:
[{
// resource type
columnWidth: ERMSApp.AddActivity.EditActivity.COLUMN_WIDTH,
layout: 'form',
bodyStyle:'padding:1px',
items:
[{
xtype: 'radio',
id: 'resourceTypeDocument' + ERMSApp.AddActivity.EditActivity.resourceCount,
fieldLabel: 'Document',
name: 'equipType' + ERMSApp.AddActivity.EditActivity.resourceCount,
inputValue: 'document'
}]
},
{
columnWidth: ERMSApp.AddActivity.EditActivity.COLUMN_WIDTH,
layout: 'form',
bodyStyle:'padding:1px',
items:
[{
xtype: 'radio',
id: 'resourceTypeEquipment' + ERMSApp.AddActivity.EditActivity.resourceCount,
fieldLabel: 'Technology / Equipment',
name: 'equipType' + ERMSApp.AddActivity.EditActivity.resourceCount,
inputValue: 'equipment'
}]
}]
}) // eo fieldset

// create event when document radio is checked
Ext.getCmp('resourceTypeDocument' + ERMSApp.AddActivity.EditActivity.resourceCount).on('check', function()
{
var fieldset = Ext.getCmp('resource-fieldset' + ERMSApp.AddActivity.EditActivity.resourceCount);

// remove elements that aren't supposed to be there
if(Ext.getCmp('equipCombo' + ERMSApp.AddActivity.EditActivity.resourceCount))
fieldset.remove(Ext.getCmp('equipCombo' + ERMSApp.AddActivity.EditActivity.resourceCount));
if(Ext.getCmp('equipGroupCombo' + ERMSApp.AddActivity.EditActivity.resourceCount))
fieldset.remove(Ext.getCmp('equipGroupCombo' + ERMSApp.AddActivity.EditActivity.resourceCount));
if(Ext.getCmp('quantityTxt' + ERMSApp.AddActivity.EditActivity.resourceCount))
fieldset.remove(Ext.getCmp('quantityTxt' + ERMSApp.AddActivity.EditActivity.resourceCount));
if(Ext.getCmp('quantityGroupTxt' + ERMSApp.AddActivity.EditActivity.resourceCount))
fieldset.remove(Ext.getCmp('quantityGroupTxt' + ERMSApp.AddActivity.EditActivity.resourceCount));

fieldset.doLayout();

fieldset.add({
layout: 'form',
bodyStyle:'padding:1px',
items:[{
xtype: 'textfield',
id: 'docAddress' + ERMSApp.AddActivity.EditActivity.resourceCount,
fieldLabel: 'Web Address',
vtype: 'url',
allowBlank: false,
width: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH*2
}]

});
fieldset.add({
layout: 'form',
bodyStyle:'padding:1px',
items:[{
xtype: 'textarea',
id: 'docDescription' + ERMSApp.AddActivity.EditActivity.resourceCount,
fieldLabel: 'Description',
allowBlank: false,
width: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH*2,
height: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH
}]
});

fieldset.doLayout();
}) // eo resourceTypeDocument

Animal
12 Jul 2010, 10:42 AM
Instead of adding/removing, I suggest a cardlayout Container which just switches between two Components.

jaise
12 Jul 2010, 11:09 AM
Well you see, the form itself is dynamic and I need to be able to change just that part of the form based on which of those radio buttons are chosen. If it is a document resource then textfields will be shown, and if it is an equipment resource then comboboxes are shown. Is there anyother way to do this besides using tabs / cards?

It seems that when I add the items after the delete, it overwrites the buttons, but even when i move the remove statements to the end of the function, they are still deleted. How is it that they are being deleted when I am not even referencing them.

Animal
12 Jul 2010, 11:18 AM
card layout. its the easiest

jaise
12 Jul 2010, 11:30 AM
Is it possible to put a card layout on a fieldset?

Animal
12 Jul 2010, 11:51 AM
Use a Container with layout: 'card'

It's two children will be FieldSets.

One FieldSet containing one UI, the other FieldSet has the other UI.

Just switch between them.

jaise
12 Jul 2010, 12:32 PM
Here is what I did from the sound of it, but I can't get it to render... I appreciate your help thus far.



// get the form to append to
var form = Ext.getCmp('agendaEditItem-form');

// increase the number of resources for this agenda
ERMSApp.AddActivity.EditActivity.resourceCount++;

var newPanel = new Ext.Panel({
id: 'edit-resource-panel',
width: 600,
autoHeight: true,
layout: 'card',
bodyStyle:'padding:10px',
bbar: [{
text:'Document',
disabled:true,
handler:function() {
newPanel.getLayout().setActiveItem(0);
newPanel.prevButton.disable();
newPanel.nextButton.enable();
}

},'->',{
text:'Equipment',
handler:function() {
newPanel.getLayout().setActiveItem(1);
newPanel.prevButton.enable();
newPanel.nextButton.disable();
}
}],
items: [{
xtype: 'fieldset',
id:'resourceDoc-fieldset' + ERMSApp.AddActivity.EditActivity.resourceCount,
autoHeight:true,
width: 575,
layout: 'column',
title:'Resource Information #' + ERMSApp.AddActivity.EditActivity.resourceCount,
bodyStyle:'padding:10px',
items: [{
layout: 'form',
bodyStyle:'padding:1px',
items:[{
xtype: 'textfield',
id: 'docAddress' + ERMSApp.AddActivity.EditActivity.resourceCount,
fieldLabel: 'Web Address',
vtype: 'url',
allowBlank: false,
width: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH*2
}]
},
{
layout: 'form',
bodyStyle:'padding:1px',
items:[{
xtype: 'textarea',
id: 'docDescription' + ERMSApp.AddActivity.EditActivity.resourceCount,
fieldLabel: 'Description',
allowBlank: false,
width: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH*2,
height: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH
}]
}]

},
{
xtype: 'fieldset',
id:'resourceEquip-fieldset' + ERMSApp.AddActivity.EditActivity.resourceCount,
autoHeight:true,
width: 575,
layout: 'column',
title:'Resource Information #' + ERMSApp.AddActivity.EditActivity.resourceCount,
bodyStyle:'padding:10px',
items: [{
layout: 'form',
columnWidth: ERMSApp.AddActivity.EditActivity.COLUMN_WIDTH,
bodyStyle:'padding:1px',
items:[{
xtype: 'combo',
id: 'equipCombo' + ERMSApp.AddActivity.EditActivity.resourceCount,
store: equipmentInfo,
fieldLabel: 'Equipment',
valueField: 'ID',
displayField: 'description',
allowBlank: false,
triggerAction: 'all',
emptyText: 'Select Equipment...',
width: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH
}]
},
{
layout: 'form',
columnWidth: ERMSApp.AddActivity.EditActivity.COLUMN_WIDTH,
bodyStyle:'padding:1px',
items:[{
xtype: 'combo',
id: 'equipGroupCombo' + ERMSApp.AddActivity.EditActivity.resourceCount,
store: equipmentGroupingInfo,
valueField: 'ID',
dispayField: 'description',
fieldLabel: 'Equipment Grouping',
allowBlank: false,
triggerAction: 'all',
emptyText: 'Select Grouping...',
width: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH
}]
},
{
layout: 'form',
columnWidth: ERMSApp.AddActivity.EditActivity.COLUMN_WIDTH,
bodyStyle:'padding:1px',
items:[{
xtype: 'numberfield',
id: 'quantityTxt' + ERMSApp.AddActivity.EditActivity.resourceCount,
fieldLabel: 'Quantity',
allowBlank: false,
width: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH/4
}]
},
{
layout: 'form',
columnWidth: ERMSApp.AddActivity.EditActivity.COLUMN_WIDTH,
bodyStyle:'padding:1px',
items:[{
xtype: 'numberfield',
id: 'quantityGroupTxt' + ERMSApp.AddActivity.EditActivity.resourceCount,
fieldLabel: 'Quantity Per Grouping',
allowBlank: false,
width: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH/4
}]
}]
}]

form.add(newPanel);
form.doLayout();

Animal
12 Jul 2010, 12:48 PM
Give it a height

jaise
12 Jul 2010, 12:58 PM
AWESOME! Thank you very much for the help. Now just as a follow up, is there a different way to do this besides using a bbar? I like having the but it looks a little out of place, seeing I'll have many of these panels.

Animal
12 Jul 2010, 1:44 PM
I don't know what you've done or what you want. I haven't read all that code.

jaise
12 Jul 2010, 1:49 PM
This interface allows the user to change the title and description of an activity. And with each activity are associated equipment and document resources. The user can click a button to add a resource, and that is where the panel comes in. It was intended to use radio buttons to define the type of resource, and then create an interface based on that. Since the radio button route didnt work, and am now using cards, I am trying to think of a way to represent switching between the 2 cards so the user can choose the type of resource. Right now I am doing that using a bbar, but I was asking if you happened to know of a better way. Thank you, sir.

Animal
12 Jul 2010, 9:17 PM
I don't understand what you do.

You can use radio buttons and hook their events to switch cards! I thought that's what you had done!

jaise
13 Jul 2010, 4:46 AM
Got it (well almost..)! The radio handlers are acting really strange! One view is always showing. I have been debugging in Firebug and both radio's event handlers are called no matter which one is clicked. Therefore, it only shows one interface after the first pass. Why is this? Thank you very much, Sir



var fieldset = new Ext.form.FieldSet({
id:'resourceDoc-fieldset' + ERMSApp.AddActivity.EditActivity.resourceCount,
autoHeight:true,
width: 575,
layout: 'column',
title:'Resource Information #' + ERMSApp.AddActivity.EditActivity.resourceCount,
bodyStyle:'padding:10px',
items:
[{
// radio buttons to choose resource type
columnWidth: ERMSApp.AddActivity.EditActivity.COLUMN_WIDTH,
layout: 'form',
bodyStyle:'padding:1px',
items:
[{
xtype: 'radio',
id: 'resourceTypeDocument' + ERMSApp.AddActivity.EditActivity.resourceCount,
fieldLabel: 'Document',
name: 'equipType' + ERMSApp.AddActivity.EditActivity.resourceCount,
inputValue: 'document',
handler: function(){
var panel = Ext.getCmp('resourcePanel' + ERMSApp.AddActivity.EditActivity.resourceCount);

panel.getLayout().setActiveItem(0);
fieldset.doLayout();
}
}]
},
{
columnWidth: ERMSApp.AddActivity.EditActivity.COLUMN_WIDTH,
layout: 'form',
bodyStyle:'padding:1px',
items:
[{
xtype: 'radio',
id: 'resourceTypeEquipment' + ERMSApp.AddActivity.EditActivity.resourceCount,
fieldLabel: 'Technology / Equipment',
name: 'equipType' + ERMSApp.AddActivity.EditActivity.resourceCount,
inputValue: 'equipment',
handler: function(){
var panel = Ext.getCmp('resourcePanel' + ERMSApp.AddActivity.EditActivity.resourceCount);

panel.getLayout().setActiveItem(1);
fieldset.doLayout();
}
}]
},
{
// the form for creating a document resource
xtype: 'panel',
id: 'resourcePanel' + ERMSApp.AddActivity.EditActivity.resourceCount,
columnWidth: ERMSApp.AddActivity.EditActivity.COLUMN_WIDTH*2,
layout: 'card',
items:
[{
xtype: 'panel',
id: 'docPanel' + ERMSApp.AddActivity.EditActivity.resourceCount,
layout: 'column',
items:
[{
layout: 'form',
bodyStyle:'padding:1px',
items:[{
xtype: 'textfield',
id: 'docAddress' + ERMSApp.AddActivity.EditActivity.resourceCount,
fieldLabel: 'Web Address',
vtype: 'url',
allowBlank: false,
width: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH*2
}]
},
{
layout: 'form',
bodyStyle:'padding:1px',
items:[{
xtype: 'textarea',
id: 'docDescription' + ERMSApp.AddActivity.EditActivity.resourceCount,
fieldLabel: 'Description',
allowBlank: false,
width: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH*2,
height: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH
}]
}]// eo doc panel items
},
{
// The form for creating an equipment resource
xtype: 'panel',
id: 'equipPanel' + ERMSApp.AddActivity.EditActivity.resourceCount,
layout: 'column',
items:
[{
layout: 'form',
columnWidth: ERMSApp.AddActivity.EditActivity.COLUMN_WIDTH,
bodyStyle:'padding:1px',
items:
[{
xtype: 'combo',
id: 'equipCombo' + ERMSApp.AddActivity.EditActivity.resourceCount,
store: equipmentInfo,
fieldLabel: 'Equipment',
valueField: 'ID',
displayField: 'description',
allowBlank: false,
triggerAction: 'all',
emptyText: 'Select Equipment...',
width: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH
}]
},
{
layout: 'form',
columnWidth: ERMSApp.AddActivity.EditActivity.COLUMN_WIDTH,
bodyStyle:'padding:1px',
items:[{
xtype: 'combo',
id: 'equipGroupCombo' + ERMSApp.AddActivity.EditActivity.resourceCount,
store: equipmentGroupingInfo,
valueField: 'ID',
dispayField: 'description',
fieldLabel: 'Equipment Grouping',
allowBlank: false,
triggerAction: 'all',
emptyText: 'Select Grouping...',
width: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH
}]
},
{
layout: 'form',
columnWidth: ERMSApp.AddActivity.EditActivity.COLUMN_WIDTH,
bodyStyle:'padding:1px',
items:[{
xtype: 'numberfield',
id: 'quantityTxt' + ERMSApp.AddActivity.EditActivity.resourceCount,
fieldLabel: 'Quantity',
allowBlank: false,
width: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH/4
}]
},
{
layout: 'form',
columnWidth: ERMSApp.AddActivity.EditActivity.COLUMN_WIDTH,
bodyStyle:'padding:1px',
items:[{
xtype: 'numberfield',
id: 'quantityGroupTxt' + ERMSApp.AddActivity.EditActivity.resourceCount,
fieldLabel: 'Quantity Per Grouping',
allowBlank: false,
width: ERMSApp.AddActivity.EditActivity.TEXTFIELD_WIDTH/4
}]
}] // eo equip panel
}] // eo resource panel
}] // eo fieldset items

}) // eo fieldset

jaise
13 Jul 2010, 5:53 AM
Yeah, Animal, this makes NO sense!