PDA

View Full Version : [SOLVED] Load Portlets into Portal dynamically



feendrache
26 Apr 2010, 5:52 AM
Hello,

i'm working on a little web-app and want to make this:
you click on a tree-item (tree is in west) and the apps loads the Portal-content (central) dynamically from a php-given response.

I tried to use:

p_temp = Ext.getCmp('pl_portal');
p_temp.setTitle(item.text);

p_temp.load({
url: myURL,
params: {pl_idy: item.id}
});in the click-listener of the tree.
But the json-Response is only set as it is into the portal-column.

I'm not able to figure out if
a) this is possible at all
b) how to make it work

can someone help me out?

ExtJSBeginner
26 Apr 2010, 9:33 AM
maybe a little more information on the code would help?

feendrache
26 Apr 2010, 10:21 AM
Oh yes, of course.

This is my portal:


var pl_portal = new Ext.ux.Portal({
id: 'pl_portal',
title: '...',
region:'center',
margins:'3 3 3 0',
cmargins:'3 3 3 3',
items:[{
columnWidth:1,
id: 'pl_portal_col',
style:'padding:5px 0 5px 0'
/*items:[{
id: 'plp_base_data',
title: 'Basis-Daten',
layout:'fit',
xtype: 'requiredportlet',
tools: tools
}/*,{
id: 'plp_new_item',
title: 'neuen Plotteil erstellen',
tools: tools
}]*/
}]

/*
* Uncomment this block to test handling of the drop event. You could use this
* to save portlet position state for example. The event arg e is the custom
* event defined in Ext.ux.Portal.DropZone.
*/
,listeners: {
'drop': function(e){
Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' +
e.columnIndex + '<br />Position: ' + e.position);
}
}
})


And this my tree:


var plottree = new Ext.tree.TreePanel ({
title:'Plot',
id: 'plot-tree',
region: 'center',
margins: '2 2 0 2',
loader: new Ext.tree.TreeLoader({
dataUrl: xajax.config.requestURI
//baseParams: {title:'test'}
}),

useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
tools: pl_tree_tools,
rootVisible: false,
root: {
nodeType: 'async',
text: 'Plot',
draggable: false,
id: 'plt_node_plot'//,
//nodes: treeNodes
},listeners: {
'click': function(item){
p_temp = Ext.getCmp('pl_portal');
p_temp.setTitle(item.text);

p_temp.load({
url: myURI,
params: {pl_idy: item.id}
});

Ext.Msg.alert('Tree Clicked', temp);
}
}
});


and this my php:


function extjs_setPlotpartPortal(){
$json_plotpart = json_encode($plotpart);

$json_plotpart = "items:[{
id: 'plp_base_data',
title: 'Basis-Daten',
layout:'fit',
xtype: 'requiredportlet',
tools: tools
},{
id: 'plp_new_item',
title: 'neuen Teil erstellen',
tools: tools
}]";
print($json_plotpart);
}

feendrache
26 Apr 2010, 10:22 AM
Oh yes, of course.

This is my portal:


var pl_portal = new Ext.ux.Portal({
id: 'pl_portal',
title: '...',
region:'center',
margins:'3 3 3 0',
cmargins:'3 3 3 3',
items:[{
columnWidth:1,
id: 'pl_portal_col',
style:'padding:5px 0 5px 0'
}]

/*
* Uncomment this block to test handling of the drop event. You could use this
* to save portlet position state for example. The event arg e is the custom
* event defined in Ext.ux.Portal.DropZone.
*/
,listeners: {
'drop': function(e){
Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' +
e.columnIndex + '<br />Position: ' + e.position);
}
}
})And this my tree:


var plottree = new Ext.tree.TreePanel ({
title:'Plot',
id: 'plot-tree',
region: 'center',
margins: '2 2 0 2',
loader: new Ext.tree.TreeLoader({
dataUrl: myURI
//baseParams: {title:'test'}
}),

useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
tools: pl_tree_tools,
rootVisible: false,
root: {
nodeType: 'async',
text: 'Plot',
draggable: false,
id: 'plt_node_plot'//,
//nodes: treeNodes
},listeners: {
'click': function(item){
p_temp = Ext.getCmp('pl_portal');
p_temp.setTitle(item.text);

p_temp.load({
url: myURI,
params: {pl_idy: item.id}
});

Ext.Msg.alert('Tree Clicked', temp);
}
}
});
and this my php:


function extjs_setPlotpartPortal(){
$json_plotpart = json_encode($plotpart);

$json_plotpart = "items:[{
id: 'plp_base_data',
title: 'Basis-Daten',
layout:'fit',
xtype: 'requiredportlet',
tools: tools
},{
id: 'plp_new_item',
title: 'neuen Teil erstellen',
tools: tools
}]";
print($json_plotpart);
}
it fills the column of the portal with the json encoded array

CrazyEnigma
26 Apr 2010, 12:44 PM
Yes, it is possible.

Is your center region a portal? If so, just remember that the portal has portal columns, so when you add the portlet, you need to add it to one of the portal columns.

So the config should have columnIndex, and position, but if you don't, it will just insert it at 0,0



