Xpages中Dojo Data Grid样式异常：排序与筛选窗口问题求助

Hey there! Let's work through those styling glitches you're seeing with your first Dojo Data Grid in XPages. Missing CSS or incomplete theme setup is almost always the culprit here—super common when getting started with these components, so let's break down the fixes step by step:

1. Ensure the Dojo Theme is Properly Applied #

Your view already has dojoTheme="true", but Dojo's themes (like the default claro theme XPages uses) rely on a class being added to the page body to apply styles correctly. Add the claro class directly to your xp:view tag:

<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true" dojoTheme="true" styleClass="claro">

This ensures all Dojo components (including the grid's sort indicators and filter dialog) inherit the correct theme styles.

2. Verify Required Dojo Modules & CSS Are Loaded #

Missing grid-specific modules can break both functionality and styling. Add these resources to your page to cover sorting, filtering, and core grid styles:

<xp:this.resources>
    <!-- Load core Dojo Grid modules -->
    <xp:dojoModule name="dojox.grid.EnhancedGrid"></xp:dojoModule>
    <xp:dojoModule name="dojox.grid.enhanced.plugins.Filter"></xp:dojoModule>
    <xp:dojoModule name="dojox.grid.enhanced.plugins.Sort"></xp:dojoModule>
    <!-- Explicitly load the claro theme CSS (prevents missing styles) -->
    <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/claro/claro.css"></xp:styleSheet>
    <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/enhanced/resources/claro/EnhancedGrid.css"></xp:styleSheet>
    <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/enhanced/resources/claro/EnhancedGrid_rtl.css"></xp:styleSheet>
</xp:this.resources>

Using EnhancedGrid instead of the basic DataGrid gives you more reliable support for sorting and filtering features, along with better out-of-the-box styling.

3. Fix the Tiny Filter Dialog #

If the filter window is still cramped, add custom CSS to override the default small dimensions. Drop this into a style sheet on your page:

/* Widen the filter dialog and add padding for readability */
.dojoxGridFilterDialog {
    width: 450px !important;
    min-height: 200px !important;
    padding: 1rem !important;
}

/* Prevent content from being cut off */
.dojoxGridFilterDialog .dijitDialogPaneContent {
    overflow: visible !important;
}

4. Check for XPages Theme Conflicts #

If you're using a custom XPages theme, it might be overriding Dojo's grid styles. Test temporarily switching to the default oneui theme in your xsp.properties file:

xsp.theme=oneui

If the problem disappears, your custom theme has conflicting CSS rules—look for styles targeting table, th, or .dijit classes that might be interfering with the grid.

Quick Check for Your Grid Configuration #

Make sure your grid is explicitly enabled for sorting and filtering via the plugins property (if you haven't already):

<xp:dataGrid id="yourDataGrid" store="yourDataStore">
    <xp:this.plugins>
        <xp:gridPlugin plugin="dojox.grid.enhanced.plugins.Filter"></xp:gridPlugin>
        <xp:gridPlugin plugin="dojox.grid.enhanced.plugins.Sort"></xp:gridPlugin>
    </xp:this.plugins>
    <!-- Your column definitions here -->
</xp:dataGrid>

Start with the theme and CSS fixes first—those are the most likely causes of your sort indicator and filter dialog issues. Let me know if you hit any snags as you test these changes!

内容的提问来源于stack exchange，提问作者Bob Cross