PDA

View Full Version : Tabs in a form with Ext.nd 2



tarikonen
6 Feb 2008, 9:25 AM
I have created a simple form where i want to put 2 tabs.

In the Notes form i have inserted this code



<div id='tabs1'>
<div id='pagina1'>
Prog [DominoFields-it's a placeholder]
</div>
<div id='pagina2'>
Attiv [DominoFields-it's a placeholder]
</div>


in the js header i have inserted this code

[CODE]
Ext.onReady(function() {
var frm = new Ext.nd.Form();
frm.render();
initTabPages();
});





function initTabPages()
{
var tabs = new Ext.TabPanel({
renderTo: 'tabs1',
activeTab: 0,
items:
[
{contentEl:'pagina1', title:'Progetto'},
{contentEl:'pagina2', title:'Attivit

RWaters
6 Feb 2008, 11:22 AM
Yeah, pushing Ext components into a Domino rendered form gets a little tricky. I would recommend taking a look at the 'Application Profile' form in the Ext.nd database. It currently only uses a Panel, but should be able to be adapted to a TabPanel pretty easily.

My first thought would be to tweak your html a tad and not wrap the divs you want within tabs in your 'tabs1' div.


<div id='tabs1'></div>
<div id='pagina1'>
Prog [DominoFields-it's a placeholder]
</div>
<div id='pagina2'>
Attiv [DominoFields-it's a placeholder]
</div>

JuanPalomo
29 Feb 2008, 8:22 PM
Rich, i can't make it work.. i have the same problem as tarikonen.
Once i play with the tabs the problem is gone..but the first time i can't fix it.

Can you please help me??

Thanks you very much!!!

tarikonen
29 Feb 2008, 11:24 PM
If you observe my html code you can see that there'isnt the </div> that close the div <div id='tabs1'>. This was my problem...

JuanPalomo
1 Mar 2008, 7:47 AM
Hi Tarikonen,

I copy exactly your code and close the "</div>"... like Rich said but i 've got the same problem.

I don't understand what i am doing wrong.

Is it possible that you please attach the database with the example form?

Thank you very much Tarikonen

Mike Amberg
1 Mar 2008, 2:40 PM
Hi Guys,

I tried the code above and it caused me the same problems ... I don't know why ...

I am still trying to understand how this stuff works by trail and error.

The following does work

1) Start with a new Notes Form
2) Add the HTML to your form - Screenshot-1
3) Enter the following HTMLHeaderContents (modified to your settings) - see Screenshot-2
4) Javascript Header (From the EXT Learn section on tabs) - see Screenshot-3
5) Working Tabs (without the problems) - see Screenshot-4 & 5

I will now try to add this to my working form which is very complex ... I will advise if it works.

I added the javascript so you can copy it below:


//=====================================
// Javacript functions for Extnd Tabs
//=====================================

Ext.onReady(function(){

// Main (Tabbed) Panel
var tabPanel = new Ext.TabPanel({
region:'center',
deferredRender:false,
autoScroll: true,
margins:'0 4 4 0',
activeTab:0,
items:[
{id:'tab1', contentEl:'tab1a', title: 'Main', closable:false, autoScroll:true},
{id:'tab2', contentEl:'tab2a', title: 'TabTwo', closable:true, autoScroll:true}
]
});

// Configure viewport
viewport = new Ext.Viewport({
layout:'border',
items:[tabPanel]});
});

Mike Amberg
1 Mar 2008, 5:44 PM
Hi,

More testing ... the previous javascript was thowing an error (the viewport?). I removed it and the tabs still work.

//=====================================
// Javacript functions for Extnd Tabs
//=====================================

Ext.onReady(function(){

// Main (Tabbed) Panel
var tabPanel = new Ext.TabPanel({
renderTo: 'my-tabs',
width: 750,
height: 400,
deferredRender:false,
autoScroll: true,
margins:'0 4 4 0',
activeTab:0,
items:[
{id:'tab1', contentEl:'tab1a', title: 'Main', closable:false, autoScroll:true},
{id:'tab2', contentEl:'tab2a', title: 'TabTwo', closable:true, autoScroll:true}
]
});
});

Mike Amberg
1 Mar 2008, 7:12 PM
The lastest ... much cleaner ... no firebug errors

Javascript Header ...

//=====================================
// Javacript functions for Extnd Tabs
//=====================================

Ext.onReady(function(){

// Main Form
var frm = new Ext.nd.Form();
frm.render();

// Main (Form) Panel
var p = new Ext.Panel({
frame: true,
height: 500,
title: 'My Form',
renderTo: 'my-form',
contentEl: 'my-panel'
});

// Main (Tabbed) Panel
var tabPanel = new Ext.TabPanel({
renderTo: 'my-tabs',
width: 780,
height: 300,
deferredRender:false,
autoScroll: true,
margins:'0 4 4 0',
activeTab:0,
items:[
{id:'tab1', contentEl:'page1', title: 'TabOne', closable:false, autoScroll:true},
{id:'tab2', contentEl:'page2', title: 'TabTwo', closable:false, autoScroll:true},
{id:'tab3', contentEl:'page3', title: 'TabThree', closable:false, autoScroll:true}
]
});
});


The Form...

see screenshot 1

The Rendered Form ...

see screenshot2

JuanPalomo
2 Mar 2008, 8:04 AM
Hi Mike,

Thank you so much for your help!!!!!!!!!!
Now it works perfect!!!!