PDA

View Full Version : Layout error causes gridPanel to not appear



geewhizbang
22 Aug 2009, 8:27 PM
The problem is that the grid panel never appears. It is supposed to appear in the red coded container below:

The code worked when I was not using this complex arrangement, and continues to hit the server and appears to to create the object, it just doesn't appear. When I analyze the rendered html in IE7 using IE Dev Toolbar, there are two divs inserted in the forumContents panel, but neither contains the gridPanel.

The process starts with tab data is passed to the page by the server on the master view:


[{ id: 'home', text: 'Home'},{ id: 'forum', text: 'Forum' },{ id: 'wiki', text: 'Wiki' }];


I use a loop on the master view to build up the basic content areas of each tab. The tabs appear correctly. This is probably a good place for using Ext.Extend, but I am trying to walk before I start running. The area in red is where I expect my content in the tab view to appear.


function BuildViewPort(ActiveTab, TabData)
{
var TabItems = [];
for (var iTab = 0; iTab < TabData.length; iTab++)
{
var tabId = TabData[iTab].id + 'Tab';
TabItems[iTab] =
[
{
title: TabData[iTab].text,
itemId: tabId,
layout: 'border',
plain:true,
hideBorders: true,
items:
[
{
region: 'west',
width: 200,
cls: 'SD_LeftBar',
bodyStyle: 'background:transparent',
html: '&nbsp;',
hideBorders: true
},{
region: 'center',
layout: 'border',
hideBorders: true,
items:
[
{
region: 'north',
height: 20,
bodyStyle: 'background:transparent',
html: '&nbsp;',
hideBorders: true,
id: TabData[iTab].id + 'Bar'
},{
region: 'center',
hideBorders: true,
autoScroll: true,
id: TabData[iTab].id + 'Contents',
bodyStyle: 'background:transparent',
autoLoad: '/kb/'+ TabData[iTab].id
}
]
},{
region: 'south',
height: 30,
bodyStyle: 'background:transparent',
html: 'footer',
hideBorders: true
}
]
}
]
}
KnowledgeBase.PageTabs = new Ext.TabPanel
(
{
stateful: false,
autoDestroy: false,
border: false,
hideBorders: true,
plain:true,
region:'center',
items: TabItems
}
);
KnowledgeBase.PageViewPort = new Ext.Viewport
(
{
layout: 'border',
cls: 'SD_Body',
items:
[
{
region: 'north',
frame : false,
border: false,
autoHeight: true,
bodyStyle: 'background:transparent',
html:'<div id="header" class="SD_Title"><p><a href="">Web Software Help & Tutorial</a></p></div><div id="divPage"></div>'
},
KnowledgeBase.PageTabs
]
}
);
KnowledgeBase.PageTabs.setActiveTab(ActiveTab + 'Tab');
}


The view code brings in the following code to insert a grid panel into the tab. As far as I can tell it is running correctly, so I have abbreviated this rather lengthy code to just the top properties of the grid:


function ShowForumCats()
{
if (typeof(KnowledgeBase.Forums.Renderers) == "undefined")
{
KnowledgeBase.Forums.Renderers =
{
// code here
};
KnowledgeBase.Forums.ForumListStore = new Ext.data.GroupingStore
(
{
proxy: new Ext.data.DirectProxy
(
{
paramsAsHash: false,
directFn: DirectRequest.GetForumView
}
),
//code here
}
);
KnowledgeBase.Forums.gridForumCats = new Ext.grid.GridPanel
(
{
frame: false,
stripeRows: false,
scroll: false,
columnLines:true,
width: 900,
disableSelection: true,
store: KnowledgeBase.Forums.ForumListStore,
trackMouseOver: false,
//this name was created in the loop on the master view.
renderTo: 'forumContents',
autoShow:true,
columns:
[
//code here
],
view: new Ext.grid.GroupingView
(
{
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}
)
}
);
}
KnowledgeBase.Forums.ForumListStore.load();
}
//this code builds my BreadCrumb control and calls the code to build the grid.
function ForumInit()
{
if (typeof(KnowledgeBase.Forums) != "undefined") return;
Ext.ns('KnowledgeBase.Forums');
var ForumTab = KnowledgeBase.PageTabs.activeTab.body;
KnowledgeBase.Forums.BreadCrumb = new BreadCrumbManager(["root","ForumCat","Forum","Thread","Post"]);
KnowledgeBase.Forums.BreadCrumb.writeCrumb("Forum", "ForumCat", OpenForum, null, true);
//this works and displays properly in its region:
KnowledgeBase.Forums.BreadCrumb.renderTo("forumBar");
KnowledgeBase.Forums.Displayer = new DisplaySingle();
ShowForumCats();
}
ForumInit();

Animal
22 Aug 2009, 11:12 PM
YOu MUST format your code better and then READ it.



