PDA

View Full Version : dynamically added form fields in columns



DavidSmithsonBluefish
24 Sep 2014, 7:07 AM
I have a form consisting of separate columns of information; each column represents a step in a process, with the first column detailing the labels for each field row, i.e.





Process Step [Step 1 Name] [Step # Name]


Completed Date [Step 1 Date Field] [Step # Date Field]


Actual Minutes [Step 1 Number Ticker] [Step # Number Ticker]


Notes [Step 1 Text Field] [Step # Text Field]


Last Mod TS [Step 1 Text Field] [Step # Text Field]


Last Mod User [Step 1 Text Field] [Step # Text Field]





I have a vague notion about adding separate columns per step, with a static column for the labels followed by a column for each step, which would be generated by looping through a datastore with each step as a separate record. My attempts to do this and understand the outcome have baffled and defeated me, however;


var processesColumns = Ext.widget({
xtype: 'panel',
layout:'hbox'
});

function addColumns(store)
{
var labelColumn = Ext.widget({
xtype: 'fieldContainer',
layout:'vbox',
items: [
{
xtype: 'textfield',
hidden: true,
name: 'Item_ID'
}, {
xtype: 'label',
text: 'Process Step'
}, {
xtype: 'label',
text: 'Completed Date'
}, {
xtype: 'label',
text: 'Actual Minutes'
}, {
xtype: 'label',
text: 'Notes'
}, {
xtype: 'label',
text: 'Last Mod TS',
style: 'line-height: 32px'
}, {
xtype: 'label',
text: 'Last Mod User'
}
]
});
processesColumns.add(labelColumn);
store.each(function(record){
var column = Ext.widget({
xtype: 'fieldContainer',
layout:'vbox',
items: [
{
xtype: 'label',
text: record.Display_Name
}, {
xtype: 'datefield',
name: record.Process_Short_Name + '_Completed_Date',
format: 'd M Y',
startDay: 1,
allowBlank: true,
editable: false,
listeners: {
specialkey: function(field, e) {
if (e.getKey() == e.DELETE) {
field.setValue('');
enableDisableRemoveButton;
}
},
focus: function(field, the, e) {
addKeyMap(field, the, e);
},
change: enableDisableRemoveButton
}
}, {
xtype: 'numberfield',
name: record.Process_Short_Name + '_Actual_Minutes',
allowBlank: true
}, {
xtype: 'textfield',
name: record.Process_Short_Name + '_Notes',
allowBlank: true
}, {
xtype: 'displayfield',
name: record.Process_Short_Name + '_Last_Mod_TS',
allowBlank: true,
editable: false,
renderer: function(value) {
return Ext.Date.format(Ext.Date.parse(value, 'Y-m-d H:i:s'), 'd M Y H:i:s');
}
}, {
xtype: 'displayfield',
name: record.Process_Short_Name + '_Last_Mod_User_ID',
allowBlank: true,
editable: false
}
]
});
processesColumns.add(column);
});
}


The processesColumns panel is then to be put into a form.panel's items listing to display the fields, but attempts to see the columns have so far not worked.

Is this the best way to create this? What are the alternatives? If this is the best way, how am I going wrong?

slemmon
1 Oct 2014, 10:40 PM
Instead of adding columns I'd probably add rows myself. The parent container / panel would have a layout of 'anchor' and the items added would be fieldcontainers where the fieldLabel would ultimately be your label column. The fieldcontainer would have an hbox layout and two items in it (comprising your next two columns) each with flex: 1.

Feel free to make a test case at https://fiddle.sencha.com and share that here if you continue to have trouble. That might help the community troubleshoot along with you as they can fork the fiddle and modify it to share code edits back.

nuputuri
18 Jan 2018, 9:09 AM
Hi,

Can you please make this example work in Fiddle ? https://fiddle.sencha.com/#view/editor&fiddle/2c34

Thanks!