PDA

View Full Version : Dynamically add items on button click



jesseml
11 Jun 2015, 8:34 AM
I'd like to have a fieldset with a button that will add two new textfields. Pretty new to ExtJS so I'm not quite sure how to accomplish this here is what I have so far. The Ext.getCmp('customFieldsPanel') call is undefined. Also the layout the two text fields come back in is kinda wonky.


{
itemId: 'customLabelFieldSet',
xtype: 'fieldset',
title: 'Custom Labels',
autoScroll: true,
layout: 'fit',
hidden: false,
items: [{
itemId: 'addCustomLabel',
xtype: 'button',
text: 'Add Custom Label',
handler: function () {
var container = Ext.getCmp('customFieldsPanel');
container.add({
xtype: 'textfield',
fieldLabel: 'Label',
name: 'Label',
allowBlank: true
},
{
xtype: 'textfield',
fieldLabel: 'Value',
name: 'value',
allowBlank: true
});
}
},
{
xtype: 'panel',
itemId: 'customFieldsPanel',
width: '100%',
height: 300,
autoScroll: true,
items: []
}]
}

Gary Schlosberg
11 Jun 2015, 1:20 PM
Perhaps you can render the textfields hidden and show them when the button is clicked:
https://fiddle.sencha.com/#fiddle/oh5

jesseml
11 Jun 2015, 1:22 PM
I don't know how many of these fields the user will require, which is why I want to give them the option to add them on the fly

jdkhamba
12 Jun 2015, 5:24 AM
Why not just call "add" on fieldset?


Ext.create('Ext.form.Panel', {
title: 'Simple Form with FieldSets',
labelWidth: 75, // label settings here cascade unless overridden
url: 'save-form.php',
frame: true,
bodyStyle: 'padding:5px 5px 0',
width: 550,
renderTo: Ext.getBody(),
layout: 'column', // arrange fieldsets side by side
items: [{
// Fieldset in Column 1 - collapsible via toggle button
xtype: 'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
layout: 'anchor',
items: [{
itemId: 'addCustomLabel',
xtype: 'button',
text: 'Add Custom Label',
handler: function(button) {
var me = this;
me.up('fieldset').add({
xtype: 'textfield',
fieldLabel: 'Label',
name: 'Label',
allowBlank: true

});
me.up('panel').doComponentLayout();
}
}]
}]
});

jesseml
12 Jun 2015, 6:56 AM
jdkhamba,
The code you gave me works great, but the only issue is the labels are scrolling off the page and no scrollbar is present. I have autoScroll: true
Any ideas?

Forgot to mention all my components are inside a view using define. So I assume the doComponentLayout needs to be on the view not the panel?


Ext.define('WT.view.MeterDetail', {
extend: 'Ext.form.Panel',
alias: 'widget.wt-view-meterDetail',
inject: ['timezonesStore', 'meterTypesStore', 'sensorsStore', 'productionCompaniesStore', 'regionsStore'],
requires: ['WT.controller.MeterDetailController', 'Ext.form.FieldSet'],
controller: 'WT.controller.MeterDetailController',
titleAlign: 'center',
config: {
timezonesStore: null,
meterTypesStore: null,
sensorsStore: null,
productionCompaniesStore: null,
regionsStore: null,
data: null
},
bodyPadding: 10,
initComponent: function () {
Ext.apply(this, {
layout: 'anchor',
defaults: {
anchor: '50%'
},
fieldDefaults: {
labelWidth: 125
},tbar: [{

xtype: 'button',
action: 'back',
iconCls: 'back',
scale: 'large',
text: 'Meters',
itemId: 'returnToMeters'
}, '->', {
xtype: 'tbtext',
itemId: 'toolbarTitle',
cls: 'toolbar-title',
text: 'Detail'
}, '->', {
xtype: 'button',
action: 'save',
iconCls: 'save',
scale: 'large',
text: 'Save',
itemId: 'save',
formBind: true
}],
items: [

jdkhamba
12 Jun 2015, 7:25 AM
autoScroll will help only when you have fixed height. If your autoScroll: true is on the fieldset, then give it a fixed height and/or width if necessary. The doComponentLayout() is probably not required at all since the "add" should just take care of it.