TabItems[iTab] =
[


See that? You are setting up TabItems to be an Array of one element Arrays which contain a Panel

And why use a Panel anyway?????

Use



TabItems[iTab] = {
xtype: 'container',
title: TabData[iTab].text,


Format your code using Ext's standards. That way everyone can read it.

Animal
22 Aug 2009, 11:13 PM
Same goes for almost all those {...} in there. They are Panels and do not need to be.

Just poke the DOM with Firebug and see how much stuff there is in there.

Use Containers and then see how much simpler the document is.

geewhizbang
23 Aug 2009, 3:29 PM
I am not completely familiar with creating complex arrays inline like this, so I still make mistakes such as this. That is why I posted the help request, I didn't know that the square brackets were incorrect in this situation.

I got this code from examples, and they used panels.

I have been browsing the code in IE Dev Toolbar and it has been more complex than it needs to be.

I also use Firebug, but the way IE Dev Toolbar browses objects is somewhat better designed.

-----

I'm sorry, but the convention of having the brackets not aligned makes for extremely unreadable and ugly code.

The way I post my code is far more readable and it makes the nesting much more obvious.

geewhizbang
23 Aug 2009, 4:56 PM
function BuildViewPort(ActiveTab, TabData)
{
var TabItems = [];
for (var iTab = 0; iTab < TabData.length; iTab++)
{
var tabId = TabData[iTab].id + 'Tab';
TabItems[iTab] =
//square bracket eliminated here. Works either way btw.
{
title: TabData[iTab].text,
itemId: tabId,
layout: 'border',
plain:true,
hideBorders: true,
xtype: 'container',
items:
[
{
region: 'west',
width: 170,
cls: 'SD_LeftBar',
bodyStyle: 'background:transparent',
html: '&nbsp;',
hideBorders: true
},{
region: 'center',
layout: 'border',
hideBorders: true,
items:
[
{
region: 'north',
height:30,
hideBorders: true,
id: TabData[iTab].id + 'Bar'
},{
region: 'center',
hideBorders: true,
layout: 'fit',
style: 'background-color: white;',
id: TabData[iTab].id + 'Contents',
autoScroll: true,
autoLoad: '/kb/'+ TabData[iTab].id
},{
region: 'south',
height: 18,
bodyStyle: 'background: #8899CC',
html: 'footer',
hideBorders: true
}
]
}
]
}
}
KnowledgeBase.PageTabs = new Ext.TabPanel
(
{
stateful: false,
autoDestroy: false,
border: false,
hideBorders: true,
plain:true,
region:'center',
items: TabItems
}
);
KnowledgeBase.PageViewPort = new Ext.Viewport
(
{
layout: 'border',
cls: 'SD_Body',
items:
[
{
region: 'north',
frame : false,
border: false,
autoHeight: true,
bodyStyle: 'background:transparent',
html:'<div id="header" class="SD_Title"><p><a href="">Web Software Help & Tutorial</a></p></div><div id="divPage"></div>'
},
KnowledgeBase.PageTabs
]
}
);
KnowledgeBase.PageTabs.setActiveTab(ActiveTab + 'Tab');
KnowledgeBase.SetActiveTab = function(activeTab) { KnowledgeBase.PageTabs.setActiveTab(activeTab.TabId); };
}


I have removed the extra square brackets, but that doesn't appear to cause any problems with the TabPanel, it renders anyway either way.

On the view page, I have the following html line, which fixed the problem:


<divid="divForum"style="padding:10px; margin:0px;"></div>


This is the only html in the view, the rest is one script block that requests alll of the other content dynamically, which mostly works.

I have tried adding this directly in BuildViewPort, but so far I have not found a way to write this that doesn't cause the scripts to fail because objects are either not being created or they aren't ready when I try to run the script.

I don't know if this "divForum" is causing problems, but each time I change tabs and return to the already rendered tab, there is a div at the top of the page that grows each time. It appears to have something to do with the top region <tabname>Bar, rather than being part of my "center" region that encloses my main content for the tab.

This div pushes down the top scrollbars when they appear for the tab.

I do know that the code that gets brought in with the view for the tab doesn't run twice. It runs only once.

Animal
23 Aug 2009, 9:08 PM
WHy have one bit pf HTML? Remove it.

geewhizbang
23 Aug 2009, 10:42 PM
I still have my original problem without it. The code runs but the forum grid never shows up unless I do this.

I have to say that you were right about using "container" instead of nothing or "box". I have added that everywhere I could, and the rendering problems have stopped. I no longer have problems with the header container growing each time i revisit the tab.

I looked thru my entire code base for any more square bracket mistakes, but the one I posted here was the only one of them.

Surprisingly ExtJS works anyway with the incorrectly formatted array.