PDA

View Full Version : innerLayout not defined



damien
30 Apr 2007, 7:08 AM
Hello, firts off all i want to say i am new to ext and javascript, but i love how quick you can make progress with this forum and its examples. The ext looks very good!

I have a question about the innerLayout. I made a main page with a complex layout:
- north
- east
- west
- center
- south

Inside the center i have a:
- south
- center

This is the innerLayout and i can load html pages and scripts in the center from a tree i have made in the west. All pages i want to load in the center innerLayout i load by loading a html paga in the center and include a .js script inside this html page.

The problem:
I can create tabs, extra contentpanelc etc if i load them from the beginning in the main.html. But when i want to load a extra contentpanel in the center, or a tabpanel (i read some people say that is more smart then loading multiple contentpanels) i get the problem that the innerLayout is not defined. It looks like it is not possible to Ext.get the center innerLayout from outside the main.html. i have a feeling i am missing some basic understanding from javascript to solve my problem. Somebody can help me? Thanks!

part off main.html



Hoofdscherm = function(){
var layout,innerLayout;
return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 32,
titlebar: false
},
west: {
split:true,
initialSize: 220,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: false,
cmargins: {top:0,bottom:2,right:2,left:2}
},
east: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true,
autoScroll:false,
useShim:true,
collapsed:false,
cmargins: {top:0,bottom:2,right:2,left:2}
},
south: {
split:false,
initialSize: 22,
titlebar: false,
collapsible: false,
animate: false
},
center: {
titlebar: false,
autoScroll:true,
resizeTabs: true,
minTabWidth: 50,
preferredTabWidth: 150
}
});
var innerLayout = new Ext.BorderLayout('center', {
south: {
split:true,
initialSize: 250,
minSize: 100,
maxSize: 400,
autoScroll:false,
collapsible:true,
titlebar: true,
animate: true,
cmargins: {top:2,bottom:0,right:0,left:0}
},
center: {
autoScroll:false,
titlebar:true,
alwaysShowTabs:true,
resizeTabs: true,
minTabWidth: 50,
preferredTabWidth: 150,
tabPosition:"top"
}
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', {title: 'Noordem'}));
layout.add('south', new Ext.ContentPanel('south', {title: 'Zuiden'}));
layout.add('west', new Ext.ContentPanel('west1', {title: 'Navigatie',autoScroll:true,fitToFrame:true}));
layout.add('west', new Ext.ContentPanel('west2', {title: 'Favorieten',autoScroll:true,fitToFrame:true}));
layout.add('east', new Ext.ContentPanel('snelkoppeling', {title: 'Snelkoppelingen', fitToFrame:true}));
innerLayout.add('center', new Ext.ContentPanel('midden', {title: 'tabblad1', fitToFrame:true}));
innerLayout.add('south', new Ext.ContentPanel('onder_midden', 'Onder'));
layout.add('center', new Ext.NestedLayoutPanel(innerLayout));
innerLayout.getRegion('center').showPanel('midden');
layout.getRegion('west').showPanel('west1');
layout.endUpdate();
I can access the layout. If i load a page into the contentpanel 'midden' i can use


layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('midden1', {title: 'sdsdf'}));
layout.endUpdate();if i change center into midden it gives a error. Howto dynamicly change the innerLayout? Using the innerLayut instead off the layout gives a error as well.

Is the innerLayout not accessible outside the function in the mainpage?
I would like to create tabs inside 'midden' the amount is dynamic, it depends on the page loaded. Somebody can give me a hint? Please i am trying for 3 days now.

damien
1 May 2007, 2:44 AM
Nobody can help me? I add a screenshot. The basic question i have is: How can i control the tabs in the upper center region. They are automaticly created by adding multiple contentpanels into a innerLayout. But i can not access them like tabs. I can only access all the elements from the layout. The innerLayout i can not find. Does it has something to do with the fact that the layout uses document.body and the innerlayout uses 'center'? Please give me a hint.

dfenwick
1 May 2007, 4:24 AM
Hoofdscherm = function(){
var layout,innerLayout; <--- This declares a property of your class
return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 32,
titlebar: false
},
west: {
split:true,
initialSize: 220,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: false,
cmargins: {top:0,bottom:2,right:2,left:2}
},
east: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true,
autoScroll:false,
useShim:true,
collapsed:false,
cmargins: {top:0,bottom:2,right:2,left:2}
},
south: {
split:false,
initialSize: 22,
titlebar: false,
collapsible: false,
animate: false
},
center: {
titlebar: false,
autoScroll:true,
resizeTabs: true,
minTabWidth: 50,
preferredTabWidth: 150
}
});
var innerLayout = new Ext.BorderLayout('center', { <--- Here you're redefining innerLayout in the local scope
south: {
split:true,
initialSize: 250,
minSize: 100,
maxSize: 400,
autoScroll:false,
collapsible:true,
titlebar: true,
animate: true,
cmargins: {top:2,bottom:0,right:0,left:0}
},
center: {
autoScroll:false,
titlebar:true,
alwaysShowTabs:true,
resizeTabs: true,
minTabWidth: 50,
preferredTabWidth: 150,
tabPosition:"top"
}
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', {title: 'Noordem'}));
layout.add('south', new Ext.ContentPanel('south', {title: 'Zuiden'}));
layout.add('west', new Ext.ContentPanel('west1', {title: 'Navigatie',autoScroll:true,fitToFrame:true}));
layout.add('west', new Ext.ContentPanel('west2', {title: 'Favorieten',autoScroll:true,fitToFrame:true}));
layout.add('east', new Ext.ContentPanel('snelkoppeling', {title: 'Snelkoppelingen', fitToFrame:true}));
innerLayout.add('center', new Ext.ContentPanel('midden', {title: 'tabblad1', fitToFrame:true}));
innerLayout.add('south', new Ext.ContentPanel('onder_midden', 'Onder'));
layout.add('center', new Ext.NestedLayoutPanel(innerLayout));
innerLayout.getRegion('center').showPanel('midden');
layout.getRegion('west').showPanel('west1');
layout.endUpdate();
I can access the layout. If i load a page into the contentpanel 'midden' i can use


layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('midden1', {title: 'sdsdf'}));
layout.endUpdate();



Comments inline

damien
1 May 2007, 5:05 AM
Thank you. I have solved the problem by changing the var innerlayout into just innerlayout without var. Now i can access the tabs in the center from outside the main page. Thanks. I have to work on my java skills.