PDA

View Full Version : Yet another form in tabpanel question...



rogersja
27 Feb 2009, 6:42 PM
Hello all,

I am trying to add a form to a tabpanel using the 'add' method.
seems to be easy enough to include a form in a tabpanel when putting it in the
items:[{}}
but thats just not going to work for me on this one...

As is usual for these sorts of questions the form doesn't render in the tab.

the isolated case is at:
http://virgo.rogerswestgroup.com/wscase2.html
guest/guest

the integrated app is at:
http://virgo.rogerswestgroup.com/rwg_mosis.html
guest/guest

Im sure the solution will end up being obvious, it always is. lol

Thanks so much,
Cheers
JR

mankz
27 Feb 2009, 7:16 PM
How about:


layout : 'fit'

on the newly created panel?

rogersja
27 Feb 2009, 7:51 PM
Did you try that?
of just a suggestion...

it didn't seem to work for me, I tried adding the
layout: 'fit', in both the form panel and the tabpanel, neither changed the outcome.


Thanks again,
JR

mankz
27 Feb 2009, 7:53 PM
It was just a guess, post all your code + HTML in CODE tags...

rogersja
27 Feb 2009, 8:17 PM
I had included the links to two pages, one with an isolated example of the problem and the other with the full app. A right-click view source would reveal everything, particularly in the isolated case page.

nevertheless, as per your request, here is the code for the isolated example:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Working Showcase 1 @ RWG Virgo</title>
<!-- ** CSS ** --><!-- base library -->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="ext-all-debug.js">
</script>
<!-- overrides to base library -->
<!-- extensions -->
<!-- page specific -->
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
function createWorkspaceTab(tTitle, tCls){
return new Ext.getCmp('workspace').add({
title: tTitle,
iconCls: tCls,
closable: true,
//deferredRender: 'true',
layoutOnTabChange:'true',
layout:'fit',
tbar: [{
iconCls: 'formedit',
tooltip: 'Edit Content',
text: 'Edit'
}],
bbar: [{
iconCls: 'formedit',
tooltip: 'Edit Content',
text: 'Edit'
}],

}).show();
}

function showTabsearchUsrProf(){
tab = createWorkspaceTab('Search User Profile', 'usrprof');
tab.add(createFormsearchUsrProf());
tab.show(Ext.get('show-btn'));
}

function createFormsearchUsrProf(){
return new Ext.FormPanel({
frame: true,
labelWidth: 95,
autoScroll: true,
width: 500,
layout :'fit',
items: [{
layout: 'column',
border: false,
defaults: {
columnWidth: '.5',
border: false
}
}, {
xtype: 'fieldset',
title: 'Units',
autoHeight: true,
collapsible: true,
collapsed: false,
layout: 'form',
items: [{
xtype: 'panel',
title: 'Units',
tbar: [{
text: 'Add',
tooltip: 'Add Unit to this Complex',
iconCls: 'unit'
}, {
text: 'Remove',
tooltip: 'Remove Unit from this Complex',
iconCls: 'unit'
}, '-']
}, {
bbar: [{
text: '%n unit'
}]
}]
}]
});
}

var button = Ext.get('show-btn');
Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
items: [{
region: 'west',
title: 'Control Panel',
width: 215,
minSize: 175,
maxSize: 400,
collapsible: true,
split: 'true',
border: 'false',
margins: '5 0 0 5',
layout: 'accordion',
layoutConfig: {
animate: true
},
items: [new Ext.tree.TreePanel({
id: 'app-tree',
title: 'Applications',
iconCls: 'app',
loader: new Ext.tree.TreeLoader(),
rootVisible: false,
lines: false,
autoScroll: true,
root: new Ext.tree.AsyncTreeNode({
text: 'Apps',
children: [{
text: 'PM',
iconCls: 'pm',
expanded: false,
children: [{
text: 'Search user Profile',
iconCls: 'usrprof',
leaf: true,

listeners: {
click: showTabsearchUsrProf
}

}]
}]
})
})]
}, {
region: 'center',
items: [new Ext.TabPanel({
id: 'workspace',
plain: true,
region: 'center',
enableTabScroll: true,
layoutOnTabChange: true,
activeTab: 0,
items: [{
title:'dashboard'
}]
})]
}]
})
});
</script>
</head>
<body>
</body>
</html>

Cheers,
JR

Animal
28 Feb 2009, 12:33 AM
Classic overnest.

The TabPanel is inside a no layout center Panel! Why take the conscious decision to place a TabPanel inside a Panel which does no sizing or positioning on any of its children?

rogersja
28 Feb 2009, 12:54 AM
hello,

thanks for the pointer.

i have added a layout to the 'center' region.

now it spaces the tbar and bbar apart, but still no form...
UNTIL... i resize the browser window and scroll down, very strange things happen.

a bug perhaps?

new page uploaded to
http://virgo.rogerswestgroup.com/wscase2.html
guest/guest

Cheers,
JR

Animal
28 Feb 2009, 2:12 AM
Why?

If I can get to the core of why people put things inside things, and I can somehow get that into the docs, I can try to stop peole doing this?

WHY did you put the TabPanel inside a Panel?

rogersja
28 Feb 2009, 9:02 AM
Hello all,

The problem has been solved.
Thanks to Animal for suggesting the removal of an 'extra' nesting layer that was uneeded.

Also, adding the dolayout() method fixed the problem of rendering.

A note to animal:
If there seems to be an ongoing problem of 'over nesting' as you call it, a non-isolated case, perhaps it is stemming from somewhat of a larger issue that would require more attention and research.
You had also mentioned that you would like to to find someway of including the solution in the 'docs'. I would suggest generating some rather detailed and explanatory copy for submission to Ext JS HQ for their perusal and ultimate inclusion in the next release of the framework and/or documentation.
I hope this has helped you, as you have helped me.

Thanks again
Cheers,
JR

Animal
28 Feb 2009, 9:43 AM
There's no detail.

It's just don't put a Panel in a Panel unless you need to.