PDA

View Full Version : Calculating portal columns to add portlets dynamically per Tab



Vishvesh
8 Apr 2013, 2:28 PM
Hello guys,
Is there a way I can get rid of the 'id:col-0', 'id:col-1', and so on, so that I can add a panel dynamically inside the tab, which is essentially a portalpanel?



items: [{
title: 'Tab 1',
items: [{
id: 'app-portal-1',
xtype: 'portalpanel',
region: 'center',
flex: 1,
columnWidth: 0.2,
items: [{
id: 'col-0',
//items: [getSavedUserPortlets() ? getSavedUserPortlets() : []]
items: []
},{
id: 'col-1',
items: []
},
{
id: 'col-2',
items: []
}
]
}
]
},
{
title: 'Tab 2',
items: [{
id: 'app-portal-2',
xtype: 'portalpanel',
region: 'center',
flex: 1,
columnWidth: 0.5,
items: [{
id: 'col-3',
items: []
},{
id: 'col-4',
items: [{
id: 'stock-portlet-'+count,
title: 'Stock Portlet',
width: 20,
tools: getTools(),
items: Ext.create('Ext.app.ChartPortlet'),
closable: true
}]
},
{
id: 'col-5',
items: []
}
]
}
]
}]
I am actually adding new portlet panels by using this :
Ext.getCmp(this.defaultPortalColumn).add(portlet); My defaultPortalColumn is col-0 in this case.

For 1 tab, everything works perfect. But I have several tabs.

But say I want to add the same portletPanel in Tab 2's 1st column.
Now, I am setting the id of the portalPanel everytime(So a Div with that id is created in the DOM). What is the best / efficient way to avoid duplicate id's in the DOM or how should I go by adding the portletPanels in other tabs, without any error / duplications?

tvanzoelen
9 Apr 2013, 7:24 AM
use the property itemId

better not use the id property in your code. itemId you can query as well

Vishvesh
9 Apr 2013, 8:44 AM
So will it be something like:

{
title: 'Tab 1',
items: [{
id: 'app-portal-1',
xtype: 'portalpanel',
region: 'center',
flex: 1,
columnWidth: 0.2,
items: [{
itemid: 'col-0',
//items: [getSavedUserPortlets() ? getSavedUserPortlets() : []]
items: []
},{
itemid: 'col-1',
items: []
},
{
itemid: 'col-2',
items: []
}
]
}
]
},

And while querying I can do the same as
Ext.getCmp(itemid)? instead of
Ext.getCmp('col-1').add(portlet); ?

Thanks again!

Vishvesh
9 Apr 2013, 9:46 AM
Hi tvanzoelen,
I tried with this too
Ext.ComponentQuery.query('app-portal-1 #'+this.defaultPortalColumn);, but it doesn't work either.. I read the docs.. but it's kinda confusing :( Also, does it directly replace Exp.getCmp('id')? :-/
I saw that it requires a panel reference to query, but in my case, I can not reference the parent, as I want to query directly on the 'column' so that I can add more components to the column.

So when I do
ComponentQuery('panel #child').add() it doesn't have a method .add() which Ext.getCmp() has to add items :((

tvanzoelen
9 Apr 2013, 9:59 AM
to query is fine with query('#itemid'), you can use a top level component or Ext.ComponentQuery.query('#itemid');

It returns an array [] so the result will be in result[0]

or use down() or up() which will return the first object found.

tvanzoelen
9 Apr 2013, 10:03 AM
Ext.ComponentQuery.query('#app-portal-1 panel')


will return an array with three panel in it

so try


Ext.ComponentQuery.query('#app-portal-1')[0].add();