addPortlet: function (cfg) {
// find the position, and column for the dashboard from the config
Ext.applyIf(cfg, {columnIndex: 0, position: 0});
var col = (cfg.columnIndex >= this.items.length) ? this.items.length - 1 : cfg.columnIndex;
var pos = cfg.position || 0;
var c = this.items.itemAt(col);

var obj = c.insert(pos, cfg);
c.doLayout();
return obj;
},


Hope this helps.

feendrache
26 Apr 2010, 10:01 PM
Thanks,
but i'm sorry to ask again.

You're right, it is a portal. But i'm kind of nw to extjs. I added the columnIndex and position to the two test-portlets i'm trying to add. But it only shows this:


items:[{
id: 'plp_base_data',
title: 'Basis-Daten',
layout:'fit',
xtype: 'requiredportlet',
tools: tools,
columnIndex:0,
position:0
,{
id: 'plp_new_item',
title: 'neuen Teil erstellen',
tools: tools,
columnIndex:0,
position:1
}]

And no Portal Column is given anymore. I just don't know what to do to tell my Extjs-Stuff to take the given json-Portlet-Definition and add it to the column that already exists

CrazyEnigma
26 Apr 2010, 10:07 PM
Maybe you didn't specify your portal columns. Portal columns are just a panel with column layout.

Your portal columns should look something like this:


items: [{
columnWidth: 0.33,
style: 'padding:5px 5px 5px 5px'
},{
columnWidth: 0.67,
style: 'padding:5px 5px 5px 5px'
}],


And the code I supplied extends the portal component, and then you call the method and send in the config file, and it should render your config in your portal.

CrazyEnigma
26 Apr 2010, 10:14 PM
If your portal is only going to have one column, do this:



Ext.getCmp('pl_portal_col').add(<your config>);


But beware of using "id", because if you have a tab panel of portals, then "id" will not work. Think of "id" as a singleton class (it must be unique).

feendrache
26 Apr 2010, 10:17 PM
Yeah i have only one portal.
The problem is, that i want to use the 'click' listener in my tree-panel to add a portlet to the column with the data i get from the php-file dynamically.

My try is to use the 'load'-function of the portal, but i think this is the wrong idea.
I just havent figured out how to geht my php-generated data into the add-Function of the column...

a quick tip for me?

CrazyEnigma
26 Apr 2010, 10:26 PM
What is your actual PHP output?

Like this:


[{
id: 'plp_base_data',
title: 'Basis-Daten',
layout:'fit',
xtype: 'requiredportlet',
tools: tools
}, ...]


I would do a Ext.Ajax.request({<configuration of request>}); from within the click listener.
And access the portal from within the success callback.



success: function (response, options)
{
var portalCol = Ext.getCmp('pl_portal_col');
var portlets = Ext.encode(response.responseText);
for (var i = 0; i < portlets.length; i++)
{
portalCol.add(portlets[i]);
}
}

feendrache
26 Apr 2010, 11:52 PM
thanks for your help...
i now get my stuff from the php-call but it always says that: "item is not defined" when i try using the returned stuff to add the portlets.

feendrache
27 Apr 2010, 12:06 AM
Ok, got it,
thank you CrazyEnigma for all your help.

My request looks now like this:


Ext.Ajax.request({
url: myURI,
params: {pl_idy: item.id},
method: 'GET',
success: function (response, options){
//Ext.MessageBox.alert('Success', 'Data return from the server: '+ response.responseText);
var portalCol = Ext.getCmp('pl_portal_col');
var portlets = Ext.util.JSON.decode(response.responseText);
for (var i = 0; i < portlets.length; i++)
{
portlets[i].tools = tools;
portalCol.add(portlets[i]);
}

portalCol.doLayout();
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', result.responseText);
}
});

CrazyEnigma
27 Apr 2010, 9:46 AM
Ok, the code is a little wrong. It should be:


var obj = Ext.decode(response.responseText);


Because you are specifying items, you need to reference that.


obj.items.length

feendrache
27 Apr 2010, 10:30 AM
hmm, my post was lost somehow... i managed to get it... not with ext.decode but with JSON decode to get the objects and now it's working,
thx so much

CrazyEnigma
4 May 2010, 11:33 AM
Just edit your original post title to say [SOLVED]. Thanks.

Vishvesh
29 Mar 2013, 2:44 PM
Hi CrazyEnigma, sorry this post is too old for this comment, but I have a similar issue. Could you please elaborate on what is a "config" file here? I am trying to achieve similar thing as feendrache (http://www.sencha.com/forum/member.php?104664-feendrache).. I can successfully drop and then drag and drop the portlets I make after a click event occurs. But I do it this way..
Ext.getCmp('col-1').add(portlet); I have to add a portlet every time a user clicks on the button, so I guess, the getCmp.add method isn't useful as it requires a column. I do have to calculate if I have reached a particular threshold of columns and then tell the user to use a different tab. say the upper limit of my portlet columns is 9..

Just wanted to know if therez a way to calculate / pre-define the number of columns on the portalpanel(each tab is my portalpanel, I have 3 tabs).

Also, can we possibly count the number of portlets I already have in a portalpanel?
Thanks and sorry to reply to such an old post!