PDA

View Full Version : Layout Problem(entire body css applying here, I need only for the particular section)



sivaprasad
15 Nov 2009, 12:34 AM
Hi all,

I am facing the following problem, regarding extjs layout.
Please help.

I am having the following layout :
http://phpwebworld.com/ext/examples/window/sample.html
Here the css was applying for the entire body, but I need the layout to be fitted in 'EXTJS Layout ' as I shown in the below webpage.

I verified with :
renderTo,
autoEl
contentEl etc., but i failed to get it.
Which class need to be used to get actual requirement ?
At present it is 'viewport'

But actual requirement is like this :
http://phpwebworld.com/ext/examples/window/layout.html

NOTE : Can I provide the code here ?

Thanks in advance,
sivaprasad.

dj
15 Nov 2009, 5:30 AM
Ext.Viewport allways takes the size of the whole browser window. That's what it is made for. But you can easily have static data in one of the regions of its border layout via the contentEl config option of Ext.Panel.
You cannot have two north regions in one border layout. The easiest way to have Header and some content in the north of the tab panel is to just wrap those two in a div and use this wrapped div as north region of your border layout.

Add this HTML to the page:


<div id="idOfHeaderAndSomeContentWrapper">
<div id="header">your header goes here</div>
<div id="someContent">some content geos here</div>
</div>
<div id="idOfFooterDiv">footer goes here</div>
sample.js should look like this (changes in bold)


Ext.onReady(function() {

// NOTE: This is an example showing simple state management. During
// development,
// it is generally best to disable state management as
// dynamically-generated
// ids
// can change across page loads, leading to unpredictable results.
// The
// developer
// should ensure that stable state ids are set for stateful
// components in
// real apps.

// Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.state.Manager.setProvider(new Ext.state.SessionProvider({
state : Ext.appState
}));

var viewport = new Ext.Viewport({
layout : 'border',
items : [{
border : false,
region : 'north',
contentEl : 'idOfHeaderAndSomeContentWrapper'
}, {
border : false,
region : 'south',
contentEl : 'idOfFooterDiv'
}, {
// renderTo: 'phpext',
region : 'west',
id : 'west-panel',
title : 'User Profile',
split : true,
width : 200,
minSize : 175,
maxSize : 400,
collapsible : true,
margins : '3 0 3 3',
cmargins : '3 3 3 3',
layout : 'accordion',
layoutConfig : {
animate : true
},
items : [{
contentEl : 'west',
title : 'General Info',
autoLoad : 'left.php',
border : false,
iconCls : 'nav'
}, {
title : 'Personal Info',
autoLoad : 'left.php',
border : false,
iconCls : 'settings'
}]
}, new Ext.TabPanel({
region : 'center',
margins : '3 3 3 0',
deferredRender : false,
defaults : {
autoScroll : true
},
listeners : {
tabchange : function(tp, newTab) {
var um = newTab
.getUpdater();
if (um)
um.refresh();
}
},
xtype : 'tabpanel',
stateEvents : ['tabchange'],
split : true,
id : 'object_panel',
activeTab : Ext.state.Manager.get(
'active_tab', 0),
listeners : {
'tabchange' : function() {
Ext.state.Manager
.set(
'active_tab',
Ext
.getCmp('object_panel')
.getActiveTab()
.getId());
}
},

items : [{
// renderTo: 'phpjs',
id : 'Tab1',
title : 'Tab1',
autoLoad : '1.php'
}, {
id : 'Tab2',
title : 'Tab2',
autoLoad : '2.php'
}, {
id : 'Tab3',
title : 'Tab3',
autoLoad : '3.php'
}, {
id : 'Tab4',
title : 'Tab4',
autoLoad : '4.php'
}, {
id : 'Tab5',
title : 'Tab5',
autoLoad : '5.php'
}, {
id : 'Tab6',
title : 'Tab6',
autoLoad : '6.php'
}]
})]

});

Ext.get("hideit").on('click', function() {
var w = Ext.getCmp('west-panel');
w.collapsed ? w.expand() : w.collapse();
});
});

meroy
15 Nov 2009, 11:23 AM
@sivaprasad

Set cmargins and margins accordingly like below to allow header, nav, and footer reside outside the viewport. Basically, increase the size of the margins.



<html>
<head>

<title>West & Center Only Ext JS with Header, Nav, Footer</title>

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
</script>

<style type="text/css">

#header-wrap {
height: 50px;
background-color: #999;
}
#nav-wrap {
height: 25px;
background-color: #666;
color: #ddd;
}
#footer-wrap {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 25px;
background-color: #999;
}
#header, #nav, #footer {
padding: 4px 4px 0 4px;
}

</style>

<script type="text/javascript">

Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout : 'border',
renderTo : 'viewport-app',
items : [{
region : 'west',
title : 'West',
width : 200,
minSize : 175,
maxSize : 400,
collapsible : true,
cmargins : '78 3 28 3',
margins : '78 3 28 3',
html : 'west content'
},{
region : 'center',
title : 'Center',
margins : '78 3 28 0',
html : 'center content'
}]
});
});

</script>
</head>
<body>
<div id="header-wrap">
<div id="header">header</div>
</div>
<div id="nav-wrap">
<div id="nav">nav</div>
</div>
<div id="footer-wrap">
<div id="footer">footer</div>
</div>
<div id="viewport-app"></div>
</body>
</html>

hendricd
15 Nov 2009, 11:34 AM
I think what OP is looking for is the ability to apply Ext's reset.css rules to only the row of the table in which an Ext border Layout may be rendered (without affecting the CSS of the surrounding table rows (containing legacy markup)).

@sivaprasad -- Is that correct?

meroy
15 Nov 2009, 12:03 PM
Thanks hendricd. I thought sivaprasad wanted this to work in which Ext JS (viewport) did not consume the entire screen. @sivaprasad -- please disregard my post if that was not the case. No problem.

-- from your post #1
But actual requirement is like this :
http://phpwebworld.com/ext/examples/window/layout.html