CODEWITHSUNDEEP
javascriptextjs
Arnab Shaw
Arnab Shaw

Reputation: 539

How to render Panels in Ext Js 4

enter image description here

the number of panels depends on the number of data from store and should render in form shown above i.e. two columns

my code is 

Ext.define('ConnectionsFeed.view.Communities',{
     extend: 'Ext.container',
     requires: 'ConnectionsFeed.store.Communities',
     store: 'Communities',
     alias: 'widget.communities',
     layout: 'table',

 initComponent: function(){
  var x = this;
  this.store.each(function(item){
   x.add(new Ext.panel.Panel());
  });
 }
});

Ext.create('ConnectionsFeed.view.Communities',{
   renderTo: Ext.getBody()
});

but getting the following error

> Uncaught TypeError: Cannot read property 'isInstance' of undefined
> ext-all.js:21 (anonymous function) ext-all.js:21 Ext.apply.doProcess
> ext-all.js:21 (anonymous function) ext-all.js:21 Ext.apply.require
> ext-all.js:21 (anonymous function) ext-all.js:21 Ext.apply.doProcess
> ext-all.js:21 Ext.apply.doProcess ext-all.js:21 Ext.apply.process
> ext-all.js:21 Ext.Class.c ext-all.js:21 Ext.ClassManager.create
> ext-all.js:21 Ext.apply.define ext-all.js:21 (anonymous function)

Upvotes: 0

Views: 2227

Answers (3)

Johan Haest
Johan Haest

Reputation: 4421

Also a container has no store. You'll need to create an instance in your initComponent and load it.

Ext.define('ConnectionsFeed.view.Communities', {
    extend: 'Ext.container',
    requires: 'ConnectionsFeed.store.Communities',
    store: 'Communities',
    alias: 'widget.communities',
    layout: 'table',

    initComponent: function() {
        var x = this;

        x.store = Ext.create('ConnectionsFeed.store.Communities');

        //If you override initComponent you need to call its parent
        x.callParent();
    },
    afterRender: function() {
        var x = this;

        x.store.load({
            scope: x,
            //Callback function after the store has loaded
            callback: function(records, operation, success) {
                Ext.each(records, function(record) {
                    //Your logic of add a panel here
                    x.add(Ext.create('....'));
                });
            }
        });

        x.callParent();
    }
});

Ext.create('ConnectionsFeed.view.Communities', {
    renderTo: Ext.getBody()
});​

Upvotes: 1

Evan Trimboli
Evan Trimboli

Reputation: 30082

You're missing a call to this.callParent() at the end of initComponent.

Upvotes: 1

Mchl
Mchl

Reputation: 62359

Ext.Store.each() let's you call a function for each element in data store. The function in question should add an instance of your panel to a container with table layout.

YourStore.each(function(item) {
  //container declared elsewhere
  container.add(new YourPanel(item));
});

Upvotes: 1

Related Questions