Trying to create a fieldset for each item in a store

Question

I'm very new to ExtJS and getting quite lost. I have created a data store -

var sections = Ext.create('Ext.data.Store', {
    data: [
        {"section" : "One"},
        {"section" : "Two"},
        {"section" : "Three"}
    ]
});

What I would like to do now is create a panel for each section, using the section name (one, two three) as the title.

I have tried a few ways, all of which are really unsuccessful. How do I go about solving this problem?

EDIT - Example of something I tried

var sectionStore = Ext.getStore(sections);
var allRecords = sectionStore || sectionStore.data("section");

allRecords.each(function(record) {
    Ext.define('Ext.panel.Panel', {
        xtype: 'panel',
        title: record,
        text: record
    })
    console.log(record)
});

as you mentioned *I have tried a few ways, all of which are really unsuccessful* provide your efforts — Narendra Jadhav, Jun 18 '18 at 10:47

score 0 · Answer 1 · answered Jun 18 '18 at 11:37

Ext.define defines classes, but you want to create new instances of the panel class and add them to the component hierarchy.

So that's what you have to do (you can add them to any existing and already rendered container component):

var parentContainer = ... 
var sectionStore = Ext.getStore(sections);
var allRecords = sectionStore || sectionStore.data("section");

allRecords.each(function(record) {
    parentContainer.add({
        xtype: 'panel',
        title: record,
        text: record
    });
});

I shall try this, but what will my parentContainer be? I was this to just display in the main view. Which is currently Ext.define('App.view.main.Main', { extend: 'Ext.Panel', xtype: 'mainview', ... — sunnyj58, Jun 18 '18 at 11:41

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

As you are using Ext.define('Ext.panel.Panel', You just only define a panel. Instead of define you need to use Ext.create().

FIDDLE

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var sections = Ext.create('Ext.data.Store', {
                data: [{
                    "section": "One"
                }, {
                    "section": "Two"
                }, {
                    "section": "Three"
                }]
            }),
            fieldSetItems = [];

        sections.each(rec => {
            fieldSetItems.push({
                xtype: 'fieldset',
                title: rec.get('section')
            });
        });

        Ext.create({
            xtype: 'panel',
            title: 'Create Items by store',
            items: fieldSetItems,
            renderTo: Ext.getBody()
        });
    }
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 18 '18 at 11:42

Narendra Jadhav

10,052
15
33
44

Thank you. I'm trying to do the coding using visual code and then sencha app watch to test. The way the code is created and structured is really different to how it seems to work when using Fiddle. – sunnyj58 Jun 18 '18 at 11:47
So when I try to add this code to VS code, and then run with sencha app watch I get the error - Uncaught TypeError: Cannot read property 'create' of undefined – sunnyj58 Jun 18 '18 at 11:51
Man you can do copy paste in your code. It just an example that will help you how to add items dynamically. You need to put your logic based on your requirement. – Narendra Jadhav Jun 18 '18 at 11:53
For example if your view is created then you can added like this `view.add({ xtype: 'fieldset', title: rec.get('section') }) `. – Narendra Jadhav Jun 18 '18 at 11:54
Thanks for the example then. I just don't know enough about ExtJS to figure out what to do, and there is no tutorials or guides online so I am stuck. – sunnyj58 Jun 18 '18 at 11:54
But then I get errors telling me that parentContainer is not a function. – sunnyj58 Jun 18 '18 at 11:55
You need to get first `parentContainer` before to use add – Narendra Jadhav Jun 18 '18 at 11:57
Just for testing use `Ext.ComponentQuery.query('mainview')[0].add({ xtype: 'fieldset', title: 'DEMO' })` in your code. – Narendra Jadhav Jun 18 '18 at 11:59
How do I set the value of parent container though? – sunnyj58 Jun 18 '18 at 11:59
Have you test this `Ext.ComponentQuery.query('mainview')[0].add({ xtype: 'fieldset', title: 'DEMO' })`? – Narendra Jadhav Jun 18 '18 at 12:10
Just tried it now, I get the same error that parentContainer is not a function. – sunnyj58 Jun 18 '18 at 13:07
As I have mentioned that code there is no `parentContainer` so how do you get this error? – Narendra Jadhav Jun 18 '18 at 13:19
I hadn't commented out some code you sent earlier. I have commented out now, and the error I get says - Uncaught TypeError: Cannot read property 'add' of undefined – sunnyj58 Jun 18 '18 at 13:22
because it's `Ext.ComponentQuery.query('mainview')[0]` undefined. First confirm in which component/view you want to add dynamically – Narendra Jadhav Jun 18 '18 at 13:23
I want to dynamically add the fieldsets to the main view. Which is - Ext.define('App.view.main.Main', { extend: 'Ext.Panel', xtype: 'mainview', – sunnyj58 Jun 18 '18 at 13:25
'Ext.ComponentQuery.query('mainview')[0]' I think you're view is not created. You can check with `console.log(Ext.ComponentQuery.query('mainview')[0])` if it's undefined then first you need to resolve this issue – Narendra Jadhav Jun 18 '18 at 13:40
Just tested now, it returns undefined. The app was generated using the sencha cmd commands, I am not sure what else I needed to set up, like mainview, I thought it was auto created? – sunnyj58 Jun 18 '18 at 13:42
Check it in `aap.js` file there is define `mainView` – Narendra Jadhav Jun 18 '18 at 13:50
Yup, it points to the page I was working on - mainView: 'App.view.main.Main' – sunnyj58 Jun 18 '18 at 13:53
I managed to figure something that works slightly out, however it now doesn't should as a fieldset, instead its just a panel with text underneath. Next part is getting it to add text into the one, two, three sections :( – sunnyj58 Jun 18 '18 at 14:11
Now based on your requirement you can choose component from here [ExtJS docs](https://docs.sencha.com/extjs/6.5.1/index.html) – Narendra Jadhav Jun 18 '18 at 14:18
What do you mean by I can choose component? – sunnyj58 Jun 18 '18 at 14:38
That's means xtype textfield or label or fieldset or any other component – Narendra Jadhav Jun 18 '18 at 15:54

Trying to create a fieldset for each item in a store

2 Answers2

FIDDLE