Как остановить ширину дополнительных столбцов в Xpages DataView от изменения

Question

У меня хороший DataView, только с одной ошибкой. Ширина дополнительных столбцов изменяется в зависимости от ширины данных в поле. Я думаю, что это выглядит намного лучше, если эти ценности не прыгают.

Как установить ширину этих столбцов? Я попытался использовать ширину с! Важно в стиле дополнительных столбцов, но это не сработало. Я попробовал добавить & NBSP к значениям, но это не сработало отлично, и на самом деле это действительно kludgy.

<xe:dataView id="dataView1" var="dvEntry" 
        collapsibleDetail="false" columnTitles="true" 
        detailsOnClient="true" openDocAsReadonly="true" rows="25" 
        disableTheme="false" pageName="/xpFormEmployee.xsp" 
        styleClass="lotusTable" rowStyleClass="EVEN,ODD" 
        rowStyle="width:1000px"> 


        <xe:this.data> 
         <xp:dominoView var="view1" 
          viewName="(xpEmployeeByNameActiveOnly)" 
          databaseName="TheTruth.nsf" dataCache="id" 
          searchExactMatch="false"> 
          <xp:this.search><![CDATA[#{javascript:var query:String = ''; 
var search:String = viewScope.get("searchString") 
if (search === null || search == "") 
{query = ""} 
else 
{query = 'FIELD HR_FullName CONTAINS ' + search + '*'} 
return query 

}]]></xp:this.search> 
         </xp:dominoView> 
        </xe:this.data> 
        <xe:this.extraColumns> 

         <xe:viewExtraColumn 
          style="width:400px !important;vertical-align:middle;font-weight:bold" 
          headerStyle="font-weight:bold;font-size:12pt" contentType="html" 
          columnTitle="Location"> 
          <xe:this.href><![CDATA[#{javascript:var geoView:NotesView = database.getView("(DbLookupLocationsByName)"); 
var geoDoc:NotesDocument; 
var UNID:String; 

geoDoc = geoView.getDocumentByKey(dvEntry.getColumnValue("HR_GeoLocation")); 

if (geoDoc != null) 
{ 
UNID = geoDoc.getUniversalID(); 
"notes://XX/__86257D58005E456E.nsf/0/" + UNID + "?OpenDocument"} 
else 
{""}}]]></xe:this.href> 
          <xe:this.value><![CDATA[#{javascript:var tmpLoc:String = dvEntry.getColumnValue("HR_geoLocation"); 
var lenTmpLoc = 30 - tmpLoc.length; 
var tmpPad:String = ""; 

for (i = 0; i < (lenTmpLoc); i++) 
{tmpPad += "&nbsp;";} 

return tmpLoc + tmpPad 
}]]></xe:this.value> 

         </xe:viewExtraColumn> 
         <xe:viewExtraColumn columnTitle="Office Phone" 
          columnName="HR_OfficePhone" 
          style="width:400px !important;vertical-align:middle" 
          headerStyle="font-weight:bold;font-size:12pt" 
          contentType="html"> 
          <xe:this.value><![CDATA[#{javascript:var tmpLoc:String = dvEntry.getColumnValue("HR_officePhone"); 
var lenTmpLoc = 50 - tmpLoc.length; 
var tmpPad:String = ""; 

for (i = 0; i < (lenTmpLoc); i++) 
{tmpPad += "&nbsp;";} 

return tmpLoc + tmpPad 
}]]></xe:this.value> 
         </xe:viewExtraColumn> 

         <xe:viewExtraColumn></xe:viewExtraColumn> 
        </xe:this.extraColumns> 
        <xe:this.iconColumn> 
         <xe:viewIconColumn> 

          <xe:this.icons> 
           <xe:iconEntry 
            style="height:35px;width:35px;padding-right:5.0px"> 
            <xe:this.url><![CDATA[#{javascript:var phtStr:String; 
var imgNme:String; 
phtStr = dvEntry.getColumnValue("photo"); 

var docUNID:String = dvEntry.getColumnValue("docUNID"); 


if (phtStr != "") 
{imgNme = "XXXXXX/xsp/.ibmmodres/domino/OpenAttachment/XXXX" + docUNID + "/$File/" + phtStr + "?Open"} 
else 
{imgNme = "xpPhotoPlaceholder.gif"} 
imgNme 

}]]></xe:this.url> 
           </xe:iconEntry> 
          </xe:this.icons> 
         </xe:viewIconColumn> 
        </xe:this.iconColumn> 
        <xe:this.summaryColumn> 
         <xe:viewSummaryColumn columnTitle="Name" 
          headerStyle="font-weight:bold;font-size:12pt;padding-left:8.0px"> 
         </xe:viewSummaryColumn> 
        </xe:this.summaryColumn> 
        <xp:this.facets> 
         <xp:panel xp:key="summary"> 


          <xp:table> 
           <xp:tr> 
            <xp:td> 
             <xp:text escape="false" 
              id="computedField2"> 
              <xp:this.value><![CDATA[#{javascript:return "<h4><a href='xpFormEmployee.xsp?openDocument&documentId=" + dvEntry.getUniversalID() + "'>" + dvEntry.getDocument().getItemValueString('HR_FullName') + "</a></h4>"; 
}]]></xp:this.value> 
             </xp:text> 
            </xp:td> 
           </xp:tr> 

          </xp:table> 
         </xp:panel> 


         <xe:pagerSizes id="pagerSizes1" 
          sizes="5|10|25|50|100" xp:key="pagerTopLeft"> 
         </xe:pagerSizes> 
         <xp:panel xp:key="pagerBottomLeft" 
          id="panel3"> 
          <xe:pagerSizes id="pagerSizes2"></xe:pagerSizes> 
         </xp:panel> 
         <xp:panel xp:key="pagerTopRight" 
          styleClass="panelPagerTopRight"> 
          <xp:pager layout="Previous Group Next" 
           for="dataView1" id="pager3" partialRefresh="true" 
           styleClass="pager"> 
          </xp:pager> 
         </xp:panel> 
         <xp:panel xp:key="pagerBottomRight"> 
          <xp:pager layout="Previous Group Next" 
           for="dataView1" id="pager1" partialRefresh="true" 
           styleClass="pager"> 
          </xp:pager> 
         </xp:panel> 
         <xp:panel xp:key="noRows"> 
          <xp:br /> 
          <xp:div styleClass="xlEmptyFacet"> 
           <xp:label> 
            <xp:this.value><![CDATA[#{javascript:"No Documents Found"}]]></xp:this.value> 
           </xp:label> 
          </xp:div> 
         </xp:panel> 
        </xp:this.facets> 
       </xe:dataView> 

Answer 1

Изменить стиль класса lotusTable к

.lotusTable { 
    table-layout: fixed; 
} 

width= Тогда стиль в колонки headerStyle или style не будут игнорироваться больше.

Пример:

Предполагая, что код CSS сверху в таблицы стилей ресурсов «fixedTable.css», то вы можете установить ширину столбцов формируют таким образом

<xp:this.resources> 
     <xp:styleSheet 
     href="/fixedTable.css"></xp:styleSheet> 
    </xp:this.resources> 
    <xe:dataView ...> 
     ... 
     <xe:this.extraColumns> 
      <xe:viewExtraColumn 
       headerStyle="width:10%;" ...> 
       ... 
     </xe:viewExtraColumn> 
     <xe:this.extraColumns> 
      <xe:viewExtraColumn 
       headerStyle="width:20%;" ...> 
       ... 
     </xe:viewExtraColumn> 
     <xe:this.summaryColumn> 
      <xe:viewSummaryColumn 
       headerStyle="width:70%;" ...> 
      </xe:viewSummaryColumn> 
     </xe:this.summaryColumn> 
     ... 
    </xe:dataView>