Dynamic columns in extjs Portal Example

Question

Dynamic columns in extjs Portal Example.

I want to insert columns dynamically in extjs portal example -- specifically i would like to nest them, the problem is i am able to add the columns dynamically but cant drop a portlet inside it, however if i nest columns manually (i.e if they are there already and not defined on runtime) then everything works fine i.e i am able to drop the portlets inside it.

Can anyone help?

here is the some relevant code:

basic declaration:

Ext.define('Ext.app.Portal', {
id: 'parentPortal',
    extend: 'Ext.container.Viewport',
    requires: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
initComponent: function(){
    items: [{                        
                        xtype: 'portalpanel',
                        id:'threecolumn',
                        region: 'center',                        
                        items: [{
                            id: 'col-1',
                            width: 200,
                            childAnchor: '50% 50%' ,
                            items: [
                                {
                                    xtype: 'portalpanel',
                                    items: [
                                        {
                                            id: 'col-4',
                                            minHeight:200
                                        }

                                    ],                                    
                                }
                            ]
                        },{
                            id: 'col-2',
                            items: [
                                {
                                    xtype: 'portalpanel',
                                    items: [
                                        {
                                            id: 'col-5',
                                            minHeight:200
                                        }

                                    ],                                    
                                }
                            ]
                        },{
                            id: 'col-3'
                        }]
                    }]
}
}

dynamic column:

Ext.create('Ext.app.PortalPanel', {            
              xtype: 'portalpanel',              
        });
}

Asif Asif · Accepted Answer · 2013-09-23T10:13:39

Please Add Listener

listeners: {
                render: function() {
                    var panel = this;
                    setTimeout( function() {
                    var parent = panel.up('portalpanel');
                    var bb = Ext.ComponentQuery.query('#threecolumn')[0]
                    console.log( bb == parent );
                    parent.dd.unreg();
                    parent.dd = Ext.create('Ext.app.PortalDropZone', parent, parent.dropConfig);
                    bb.dd.unreg();
                    bb.dd = Ext.create('Ext.app.PortalDropZone', bb, bb.dropConfig);        
                    console.log(panel);
                    console.log(parent);
                    }, 500);                        
                }
              }

Dynamic columns in extjs Portal Example

1 Answers