Jan 4, 2012, 3:51 PM
31 Posts

xe:dynamicViewPanel or xp:viewPanel - inherit column width from Notes view?

  • Category: Extension Library
  • Platform: Windows
  • Release: 8.5.2
  • Role: Developer
  • Tags: View Panel
  • Replies: 4
Wondering if anyone's got any tips for how to preserve view column widths when using the Ext.Lib dynamic view panel control?
I'd prefer to use the Ext.Lib control vs. the stock xp:viewpanel so I don't have to build custom controls for each view I want to display.   I'm following the example provided in the Ext.Lib. Demo Db where the view name is being passed via a viewScope variable.
That being the case, I find that when you collapse all categories using the <xe:dynamicViewPanel> control, any view column headers contract (squish) to the left, then when you expand all categories the view column headers expand back up to match the content.  Is there a property/setting/trick I can use to stop the view column headers doing this shimmy/shake across the page?
Is there a way to get a handle to the column width set up on the Notes view & somehow stuff that into the dynamic view panel somewhere so it abides by it?
Any ideas will be most appreciated.  Thanks.   
Jan 4, 2012, 10:51 PM
25 Posts
Re: xe:dynamicViewPanel or xp:viewPanel - inherit column width from Notes view?
You could do something like:

var db = session.getCurrentDatabase(); 
var view = db.getView("YourView"); 
var columns:java.util.Vector = view.getColumns();
var columns:java.util.Vector = dbView.getColumns();
for (var i = 0;i < columns.size();i++) {
    var column:lotus.domino.ViewColumn = columns.get(i);
    var ptSize = column.getFontPointSize();
    if (column.isFontBold()) {
        ptSize = ptSize + 1;
    var computedWidth = column.getWidth() * (120 / ptSize);
That would actually loop through all the columns, but it should show the general idea. Also, if that's too small, as it's based on a screen DPI (determined in the resolution being run) of 120 DPI. So, you could make it a little larger by changing (120 / ptSize) to (96 / ptSize). 
Jan 5, 2012, 11:27 AM
31 Posts
Re: xe:dynamicViewPanel or xp:viewPanel - inherit column width from Notes view?
Thanks Keith, your code looked promising & I tried to find a home for it in the <xe:dynamicViewPanel> properties but most of them only apply classes to the objects, not styles.  The 2 that do apply comma-delimited styles are the dataTableStyle which appears to pertain to the pagers, and viewStyle which only applies to the generated <table> tag, not the individual <th> or <td> tags like so:
<table width="100%" cellspacing="0px" cellpadding="0px" class="xspDataTableViewPanel" style="width=48px;width=80px;width=200px;width=147px;width=187px;width=267px;width=427px;width=587px;width=80px;width=227px;" id="view:_id1:_id2:_id26:dynamicViewPanel1_OUTER_TABLE"> 
The columnClasses property of the dynamic view panel was the closest to what I needed but I don't think I want to create a few dozen classes with all possible column widths just to get that to work!
I suppose I could create my own data table or view panel dynamically & use your code to set the view column header widths -- that's where I'm heading now.  It's just too bad that the Ext.Lib. dynamic view panel is not going to work out.
Thank-you for the suggestion & code.
Jan 8, 2012, 1:21 PM
25 Posts
Re: xe:dynamicViewPanel or xp:viewPanel - inherit column width from Notes view?


OK, I think I found a solution... To set a width on each column, you'll need to get the children of the dynamicViewPanel, which will be the columns. These have a java class of "com.ibm.xsp.extlib.component.dynamicview.UIDynamicViewPanel.DynamicColumn".  One of the methods of this class is "setWidth(String widthInPx)". So with this we can now loop through the children of the dynamicViewPanel and set a width on each column. This should go something like:  

var viewPanel:com.ibm.xsp.extlib.component.dynamicview.UIDynamicViewPanel = getComponent("dynamicViewPanel1");
var viewChildren:java.util.List = viewPanel.getChildren();
var viewPanelData:com.ibm.xsp.model.domino.DominoViewData = viewPanel.getData();
var viewName = viewPanelData.getViewName();
var domView:NotesView = session.getCurrentDatabase().getView(viewName);
for (var i = 0;i < viewChildren.size();i++) {
     var child:com.ibm.xsp.extlib.component.dynamicview.UIDynamicViewPanel.DynamicColumn = viewChildren[i];
     var viewCol:NotesViewColumn = domView.getColumn(i +1);
     if (viewCol) {
         if (viewCol.getItemName() != child.getColumnName()) {
             var domViewColumns:java.util.Vector = domView.getColumns();
             for (var j = 0;j < domViewColumns.size();j++) {

                var tmpViewColumn:NotesViewColumn = domViewColumns.get(i);
                    if (tmpViewColumn.getItemName() == child.getColumnName()) {
                       viewCol = tmpViewColumn;

        var ptSize = viewCol.getFontPointSize();
        if (viewCol.isFontBold()) {
            ptSize = ptSize + 1;
        ptSize = viewCol.getWidth() * (120 / ptSize);
I tried this out and it works for me so you should get similar results. The biggest thing to account for is the dynamicViewPanel id (in bold above). You could put this in a function that accepts the dynamicViewPanel id and then be able to use it from anywhere or just be sure to plug the proper id in. I put this in a button for simplicity sake in proving the concept but there's no reason why this "shouldn't" work in the afterPageLoad event. Figuring this out also gave me some good fodder for my blog and a custom control for finding component class info.
Jan 9, 2012, 5:18 PM
31 Posts
Re: xe:dynamicViewPanel or xp:viewPanel - inherit column width from Notes view?

Well Keith, I really appreciate your suggestion & code.  Really!

I tried it via a button as you suggested just to see the effect & there are styles/classes that come with the view column headers that interfere with setting the width.  It seems an extra 20 pixels is always added to each column header and style classes are applied to span tags within span tags that make any hover over styling go wonky (that also applies to the stock viewPanel control so it's not unique to the dynamic view panel control).  For some reason the xspPanelViewColumnHeader class is applied to the surrounding <div> & then also the internal <span> class surrounding the actual text.

<th width="60px;" scope="col">

<div style="overflow: -moz-scrollbars-none; overflow-x: hidden; width:60px;">

<div class="xspPanelViewColumnHeader">

<span><span class="xspPanelViewColumnHeader" id="view:_id1:_id2:include1:_id32:dynamicViewPanel1:_id181:__internal_header_title_id">Menu</span></span>



If I inspect this element via firebug, it's grown to 80 pixels:

I even did this on the XPages Demo Db Dynamic View XPage just to make sure it isn't my custom styling or something specific to my app that's causing it.  Same thing there.
Then on top of that, any data row columns that are categorized are getting truncated at the width setting even though they have a colspan attribute on the outer <td> tag:

 <td width="60px;" class="xspColumnViewMiddle" colspan="8">

<div style="overflow: -moz-scrollbars-none; overflow-x: hidden; white-space: nowrap; width:60px;">

<div class="xspColumnViewMiddle">

<button style="border:none;background-color:transparent;cursor:pointer;width:20px;" title="expanded" type="button" id="view:_id1:_id2:include1:_id32:dynamicViewPanel1:3:_id181__shrink:1.2button"><img src="/domjava/xsp/theme/common/images/collapse.gif" alt="expanded" id="view:_id1:_id2:include1:_id32:dynamicViewPanel1:3:_id181__shrink:1.2img">

</button><a class="xspColumnViewMiddle" style="cursor:pointer;" id="view:_id1:_id2:include1:_id32:dynamicViewPanel1:3:_id181__shrink:1.2link">resources</a>



So ... I can't spend any more time trying to use the dynamic view panel or getting the view panel to abide by my widths.  I'll just go back to creating a custom control for each view panel for now.  If I find some spare time later when everything else is working then I can revisit this.

I'm sorry I couldn't use your solution, it just didn't work for me.  Thanks a bunch for all your time & efforts -- great stuff!