PDA

View Full Version : Adding portal example into a tab?



hallikpapa
3 Dec 2007, 8:25 AM
Hello all.

I have been fiddling around trying to figure out what would be a good layout for us. The two examples I really like is the complex layout, and the portal.

I am still rumbling through the documentation, but if I include all of those Portal javascript pages and css, I am not seeing how I can get the portal to load in a div tag? Putting the javascript code within the div tag doesn't seem to work.

Most likely something pretty obvious, but I need help seeing it. Thanks!



<div id="center1">
***Code so portal widgets loaded here***</div>

jay@moduscreate.com
3 Dec 2007, 8:45 AM
The quickest way to achieve what you want is to just add the portal object as a child of a tabpanel.

i was able to use the portal example in the 'card' layout for a customer - which is part of the base of the tabpanel.

hallikpapa
3 Dec 2007, 9:27 AM
The quickest way to achieve what you want is to just add the portal object as a child of a tabpanel.

i was able to use the portal example in the 'card' layout for a customer - which is part of the base of the tabpanel.

Any way you could elaborate on this anymore? I figured making chunks of the portal code a child of the tab panel was exactly I needed to do, but having problems figuring out how to link these things. So if I have my dashboard tab, what links it to the portal?



new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'dashboard',
title: 'Dashboard',
closable:false,
***Link the portal here somehow?***
autoScroll:true
},{
contentEl:'help',
title: 'Help',
autoScroll:true
}]
})

hendricd
3 Dec 2007, 9:38 AM
new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'dashboard',
title: 'Dashboard',
closable:false,
xtype:'portal',
margins:'35 5 5 0',
autoScroll:true
},{
contentEl:'help',
title: 'Help',
autoScroll:true
}]
})

jay@moduscreate.com
3 Dec 2007, 9:40 AM
contentEl has HTML that is already rendered in the DOM.

are you looking to have the portal as a child of the tabpanel?



new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
title : 'Portal/etc',
items:[
new Ext.ux.Portal({
// your configs here
// Read the example to do it.
}),{
contentEl:'help',
title: 'Help',
autoScroll:true
}
]
})

jay@moduscreate.com
3 Dec 2007, 9:42 AM
Hendricd : i would advise adding portlets at runtime

hendricd
3 Dec 2007, 9:53 AM
Yeah, I assumed(?) OP was working off the portal example and portal.js was in the <head>.

(I like to steer them towards leaner config objects) ;)

hallikpapa
3 Dec 2007, 10:12 AM
aha! I see what's going on. So I don't need to include those portal example scripts in the <head> if I add it the way you have done it DJ?

I think I am starting to get it...

hendricd
3 Dec 2007, 10:19 AM
portal is a ux. You will need to include it in <head> for either approach.

jay@moduscreate.com
3 Dec 2007, 12:33 PM
I think as long as it is before (above) your own java script and executes before (registered before your code in the ext.onReady "registry"), you're golden.

