The Ext.namespace statement?
Printable View
The Ext.namespace statement?
A suggestion here.
How about adding a monitorWindowResize option so that it automatically refits the Component to its parent on window resize.
This would be useful for when the parent element is sized using %ages.
Then we could help this guy: http://extjs.com/forum/showthread.php?t=66606
so
Code:Ext.namespace('Ext.ux.plugins');
Ext.ux.plugins.FitToParent = Ext.extend(Object, {
constructor: function(parent, monitorWindowResize) {
this.parent = parent;
if (monitorWindowResize) {
Ext.EventManager.onWindowResize(this.fitSizeToParent, this);
}
},
init: function(c) {
c.on('render', function(c) {
c.fitToElement = Ext.get(this.parent || c.getDomPositionEl().dom.parentNode);
}, this, {single: true});
c.monitorResize = true;
c.doLayout = c.doLayout.createInterceptor(this.fitSizeToParent);
},
fitSizeToParent: function() {
var pos = this.getPosition(true), size = this.fitToElement.getViewSize();
this.setSize(size.width - pos[0], size.height - pos[1]);
}
});
onWindowResize isn't required when the plugin is applied to a Container, but it is always required when the Component isn't a Container.
So I would suggest:
(you need to call fitSizeToParent and attach the onWindowResize after the component is rendered)Code:Ext.namespace('Ext.ux.plugins');
Ext.ux.plugins.FitToParent = Ext.extend(Object, {
constructor: function(parent) {
this.parent = parent;
},
init: function(c) {
c.on('render', function(c) {
c.fitToElement = Ext.get(this.parent || c.getDomPositionEl().dom.parentNode);
if(!c.doLayout){
this.fitSizeToParent();
Ext.EventManager.onWindowResize(this.fitSizeToParent, this);
}
}, this, {single: true});
if(c.doLayout){
c.monitorResize = true;
c.doLayout = c.doLayout.createInterceptor(this.fitSizeToParent);
}
},
fitSizeToParent: function() {
var pos = this.getPosition(true), size = this.fitToElement.getViewSize();
this.setSize(size.width - pos[0], size.height - pos[1]);
}
});
So, what ended up being the final version of this plugin for 2.x? Lots of code snippets here.
I've updated the first post with the last code (most changes were minor, so it didn't really matter which version you used).
Thank you!
It is great to find this plug in, I am trying to use it.
In my application, I put a tabpanel into a div (fromContainer), I develop on 1280x1024 screen resolution, everything looks fine.
But users use 1024x768 resolution, then some content of my page (most right side, bottom page) got cut off, I can not see them.
I tried to use the plug in, but it's not working, only tabs displayed, the content of the tabs does not show at all. please help, thanks a lot!
My jsp file:
My tab panel:Code:<div id="formContainer" style="width:100%; height:100%; overflow:hidden">
</div>
Code:// Here is the MAIN SOURCE TAB
var tabs = new Ext.TabPanel({
renderTo: document.getElementById("formContainer"),
activeTab: 1,
plugins: [new Ext.ux.plugins.FitToParent()],
layoutOnTabChange: true,
//layout:'fit',
items:
[
// Add Source Tab
{
title: 'Add Source',
bodyStyle:'text-align:left;',
cls: 'left-right-buttons',
frame:true,
items: [addSourceForm,addSourceResult]
},
// Search Source Tab
{
title: 'Search Source',
cls: 'left-right-buttons',
defaults:{autoScroll: true},
items:
[{items: new Ext.Panel
({
height:650,
width:1140,
layout:'border',
defaults: {
bodyStyle: 'padding:5px'
,labelStyle:'font-weight: bold'
,bodyStyle:"background-color:#DED8C7"
,autoScroll: true
},
items:[{
title:"<font size=2>Searching Options</font>",
region:"west",
width:300,
minSize:100,
maxSize:300,
collapsible:true,
margins: '5 0 0 5',
items: searchForm
},{
title: '<font size=2>Source Detail Viewer</font>',
collapsible: false,
region:'east',
margins: '5 0 0 0',
width: 280,
items: detailForm
},{
title: '<font size=2>Source List</font>',
collapsible: false,
region:'center',
margins: '5 0 0 0',
id: 'sourceViewer',
layout: 'fit',
autoScroll: true,
//width: 580,
//defaults:{autoWidth: true},
items: sourceGrid
}]
})
}]
},
// My sources Tab
{
title: 'My Sources',
cls: 'left-right-buttons',
defaults:{autoScroll: true},
items:
[{items: new Ext.Panel
({
height:650,
width:1140,
layout:'border',
defaults: {
//split: true,
bodyStyle: 'padding:5px'
,labelStyle:'font-weight: bold'
,bodyStyle:"background-color:#DED8C7"
,autoScroll: true
}
,items:[{
title: '<font size=2>Source Detail</font>',
collapsible: false,
region:'east',
id:'pendingSourceViewer',
//margins: '5 0 0 0',
width: 280,
items: mySourceDetailForm
},
{
title: '<font size=2>My Source List</font>',
collapsible: false,
region:'center',
//margins: '5 0 0 0',
id: 'allMySources',
layout: 'fit',
autoScroll: true,
//width: 580,
//defaults:{autoWidth: true},
items: mySourceGrid
}]
})
}]
}//end of my Source tab
]//end of tab items
}); //end of tab panel
If you want to use the full browser window, use a Viewport.
Thanks. I have not used Viewport before, could you please give more details?Quote:
Originally Posted by Animal
My layout:
so should I put my tabPanel into the viewport? or put panel2(panel3) into the ViewPort?Code:div (formContainer)
|
tabPanel
| | |
tab1 tab2 tab3
(form) (borderLayout in panel2) (borderLayout in panel3)
thanks a lot!