ExtJs: How to generate dynamic or generic data fields?

How can I generate dynamic form fields? Currently, the data gets a load from a JSON file via a viewModel. Then it gets bind to some data fields of a panel like my example and current state below:

Configuration.json --> shall get extended with more entries


"configuration": [

"name": "firstargument",
"value": "123",
"type": "string"
//I would like to extend that file later with more different data fields and data types
]



ViewModel: Configuration.js --> have to load the multiple entries here somehow

Ext.define('QuickApp.model.Configuration',
extend: 'Ext.app.ViewModel',

alias: 'viewmodel.configuration',

data:
name: '', //here I need a data set with multiple entries
value: ''
,

constructor: function(config)
var vm = this;

this.callParent(arguments);

vm.setStores(
info:
fields: ['name','value'],
proxy:
type: 'ajax',
url: 'app/Configuration.json',
reader:
tyoe: 'json',
rootProperty: 'configuration'

,
autoLoad: true,
listeners: //Or maybe some for each magic here? I don't know the syntax...
load: function(store, records)
vm.set('name', store.getAt(0).get('name'));
vm.set('value', store.getAt(0).get('value'));



);

);


Configurationplugin.js --> How can I create multiple and dynamic/generic childs here?

Ext.define('QuickApp.view.configurationplugin.Configurationplugin',
extend: 'Ext.form.Panel',
alias: 'widget.configurationplugin',

title: 'Configuration Plugin',
modal: true,
draggable: true,
floating: true,
bodyPadding: 10,
width: 300,
centered: true,

viewModel:
type: 'configuration'
,

items: [
xtype: 'textfield', //and how can I add multiple childs then here depending on the given types?
name: 'firstargument',
bind:
label: 'name',
value: 'value',
,
,
xtype: 'toolbar',
docked: 'bottom',
items: ['->',
xtype: 'button',
text: 'Submit',
iconCls: 'x-fa fa-check',
handler: function()
this.up('configurationplugin').destroy();

,
xtype: 'button',
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: function()
this.up('configurationplugin').destroy();

],
],
);


I know, it's a lot of code. But I would be grateful for any hints! The current code is working fine, just with one single data. Thank you a lot!

1 Answer
1

You could use initialize event for formpanel and add() method to adding component based on type.

initialize

formpanel

add()

You can directly add component, pass the config like name or label. And you can also use binding.

name

label

binding

You can check here with working Fiddle

CODE SNIPPET

Ext.application(
name: 'Fiddle',

launch: function ()

Ext.create('Ext.data.Store',
fields: ['name', 'value'],
storeId: 'configuration',
proxy:
type: 'ajax',
url: 'Configuration.json',
reader:
tyoe: 'json',
rootProperty: 'configuration'

,
autoLoad: true
)

Ext.define('QuickApp.model.Configuration',
extend: 'Ext.app.ViewModel',

alias: 'viewmodel.configuration'
);

Ext.define('QuickApp.view.configurationplugin.Configurationplugin',
extend: 'Ext.form.Panel',
alias: 'widget.configurationplugin',

title: 'Configuration Plugin',

modal: true,

draggable: true,

floating: true,

bodyPadding: 10,
width: 300,
centered: true,

viewModel:
type: 'configuration'
,

listeners:
initialize: function ()

var me = this,
items = ,
xtypes =
'string': 'textfield',
'number': 'numberfield'
,
vm = me.getViewModel();

Ext.getStore('configuration').each(rec =>
let name = rec.get('name'),
value = name + 'Value';

items.push(
xtype: xtypes[rec.get('type')],
bind:
label: `$name`,
value: `$value`,
name: `$name`

);
vm.set(
[name]: name, [value]: rec.get('value')
)
);

/*
You colud direcly add like this without binding
items.push(
xtype: xtypes[rec.get('type')],
label:name,
value:rec.get('value')
name:name
);*/

items.push(
xtype: 'toolbar',
docked: 'bottom',
items: ['->',
xtype: 'button',
text: 'Submit',
iconCls: 'x-fa fa-check',
handler: function ()
this.up('configurationplugin').destroy();

,
xtype: 'button',
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: function ()
this.up('configurationplugin').destroy();

]
)
this.add(items)


);

Ext.create(
xtype: 'container',
fullscreen: true,
items: [
xtype: 'button',
margin: 5,
ui: 'action',
text: 'Create form',
handler: function (btn)
Ext.create(
xtype: 'configurationplugin',
).showBy(btn);

]
);

);


$name

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.