hallikpapa
3 Dec 2007, 6:18 PM
new Ext.TabPanel({
xtype:'portal',
region:'center',
deferredRender:false,
activeTab:0,
items: [{
title: 'Dashboard',
contentEl:'center1',
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items: [{
title: 'First Widget',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Second Widget',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
contentEl:'center2',
title: 'Help',
autoScroll:true
}]
})

The above fills in the sample-grid with all the fake data just fine. But it fills in the entire center region horizontially. I was trying to get anywhere from 3-10 widgets fitting nicely in there. They are also not draggable. I will continue to work through everything. Also, has anyone gotten a draggable function from a menu tree to the portal? Not important, but was thinking about allowing someone to add widgets as easily as they can delete them

hallikpapa
3 Dec 2007, 9:04 PM
I have adjusted it to look like this:




<script type="text/javascript" src="includes/Portal.js"></script>
<script type="text/javascript" src="includes/PortalColumn.js"></script>
<script type="text/javascript" src="includes/Portlet.js"></script>

....
....
....
new Ext.TabPanel({
xtype:'portal',
region:'center',
deferredRender:false,
activeTab:0,
items: [{
title: 'Dashboard',
contentEl:'center1',
columnWidth:.33,
items: [{
title: 'Hourly Report',
layout:'fit',
tools: tools,
anchor: '50%',
frame:true,
collapsible:true,
draggable:true,
cls:'x-portlet',
validatedrop:true,
beforedragover:true,
dragover:true,
beforedrop:true,
drop:true,
html: Ext.example.test2
},{
title: 'Average',
tools: tools,
anchor: '50%',
frame:true,
collapsible:true,
draggable:true,
cls:'x-portlet',
validatedrop:true,
beforedragover:true,
dragover:true,
beforedrop:true,
drop:true,
html: Ext.example.test1
}]
....
....
....
<div id="center1">
</div>

The two problems I have is the widgets are still extended across the entire center panel, and although I can drag the widget up and down, I can't reorder them.

Well I could just do it with height and width, but I would like them to autosize based on the data within them, but not to exceed X height. That make more sense?

jay@moduscreate.com
4 Dec 2007, 5:38 AM
you're specifying just ONE column. You have to think in terms of boxes.

if you want 10 wedgies, you need to figure out what type of layout you're going to do.

[_] [_] [_] [_]
[_] [_] [_] [_]
[_] [_]

or

[_] [_] [_]
[_] [_] [_]
[_] [_] [_]
[_]


you cannot do:
[_] [_] [_]
[_] [_] [_]
[_] [_] [_]
[_______]

or
[_] [_] [_] [_]
[_] [_] [_] [_]
[____] [____]

hallikpapa
5 Dec 2007, 2:48 PM
Lets say I want 6 columns and an unlimited (well say 10) number of rows. How could I configure something like this? I am assuming they will be draggable based on my previous code if I setup the columns correctly?

hallikpapa
6 Dec 2007, 9:09 AM
Anyone? :)

jay@moduscreate.com
6 Dec 2007, 10:36 AM
add columns like:


{
title: 'Dashboard',
columnWidth:.16,
items: [{
title: 'Hourly Report',
layout:'fit',
tools: tools,
anchor: '50%',
frame:true,
collapsible:true,
draggable:true,
cls:'x-portlet',
validatedrop:true,
beforedragover:true,
dragover:true,
beforedrop:true,
drop:true,
html: Ext.example.test2
}]
}

hallikpapa
6 Dec 2007, 3:22 PM
I am sorry I don't understand. I have been fiddling around with the syntax, but it doesn't like what I am doing. I am missing something in plain sight. The two boxes I have created are in a single column when they should be in their own columns and I can drag, but not drop.

This is what I have right now, in your example, you show just one box, can you show what it looks like with two boxes?



new Ext.TabPanel({
xtype:'portal',
region:'center',
deferredRender:false,
activeTab:0,
items: [{
title: 'Dashboard',
columnWidth:.16,
style:'padding:10px 0 10px 10px',
items: [{
title: 'Example1',
layout:'fit',
tools: tools,
anchor: '100%',
frame:true,
collapsible:true,
draggable:true,
cls:'x-portlet',
validatedrop:true,
beforedragover:true,
dragover:true,
beforedrop:true,
drop:true,
autoHeight:true,
width:200,
html: Ext.example.example1

},{

title: 'Example2',
tools: tools,
anchor: '100%',
frame:true,
collapsible:true,
draggable:true,
cls:'x-portlet',
validatedrop:true,
beforedragover:true,
dragover:true,
beforedrop:true,
drop:true,
autoHeight:true,
width:200,
html: Ext.example.example2
}]

paterczm
11 Dec 2007, 3:20 AM
Hi there

I'm also trying to implement the portal example using TabPanel. My problem is that it works only in the tab displayed by default, when I click on the other tab (want to see second portal page) then it's not rendered correctly, i.e. everything goes into one column, like it was a plain Panel. If I change activeTab property it's the other way around, now the second page works correctly and the first does not.

Below is my code (hallikpapa, you might find it useful, drag&drop work fine for me). Please help.



var tabPanel = new Ext.TabPanel({
region:'center',
deferredRender:false,
autoScroll: true,
margins:'0 4 4 0',
activeTab:0,
items:[{
id:'tab1',
title: 'Welcome',
closable:true,
autoScroll:true,
items:getWelcomePage()
},{
id:'tab2',
title: 'Configuration',
closable:true,
autoScroll:true,
items:getAdminPage()
}]
});


function getAdminPage(){
return new Ext.ux.Portal({
xtype:'portal',
region:'center',
margins:'10 10 10 10',
items:[{
columnWidth:.5,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Some admin portlet',
tools: tools,
html: 'Admin stuff here'
}]
},{
columnWidth:.5,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Some other admin portlet',
tools: tools,
html: 'Admin stuff here'
}]
}]
});
}

santosh.rajan
11 Dec 2007, 3:51 AM
Try
layoutOnTabChange: true,
instead of deferredrender, i dont know if it works for this case but its worth the try. let me know.

paterczm
11 Dec 2007, 4:05 AM
layoutOnTabChange: true solved my problem. I've also learned that adding layout:'fit' to each tab helps. It looks like I could see just one column because the other ones where pushed out of the view area (sort of).

Thanks santosh.rajan!